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 ·'; else echo '·'; ?>

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

top

http://brainstormsandraves.com
*/ ?>