One of the most challenging aspects of website design is coming up with intuitive navigation. When a website has fewer than 10 pages and no sub-menus, designing navigation is a breeze! When a website has more than 10 pages and has sub-menus, figuring out an intuitive way to display all those menus can be a challenge.

The first time I was faced with this challenge was for a website I was designing for the non-profit organization, 2 Cents 4 Change. First, this website had a total of 24 pages, which originally had been organized somewhat haphazardly. So, the first challenge I had was figuring out how to organize those 24 pages. I ended up deciding on 7 pages to be shown in the main menu, with 3 sub-menus for the remaining 17 pages. There is no aesthetic way to display 24 menu buttons, especially when 17 need to display as sub-menus. But for the website to be as functional as possible, each and every page needs to be accessible from each and every other page. This requirement rules out having static sub-menus that display only when a user is viewing specific pages. So, if static sub-menus on specific pages isn’t the best option, what is?

Many website designers would answer, “Drop-down menus!” Indeed, drop-down menus are an easy way to display sub-menus without cluttering the website with cumbersome navigation. But drop-down menus aren’t always easy for users to navigate and require extra effort in that a user can’t see the sub-menu unless his or her button first hovers over the required menu button.

The solution I finally came up with is a combination of drop-down menus and static menus. I also use this method on BioMolecularProducts.com. Here is my solution: sub-menus that function first as drop-down sub-menus, and then as static sub-menus when the user is viewing a page within that category.

For example, on BioMolecularProducts.com, if a user is on the page “Lym-X-Sorb®”, the sub-menu connected with “Lym-X-Sorb®” is always displayed underneath the main menu; whereas, when a user is on the index page, the sub-menu appears below the main menu only when a user hovers on the “Lym-X-Sorb®” button. I believe this solution provides the user with the benefits of drop-down sub-menus and static sub-menus without any of their disadvantages.

I accomplish this without using any javascript, only HTML, CSS, and PHP. Here’s how I do it (note that what follows assumes a basic understanding of HTML, CSS, and PHP).

First, the CSS:

ul.menu li ul {
	position: absolute;
        width: 966px;
	z-index: 100;
	left: -9999em;
}

ul.menu li:hover ul, ul.menu li.sfhover ul {
left: auto;
	}

Note that ul.menu is not necessary; whatever you call your menu un-ordered list is fine. Many website designers prefer to have their menu ul in a div called #nav, in that case, it would be #nav ul li ul . The important part is that there is a second ul that appears after the li. The way this works is that the second level list originally displays somewhere waaaaay off-screen to the left, and then when the user hovers on the list item, the list displays on the screen.

The HTML looks something like this:

<ul class="menu">

<li><A HREF="trigger.php">Trigger</A>

<ul>
<li><A HREF="submenu1.php">Submenu 1</A></li>
<li><A HREF="submenu2.php">Submenu 2</A></li>
</ul>
</li>

</ul>

Note that the list item has an un-ordered list within the list item tags.

So, this is how to get the sub-menu to function as a drop-down menu. To have the sub-menu change from a drop-down menu to a static menu when the user is on the Trigger, Submenu 1, or Submenu 2 pages requires PHP and a CSS class.

First, the CSS class:

ul.menu li ul.sub {
	position: relative;
	z-index: 20;
	left: auto;
	float: left;
}

This allows the sub-menu to display below the main menu.

So, how do we have the change occur? Well, first, I set a variable on each page called $title. I also use this variable for the tag in the HTML section and as a page header. You can call this variable whatever you want; what’s important is to have something in this variable that’s common to all of the pages you want the sub-menu to display as static on.

Here’s what the HTML and PHP look like with the $title variable:

<ul>

<li><A HREF="trigger.php">Trigger</A>

<ul
	<?php if(stristr($title, 'trigger') == TRUE)
{ echo " class=\"sub\""; } ?> > <li><A HREF="submenu1.php">Submenu 1</A></li> <li><A HREF="submenu2.php">Submenu 2</A></li> </ul> </li> </ul>

The section in bold is what’s new. What this does is add the CSS class “sub” to any page whose title variable includes the word “trigger”.

Thus, the sub-menu will display as a static menu underneath the main menu on those pages and as a drop-down menu on any other pages.

Advertisements