Playing with lists

In this article we will be playing with list elements to create amazing menus.

Most html menus are created using list because LI tag is the most appropiate tag for this, giving the developer posibility to play in many ways, achivieng nice effects. I won’t touch the vertical lists because it’s their default display. Instead, i will cover some of horizontal lists.

Basic list

The basic setup for a horizontal list is to set float to list elements:


#list1 li {
	float:left;
	list-style:none;
	margin-right:10px;
}

At this point we have a one level horizontal menu, created with list and you can see this on many (and i mean MANY) sites. Ofcourse, you can add some extra styles such as border, background (color or image) for links inside LI elements for getting even a nicer look. Demo here.

One level drop down menu (suckerfish)

The next menu i show, is a little bit more complicated, but also is more useful when you have category and sub-category. For example, imagine this blog with main category Javascript and sub-category jQuery. If i had many sub-categories, i would probably used a dropdown menu for using less space. This kind of menu is named Suckerfish (A list apart).

For this, we will use nested list and we will show only parents:


Ofcourse, we still need to float first level in the same way as we did in first example:

#list2 li {
	float:left;
	list-style:none;
	margin-right:10px;
}

I said before we will hide all nested list elements, so here we go:

#list2 li ul{
	display:none
}

Right now, we have a basic horizontal list. Next step is to show second level of list on hover. Because IE6 don’t know what is hover on all elements (only on A tag), for this browser we will use some javascript (but later).

#list2 li:hover ul{
	display:block
}

Because we need to have a nice display for submenus, we have to relatively positioning main LI tags, so on the #list2 li rules add

	position:relative

Also, the inner UL tags we need to change to:

#list2 li ul{
	display:none;
	position: absolute;
	left:0;
	top:1em;
	width:150px;
}

In this point we have a very basic suckerfish menu that works on all browser except, ofcourse, IE6 :D As i said before, we will make a little javascript snippet for adding or remove over class for LI elements. If you are using jQuery (like i do), the whole thing is easier than you think:

	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
	if(IE6){$(#list2 li).hover(function(){$(this).addClass('over')}, function(){$(this).removeClass('over')})}

If you don’t want to use a javascript library (either you have a small page or you like to develop your own code), you can use next code (and add just before body tag closes):

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
if(IE6){
	startList = function() {
		navRoot = document.getElementById('list2');
		for (i=0; i

Well… Yes, that’s all. We only need to add an extra rule on CSS and #list2 li:hover ul become:

	#list2 li:hover ul,
	#list2 li.over ul

At this point we have a fully functional suckerfish menu (but still with an ugly look), working on all modern browsers (even IE6). You can see the demo here.

Breadcrumb

This one is one of my favorite toys :D With this type of menu we get a “vista explorer look” breadcrumb, ready to use on your site. We will use same markup as suckerfish and also a library (i like jQuery, so i will use it)

$(document).ready(function(){
	$('ul#list2 ul').toggle().hide();
	$('ul#list2 ul').parent('li').append('-');
	$('a.dropDown').click(function(){
		var t=this;
		$('ul#list2 ul').not($(t).parent('li').find('ul')).hide();
		$(t).parent('li').find('ul').toggle();
		$(document).unbind('click').click(function(e){
			if($(e.target).parents('ul#list2').length>1){
				$('ul#list2 ul').hide();
			}
		})

		return false;
	})
});

You can seehere the demo.

Ofcourse, you may want to change the content for drop down links (you may want to put an arrow, your choice) for even a nicer and authentic effect.

Conclusion

List is so simple yet so powerful tools available for creating nice menus (the final results is up to your imagination). The final result is cross browser (yes, even IE6!), the code make sense (is semanticaly, right?) and if you don’t have javascript enabled, you can still use drop down menus (for this time not in IE6 :( ). With a little imagination, you are able to create even nicer menus. For example, i made some time ago a scrollable menu, like iPhone menus (yes, with nested lists!). I didn’t spend too much time with it (so it won’t work too well) and i conssidered useless to post here.

What kind of menus do you use?

5 thoughts on “Playing with lists

  1. One of my demo sites (http://www.hotelsandtravel.org) for WordPress themes testing uses Son of Suckerfish’s multi-level dropdown menu. Initially, I wrote a small PHP function in my theme to create one of Stu Nicholl’s pure css dropdown menus and populate with WordPress pages. But considering I’m using JQuery for most of my themes, I decided to go with Son of Suckerfish with a bit of Javascript thrown in to make my life easier.

  2. I’m not a “real” web developer so I don’t speak the lingo but I fake it a lot and get by.

    I am desperately trying to make a drop-down menu with a template I bought at allwebco and I came across this page while googling for guideance. Can it be done? Any help is GREATLY appreciated!

    Here is the existing code that came in its menu.js file:

    
    
    
    document.write('');
    document.write('');
    document.write(' ');
    
    // START LINKS //
    
    
    document.write('');
    document.write('Home');
    
    
    document.write('');
    document.write('Company');
    
    
    document.write('');
    document.write('Services');
    
    
    document.write('');
    document.write('News');
    
    
    document.write('');
    document.write('Clients');
    
    
    document.write('');
    document.write('Links');
    
    
    document.write('');
    document.write('Careers');
    
    
    document.write('');
    document.write('Gallery');
    
    
    document.write('');
    document.write('Contact');
    
    
    document.write('');
    
    document.write('');
    document.write('');
    document.write('');
    document.write('');
    
    
  3. Hi anne. I recommend you to use one of javascript-free menu (like suckerfish). It’s easy to mantain and even easier to understand than that full-of-js-crap that you use ;)
    You should post a link to your site to see your menu at work ;)

  4. Anne, i strongly recommend to pay somebody to do that. The code is a mess, using tables for design, and so on.
    Anyhow, you can take a look here and maybe you will find something that you will like

Leave a Reply