Properly created html standard menus using simple unordered lists can give your site (or your customers) some real power and great search engine crawling stats. Throw our the old Javascript driven nonsense and embrace the new world!

One PHP Class + Standard List Items + CSS = GREAT MENUS Part Two

Well either you have been through the PHP in part one of this or you have skipped straight here so lets see our basic menu in it’s "raw form"

<div id='menu'>
<ul id='navigation'>
	<li><a class='main' href='#'>about us</a>
		<ul class='inner'>
			<li style='width: 12em;'><a href='about-our-company' title='about our company'>about our company</a></li>
			<li style='width: 12em;'><a href='our-mission-in-life' title='our mission in life'>our mission</a></li>
			<li style='width: 12em;'><a href='some-great-press-releases' title='some great press releases'>press releases</a></li>
			<li style='width: 12em;'><a href='testimonials-about-us' title='testimonials about us'>testimonials</a></li>
			<li style='width: 12em;'><a href='another-newletter-signup' title='another newletter signup'>newsletter</a></li>
			<li style='width: 12em;'><a href='staff-profiles' title='staff profiles'>our staff</a></li>
		</ul>
	</li>
	<li><a class='main' href='#'>for developers</a>
		<ul class='inner'>
			<li style='width: 12em;'><a href='another-geek-link' title='another geek link'>another geek link</a></li>
			<li style='width: 12em;'><a href='advance-designs' title='advance designs'>advance designs</a></li>
			<li style='width: 12em;'><a href='its-free-silly' title='its free silly'>script-pricing</a></li>
			<li style='width: 12em;'><a href='addition-services' title='addition services'>addition services</a></li>
			<li style='width: 12em;'><a href='more-useless-faq' title='more useless faq'>FAQ</a></li>
		</ul>
	</li>
	<li><a class='main' href='#'>for site owners</a>
		<ul class='inner'>
			<li style='width: 14em;'><a href='no-more-crappy-javascript-menus' title='no more crappy javascript menus'>tell your developer</a></li>
			<li style='width: 14em;'><a href='pda-cellphone-and-more-oh-my' title='pda cellphone and more oh my'>other device support</a></li>
			<li style='width: 14em;'><a href='sam-faqs-as-before' title='sam faqs as before'>FAQ</a></li>
		</ul>
	</li>
	<li><a class='main' href='about-our-services' title='about our services'>our services</a></li>
	<li><a class='main' href='contact-us' title='contact us'>contact us</a></li>
	<li><a class='main' href='/' title='return to the main page'>home</a></li>
</ul>
</div>
		

Nothing but plain old lists right? Yuppers and that is exact the point. The search engines can read them and find all of the links to your other pages with no problem, your code will be 100% valid in ANY browser and best of all you can style them any way you want! Now when I say style them I dont just mean make pretty colors and backgrounds I mean create ANY type menu you want, all from the exact same code. Let me drill that into you again just in case it didn’t sink in. You CAN create any style (horizontal, vertical), with any colors, fonts or background images without EVER having to touch the html code again! And Just to make matters better you can style your menus so people can navigate your site on ANY device (IE: PDA, cellphone), now that my friends is power!

OK, so at this point you are probably bored to do death listening me talk about this and probably want to see some examples, well so be it. Here is a page (opens in a new window) chocked full of examples. Go play and when you are done come back and read! (I'll wait)

Back huh? Did we have fun? Good!

So now to the point of this whole "rant" is the fact that using simple standard html instead of "slice n dice" graphics and javascript allows you as a developer, or as a website owner a thousand times more power in your layout, and as you have seen in the example re-styling your menus is as simple as creating another style sheet. Why in heaven’s name would you want to redo hundreds of lines of html every time you want to change your menus?

Here are the stylesheets for each menu you saw in the example:

left menu with right side fly out menus

top menu with drop downs

right menu with left side fly out menus

bottom menu with "drop ups"

There are a couple of "gotchas" you also have to know about when styling these type menus (the drop downs that is). The background colors in the sub menus inherit the background color and text color of the top level list (think about it and it make sense since the sub menu list is inside the top level list item). If you just try to set the sub menu’s background or text color you might get a nasty shock, it doesn’t work! To overcome this nasty little glitch use the !important flag after the style. That seems to do the trick. Also as the example pointed out don’t get too upset when Internet Explorer ignores your hovers on a list item (IE: li:hover) ... sorry, another downfall of IE. If you read the whole tutorial about the suckerfish menus you will also notice that system suffers from the same issue but a little snippet of Javascript can set your menus straight.

With some real styling you can have absolutely amazing looking menus! Make sure to check out some of the "son of suckerfish" examples to see just how far you can go. So now that you have seen how easy and functional these menus are will you PLEASE stop using those old clunkers?