AJAX Search

The built-in search engine utilises AJAX and MySQL's powerful FULLTEXT feature to rapidly return, in real-time, any pages that match your search query.

When you click on a returned result, the visited page will highlight the search terms until one of them is clicked on. Try searching for 'ajax' and clicking on a returned result.

Search results appear here in real-time.
Example Sidebar

Create and integrate sidebars on-the-fly.

You can create and add as many of these sidebars as you want. Sidebar content is generated via the same easy to use WYSIWYG editor as regular pages, allowing you to insert and format text, HTML, forms and images. Each sidebar has the option of a toggle link which expands and collapses the panel. The sidebar's toggle state is recalled upon susbsequent visits to the same page.

You can even create a sidebar that contains raw PHP code - thus providing unlimited extensibility via functions, libraries and includes. Smart.

Magic Menu.

Following suit with the rest of Vanilla's flexible features, we thought we'd apply the same to the main navigation menu. Whenever a new page is created you are given the option of flagging it as a menu item. Furthermore, you can stipulate whether it is only a menu item (i.e., a placeholder which doesn't link to any content).  If you choose this option, you can also select what happens when it is clicked - nothing or jump to a specified URL.  The 'Features' link on the navigation menu above is such an item - only the child items under it can be clicked.

The actual navigation menu operates to a depth of four levels - that's to say you can have a row of parent (or top level) pages, their children underneath, their children underneath that, and then their children underneath that again. An example of this can be seen on the navigation above under Features > Content Management > Parent and Child Pages > I'm a Great-Grandchild.

Cross-Browser Compatibility and jQuery

The navigation menu itself relies on a mixture of CSS, HTML and jQuery.  It all works out of the box so you'll probably only ever need to edit the CSS, which is kept separate from the main stylesheet.  The jQuery feature actually began as a hack to get the menu's sub levels showing properly in Internet Explorer 6.  This use of jQuery then opened up other possibilities and you can now apply fading and effects to the menu from the admin area (we've turned them off on the public site).

Tooltips

VIa the main admin page you can choose whether the navigation items have tooltips - extended descriptions that appear when your mouse is over the menu.  This tooltips can either be default browser ones or jQuery 'fancy' ones.

Styling the Navigation Menu

You can change the position (left, right, centre) and orientation (horizontal or vertical) of the navigation menu from the administration area. The menu also has its own separate CSS file, allowing you to modify its appearance without disturbing the rest of your layout.

Accessibility and Keyboard Shortcuts

The navigation menu and page links can be traversed using the keyboard on most modern browsers.  Furthermore, all links, both in regular and hi-viz display mode, show prominent borders and background colours to aid those with visual impairment.

Keyboard Shortcuts:

  • TAB - skip forwards through menu items/links
  • SHIFT + TAB - skip backwards through menu items/links
  • RIGHT ARROW - open sub menu
  • ENTER - visit menu link (same as a mouse click)

Read more about Vanilla's accessibility features.