css


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

Sample code:

p {
text-indent: 5px;
border: 1px solid black;
clear: none;
float: left;
margin: 2px;
padding: 5px;
}

Steps:

  1. The whole set above (what’s inside the fancy brackets) applies to one SECTION (in this example, identified by <p> in HTML) of the site.
  2. What’s inside the brackets ({ }) are ATTRIBUTES, or CHARACTERISTICS, of that section.
  3. How those attributes work: what the left-side of the colon (:) means, and what options can be used for the right-side of the colon. For example: text-indent: 5px; means that the first line of each paragraph will be indented on the left side by 5 pixels.
  4. Punctuation! Each attribute line must end with a semi-colon (;) and have a colon in the middle. Each section must be delineated by fancy brackets: { } . Also watch out for extra spaces.
  5. How to integrate the CSS you now understand with HTML, which is just a matter of using the right identifier (i.e., the <p> above) for the right section in HTML and having a stylesheet (a file saved as .css) defined in the <HEAD> section of your HTML.

Sample Code Explained:

The sample code modifies a paragraph <p> in HTML. The first line of this paragraph is indented on the left by 5 pixels (text-indent: 5px;). This paragraph has a thin black border around it (border: 1px solid black;). This paragraph can have other sections on either side of it (clear: none;). This paragraph is floated to the left (float: left), which means that whatever section to the right of it will wrap-around this paragraph. This paragraph is indented outside the border by 2 pixels in every direction (top, right, bottom, left) (margin: 2px;). This paragraph is indented inside the border by 5 pixels in every direction (padding: 5px;).

Result:

Once you’ve learned these five steps, you’ll understand how basic CSS works and why particular CSS displays the way it does.