July 29, 2004

More current state of navigation

A completely dynamic version that uses an associative array to store link text and URL. Very good for large sites that have a lot of navlinks.

The real time saver is calling the array and link output as includes, i.e., your navigation is contained in one or two include files and can be updated on a global basis (much like stylesheets).

A completely dynamic version that uses an associative array to store link text and URL. Very good for large sites that have a lot of navlinks.

The real time saver is calling the array and link output as includes, i.e., your navigation is contained in one or two include files and can be updated on a global basis (much like stylesheets).

<?php // get current URL $current_URL = $_SERVER['REQUEST_URI']; // THE FOLLOWING CAN BE PUT IN AN INCLUDE // include('navitems.php'); // array of nav links // syntax: linktext => URL $navitems = array( "home" => "/index.php", "about" => "/about_us/", "products" => "/products/", "support" => "/support/", "contact" => "/contact_us/", "admin" => "/admin/", ); // THE FOLLOWING CAN BE PUT IN AN INCLUDE // include('navoutput.php'); while ( list($id, $directory) = each($navitems) ) { $class = $id . "_class"; if ( eregi($directory, $current_URL)) { $$class = ' class="current"'; } else { $$class = ''; } // style your navigation as you see fit // this is a basic example print ' <a href="'.$directory.'" title="'.$id.'"'.$$class.'>'.$id.'</a><br /> '; } ?>

Posted by Brian Tully at 05:02 PM | Comments (0) | TrackBack

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 11:54 AM | Comments (2) | TrackBack