« New look | Main | More current state of navigation »

July 29, 2004

Current state of navigation

There's been a lot of discussion lately on how to "automagically" highlight the current section/page of your site within your navigation using CSS.

Two excellent resources for this have been detailed at A List Apart and hicksdesign.

I recently attempted this very same functionality for a site i've been redesigning and developed a solution that resembles the one on ALA, which is to say it uses a combination of PHP and CSS.

Originally I set out to implement a flyout menu system that uses only CSS, i.e., no Javascript, and was lucky to find such a thing through Peter Nederlof's whatever:hover method. While it works beautifully in all modern, standards-compliant browsers, in order for it to work in IE (what else is new?) it requires the inclusion of a behavior in the form of an HTML component file (.htc). When i first started the redesign, the navigation was to only have two submenus at most. With two submenus, the flyout menus worked well in both IE and all the (ahem) real browsers. However by the time the site was ready to be launched, the navigation had grown exponentially —— there are one or two sections with up two 4(!) submenus. So while the menu still works reasonably well in the compliant browsers, it becomes an experience of frustration when using IE - especially when using an older, slower PC. Apparently the HTML behavior that allows the flyouts to work bogs down the browser when multiple levels of submenus are used.

So... I expect to be researching another flyout menu function pretty soon and it will most likely be Javascript-based.

But getting back to the highlighting of the current section using PHP and CSS, here's what I built (feel free to use as your own). Comments are always welcome.

There's been a lot of discussion lately on how to "automagically" highlight the current section/page of your site within your navigation using CSS.

Two excellent resources for this have been detailed at A List Apart and hicksdesign.

I recently attempted this very same functionality for a site i've been redesigning and developed a solution that resembles the one on ALA, which is to say it uses a combination of PHP and CSS.

Originally I set out to implement a flyout menu system that uses only CSS, i.e., no Javascript, and was lucky to find such a thing through Peter Nederlof's whatever:hover method. While it works beautifully in all modern, standards-compliant browsers, in order for it to work in IE (what else is new?) it requires the inclusion of a behavior in the form of an HTML component file (.htc). When i first started the redesign, the navigation was to only have two submenus at most. With two submenus, the flyout menus worked well in both IE and all the (ahem) real browsers. However by the time the site was ready to be launched, the navigation had grown exponentially —— there are one or two sections with up two 4(!) submenus. So while the menu still works reasonably well in the compliant browsers, it becomes an experience of frustration when using IE - especially when using an older, slower PC. Apparently the HTML behavior that allows the flyouts to work bogs down the browser when multiple levels of submenus are used.

So... I expect to be researching another flyout menu function pretty soon and it will most likely be Javascript-based.

But getting back to the highlighting of the current section using PHP and CSS, here's what I built (feel free to use as your own). Comments are always welcome.

The example uses 3 menu items (Home, About, Contact). Modify as you see fit.

Here's the PHP part at the top of each page:

<?php $root_path = ""; $current_URL = $_SERVER['REQUEST_URI']; if ( ($current_URL == $root_path . "/") || ($current_URL == $root_path . "/index.php") ) { $home_class = ' class="current"'; } else { $home_class = ''; } if ( eregi("$root_path/about_us/", $current_URL)) { $about_class = ' class="current"'; } else { $about_class = ''; } if ( eregi("$root_path/contact_us/", $current_URL)) { $contact_class = ' class="current"'; } else { $contact_class = ''; } ?>

And now for the HTML part:

<a href="<?php echo "$root_path";?>/index.php"<?php echo "$home_class";?>> Home</a> <a href="<?php echo "$root_path";?>/about_us/index.php"<?php echo "$about_class";?>> About Us</a> <a href="<?php echo "$root_path";?>/contact_us/index.php"<?php echo "$contact_class";?>> Contact Us</a>

And the simplified CSS part that differentiates the links:

a { color: blue; text-decoration: underline; } a.current { color: black; text-decoration: none; }

To see a working (but heavily-modified) example of this approach, click here.

Posted by Brian Tully at July 29, 2004 11:54 AM

Trackback Pings

TrackBack URL for this entry:
http://www.tullyvision.com/mt/mt-tb.cgi/3

Comments

very cool. thanks for the tip.

just curious, what is the $root_path used for?

Posted by: Ephraim at August 2, 2004 08:05 PM

Ahh yes, $root_path...

I added that in case the navigation or the site was within a subdirectory and might need updating. Rather than update all the list items you can just change the $root_path value and Voilá!.

Posted by: Brian Tully at August 4, 2004 09:36 PM

Post a comment

Thanks for signing in, . Now you can comment. (sign out)

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


Remember me?