Menu

Create a CSS navigation bar showing the current state

Last modified 2024-01-13 Posted by Olaf Lederer

These days it’s almost a standard to use an un-ordered list element for your page navigation. While a vertical list in some sidebar is some easy piece of work, is the horizontal CSS navigation bar a little bit more complicated.

Preview and example navigation

We need to float the list elements to get them in the horizontal order. There are many great examples on this CSS resource site and also our example here is based on one of the tutorials listed on the suggested site. Notice the active state in the preview above, this is not easy without any scripting language.

Generating the HTML snippet

The next snippet has for the first list item the attribute id “current”. To create some intelligent function to have one code snippet for all of our pages we need some tiny PHP function to get some dynamic navigation:

// maybe you need to add the directory name(s) too
$items = array(
    array('link'=>'scripts.html', 'label'=>'PHP scripts'),
    array('link'=>'tutorials.html', 'label'=>'Tutorial'),
    array('link'=>'template.html', 'label'=>'CSS template'),
    array('link'=>'examples.html', 'label'=>'Code examples')
);
$menu = '
    <ul>';
foreach ($items as $val) {
    $class = ($_SERVER['SCRIPT_NAME'] == $val['link']) ? ' class="current"' : '';
    $menu .= sprintf('<li><a href="%s">%s</a></li>', $val['link'], $val['label']);
}
$menu .= '
    </ul>';
echo $menu;

First we create an array for the links and link labels we want to use in our navigation. You can use also some database result, but you need to change the code a little bit (using a while loop in place of a foreach). Next we loop through all array elements (or the result set) and test every link value against the current URL. If there is a match we add the ID attribute the code. At the end we return the whole HTML snippet.

Some CSS style for our navigation

While the navigation is very simple (just using one level) we need only some style sheet for the unordered list elements. We need to disable the list-style-type and we float the list nodes inside the unordered list container.

ul { list-style-type:none;padding:3px 0 20px 0;border-top:2px solid #E0E0E0;margin:10px 0; }
ul li { float:left; margin:0 2px;width:auto; }

Don’t forget that we are working with a block type element and all those elements are having a 100% width by default. While using a float we change that behavior and the list nodes are ordered in a horizontal direction. Next we like to have some more design elements and also a different style if we hover the mouse above a link item. We add some other style definition for the link/hover elements. At last but not least we need some extra style for the current state in our navigation bar:

ul li a { display:block;padding:2px 10px;background-color:#E0E0E0;color:#2E3C1F;text-decoration:none; }
/* place the "current" pseudo class here */
ul li a.current { background-color:#40611F;color:#FFFFFF; }
ul li a:hover { background-color:#3C72B0; color:#FFFFFF; }

You can use this PHP/HTML code example for all your navigation menus, just use different style sheets. If you need more ideas just check the CSS resource site link at the begin from this tutorial.

Published in: Website Development

Related Posts