Using CSS to create different menu types

Introduction

Different menus types are created using a combination of PHP to generate the actual menu HTML, CSS to style it, and JavaScript to add interactivity.

Note that:

  1. all menus are set to recieve both the nav and menu classes, setting up their layout and base formatting respectively
  2. all examples on this page are driven by the rules in both nav-layout.css and nav-formatting.css which are discussed at length on the Styling page.

Table of contents

No classes:

Core classes:

Dropdown classes:

Width-setting classes:

Dropdown-styling classes:

Using multiple classes:

No classes

An unstyled menu

Without any page styles, the menu is rendered by the browser as a regular unordered list:

Core classes

A basic menu

Calling root() generates the top-most level of the menu.

With page styles and the basic nav and menu classes applied (the default), the generated menu looks like this:

The Nav call is:

$nav->root()->render(TRUE);

A horizontal menu

With the horizontal class applied, the root <li> items are coerced into floating horizontally, so the generated menu looks like this:

The Nav call is:

$nav
	->set('class', 'horizontal')
	->root()
	->render(TRUE);

A tree-style menu

Calling the tree() method renders all or part of an entire tree, and the final generated menu looks like this:

The Nav call is:

$nav
	->set('class', 'tree')
	->tree()
	->render(TRUE);

Rendering menus in this style is not always the most usable solution. Either reformat using alternative CSS, or set the menu class as dropdown (discussed next).

Another option is to use a different item driver. See the Site map demo for an example.

Dropdown classes

All dropdown menus require both jQuery and the nav.js file, which automatically provides interactivity to any menus which have the interactive class applied.

A single-level, vertical dropdown (flyout) menu

Calling dropdown() renders the first 2 levels only of a menu structure.

Generating the menu using either dropdown() or tree() and setting the dropdown and interactive classes yields a vertical (the default) menu with flyout sub-menus:

Note that the root menu is not automatically set to a fixed width. See the Width classes section further down the page for infomration on setting the width of menu items.

The Nav call is as follows:

$nav
	->set('class', 'interactive dropdown') // defaults to a vertical menu
	->dropdown()
	->render(TRUE);

A single-level, horizontal dropdown menu

Adding the horizontal class to the root element instructs the level-1 menu items to float to the left, creating a horizontal top level, with vertically stacking sub-menus:

The Nav call is as follows (note that dropdown() automatically limits menu depth to 2 levels):

$nav
	->set('class', 'horizontal interactive dropdown')
	->dropdown()
	->render(TRUE);

A multiple-level, horizontal dropdown menu

Generating the menu using tree(), and setting both the dropdown and interactive classes yields an effective multi-level interactive menu. The difference between the single-level dropdown is the width and positioning of child <ul> elements is fixed in advance using CSS.

The generated menu looks like this (navigate to Settings > Application Settings to see the third level):

The Nav call is as follows:

$nav
	->set('class', 'horizontal interactive dropdown')
	->tree()
	->render(TRUE);

Width classes

Note that you can use any combination of both the previous and following classes to achieve your menu formatting aims.

Fixed-width menu items

Often it's more comfortable to view vertically-stacked flyout or dropdown menu-items as fixed-width blocks. Adding the fixed-width or fixed-width-root class to the root element coerces all sub-menu items or root-menu items respectively, to take a specified width (editable in the nav-formatting.css file).

The generated menu for a single-level, vertical dropdown, with fixed-width root items, looks like this:

The Nav call is as follows:

$nav
	->set('class', 'interactive dropdown fixed-width-root')
	->dropdown()
	->render(TRUE);

The generated menu for a multiple-level, horizontal dropdown, with fixed-width sub-menu items looks like this:

The Nav call is as follows:

$nav
	->set('class', 'horizontal interactive dropdown fixed-width')
	->tree()
	->render(TRUE);

To make both root and sub-menu items a fixed width, add both classes. Note, again, that you can use any combination of horizontal and fixed-width classes to achieve the desired menu layout.

Automatic-width menu items

Adding the auto-width class allows jQuery, on page load, to examine any nested menu items and set all items in a group to be the length of the longest item. Auto-width items work best for menus with multiple 3rd-level groups where a lot of items are being shown and hidden.

The generated menu for a single-level, vertical dropdown, with auto-width root items, looks like this:

The Nav call is as follows:

$nav
	->set('class', 'interactive dropdown auto-width-root')
	->dropdown()
	->render(TRUE);

The generated menu for a multiple-level, horizontal dropdown, with auto-width root items, looks like this:

The Nav call is as follows:

$nav
	->set('class', 'horizontal interactive dropdown auto-width')
	->tree()
	->render(TRUE);

Additional dropdown classes

Adding arrow indicators

Arrow indicators can be added to any dropdown() or tree()-rendered menus using the arrows class. This works in conjunction with the generated has-children class to display relevant arrow indicators. Note that horizontal menus will cleverly-display vertical arrows in the root menu.

The generated menu for a multiple level dropdown looks like this:

The Nav call is as follows:

$nav
	->set('class', 'horizontal interactive dropdown arrows')
	->tree()
	->render(TRUE);

Highlighting the selected path

The currently-selected user path through the menu can be automatically highlighted using CSS, thanks to a little behind-the-scenes help from JavaScript.

The generated menu for a multiple level dropdown looks like this (note the red highlight on the user-selected items):

The Nav call is as follows:

$nav
	->set('class', 'interactive dropdown selected')
	->tree()
	->render(TRUE);

The HTML for each rolled-over/rolled-out menu item is updated dynamically by JavaScript to add/remove the selected class to the <li> element:

<li class="level-1 selected">
	<a href="http://www.facebook.com">Facebook</a>
</li>

Multiple classes

Fixed-width horizontal tree, with arrow indicators and highlighted selection

The following example demonstrates the use of multiple previous classes:

The Nav call is as follows:

$nav
	->set('class', 'horizontal interactive dropdown fixed-width arrows selected')
	->tree()
	->render(TRUE);