Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Mon

9

OCT

2006

Part 2: User-friendly Contextual Navigation with Simple PHP Includes

Building on the previous post, User-friendly Contextual Navigation with Simple PHP Includes, I thought I’d take things one small and simple step further by using PHP once again, this time to add a CSS class for the current page. Then it’s easy to use this CSS class to create a helpful visual cue within your navigation.

First, here’s where we left off with the navigation behind the scenes:

<ul>

<li> <?php
   if ($thisPage=='home')
      {echo 'Home';}
   else
      {echo '<a href="/">Home</a>';}?> </li>

<li> <?php
   if ($thisPage=='about')
      {echo 'About Us';}
   else
      {echo '<a href="/about/">About Us</a>';}?> </li>

<li> <?php
   if ($thisPage=='contact')
      {echo 'Contact Us';}
   else
      {echo '<a href="/contact/">Contact Us</a>';}?> </li>

</ul>

If that doesn’t make sense, please be sure to check out the previous post that explained all this: User-friendly Contextual Navigation with Simple PHP Includes.

You can use CSS to style your navigation’s current page as a visual cue, such as the Home page,

Navigation: Home

and you can use PHP to automatically add a CSS class to the list item element for the current page, resulting in this markup:

<li class="here">Home</li>

You can then add rules to your style sheet to create the visual cue that you wish (more on that below).

To add this to the previous tutorial’s PHP code, all it takes is two minor, simple modifications. You’ll move your opening list item element to be inside your PHP code this time. We’ll also add the CSS class to it if it’s the current page:

<?php
   if ($thisPage=='home')
      {echo '<li class="here">Home';}
   else
      {echo '<li><a href="/">Home</a>';}?> </li>

If you continue that for the rest of the navigation, the result will be something like this:

<div id="nav">

<ul>

<?php
   if ($thisPage=='home')
      {echo '<li class="here">Home';}
   else
      {echo '<li><a href="/">Home</a>';}?> </li>

<?php
   if ($thisPage=='about')
      {echo '<li class="here">About Us';}
   else
      {echo '<li><a href="/about/">About Us</a>';}?> </li>

<?php
   if ($thisPage=='contact')
      {echo '<li class="here">Contact Us';}
   else
      {echo '<li><a href="/contact/">Contact Us</a>';}?> </li>

</ul>

</div>

That adds the CSS classes where needed to create visual cues for each current page, perhaps something like this:

Home:
Navigation: Home

About Us:
Navigation: About

Contact Us:
Navigation: Contact

Then Some CSS Rules:

While you’re brainstorming all those wonderful ideas for your own navigation’s visual cues, make sure your final result makes sense to your visitors. Visual cues, including visual cues for navigation, shouldn’t be required to navigate or otherwise use a site. Instead visual cues should enhance a site and help visitors in some way. The examples above, based on this site’s own navigation design, use CSS to create a graphic button look (but it’s really just CSS!) for the visual cue. The intention is to make the current page in the navigation visually stand out from all the others to let users know where they are at the site. Turn off the CSS and the navigation should still work fine.

If you haven’t already surrounded your navigation with its own <div> and ID, now is a good time to do that. Why? This makes it easy to designate clean, simple rules specific to your navigation and without inadvertently impacting your other style rules, in addition to minimizing your markup and style rules. For this example, I’m giving the li.here rule black text, a light blue background color, a white border on 3 sides, and some padding:

/* remove margins, padding */
#nav ul {
margin:0;
padding:0;
}

/* display inline (across the page) */
/* and make the text bold */
#nav ul, #nav ul li, #nav ul li.here {
display:inline;
font-weight:bold;
}

/* margins, padding for list items */
#nav ul li, #nav ul li.here {
margin:0;
padding:1.2em 0.8em; /* CSS shorthand for 1.2em top and bottom, 0.8em right and left */
}

/* rules for the current page */
#nav ul li.here {
color:#000;
background-color:#e1e7f0;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
}

As I mentioned in the previous post and tutorial, you can manage your entire site’s navigation with one “include” file, and I know firsthand how much easier it is to maintain a site when you place common elements within include files.

The above PHP code and CSS rules are really just ideas to help get you started. Your navigation’s visual cue might be a simple but effective one by making the current page bold and the other navigation normal text (not bold). Or, you might use little square disc icons for other pages and a small arrow icon for the current page. Visual cues don’t need to be overly complex. They just need to add a visual help for your visitors.

Look around at websites that you especially like and that are easy to navigate and explore the visual cues for navigation. Note why you think they work, the colors used, type of visual cue, and any other details. In addition, you’ll undoubtedly stumble upon other sites that have lousy or confusing navigation or visual cues. This time, though, try to figure out exactly why it doesn’t work so you’ll avoid that yourself. This exploration can go a long way to help inspire you for your next project’s navigation.

Added Tuesday morning, 10 October 2006: Vitaly Friedman has collected samples of quite a few well done CSS navigation menus, along with techniques of how they’re created via CSS Navigation Techniques, so here’s a great resource for inspiration: CSS Showcase: A Gallery of CSS Menus / CSS Navigation Tabs. You can submit yours there if you wish, and you’ll also find screen shots of many others with links to the corresponding sites.

Comments

Comments, Trackbacks: 1 so far. Add yours!

  1. Usability experts continue to tell us not to have a live hyperlink pointing to the current page, as it can be confusing for visitors. With some basic, simple-to-use PHP and one PHP include file, you can customize your navigation so that the current pag...

    10 Oct, 2006Trackback from Brainstorms and Raves

    trackback #1 permalink ·

This discussion has been closed. Thanks to all who participated.

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - The Zen of CSS Design, by Dave Shea, Molly E. Holzschlag. Published by Peachpit Press, December 2004.

Cover: Information Architecture, 2nd Edition - by Louis Rosenfeld, Peter Morville. OReilly Media, Inc.; 2nd edition (August 15, 2002).

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2006/10/09/navigation2/
Page last modified 14 July, 2007 - 10:19pm PDT Page load time: 0.009568 seconds.