Multi-Level and Multi-Column Drop Down CSS Menu - April 9th, 2008

I have recently had a web design brief for a website design which required a large number of menu items but at the same time the client wanted to keep the menu as small as possible.

After searched all over the internet for a ready made CSS multi-level and multi-column drop down CSS menu solution but unfortunately I couldn’t find any that fully satisfied my needs.

Having used the ever so popular Suckerfish multi level drop down menus so many times I have decided to customise it so it would also become multi column.

The full code you need to create a similar menu is below. Feel free to use it, and abuse it! :-)

Download the HTML here!

The CSS

[Copy to clipboard][-]
View CodeCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#nav,#nav ul{list-style:none;line-height:1;margin:0;padding:0;}#nav a{width:10em;display:block;color:#000;font-weight:700;text-decoration:none;background-color:#FFF;border:1px solid #000;}
 
#nav a:hover{color:#FFF;background-color:#000;}
 
#nav li{float:left;width:10em;}
 
#nav li ul{position:absolute;background:orange;width:10em;left:-999em;}
 
#nav li ul ul{margin:-1em 0 0 10em;}
 
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em;}
 
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto;}
 
#nav li table{border-collapse:collapse;}
 
#nav li table a{background:none;border:none;}
 
#nav li table col.evencol{background:#CCC;border-right:dotted thin #000;}
 
#nav li table col.oddcol{background:#AEAEAE;border-right:dotted thin #000;}
 
#nav li table col.lastcol{background:#CCC;}

The Javascript

[Copy to clipboard][-]
View CodeJAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 
for (var i=0; i<sfEls.length; i  ) {
 
sfEls[i].onmouseover=function() {
 
this.className =" sfhover";
 
}
 
sfEls[i].onmouseout=function() {
 
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
 
}
 
}
 
}
 
if (window.attachEvent) window.attachEvent("onload", sfHover);

Tino
Web Designer

Posted in Web Design | No Comments »

Correct Flash Implementation - April 7th, 2008

There are a number of ways that a flash video can be embedded into your website, the majority of which make use of the <embed> tag. Unfortunately, in today’s climate of accessible and W3C-valid code, this is invalid.

Where there are a number of invalid ways to embed flash, there are also a number of valid ways to output the code (a quick search in Google will vouch for this). The most common method we use is the ‘flash satay’ method:

<object class=”right” type=”application/x-shockwave-flash” data=”flash/movie.swf” width=”260″ height=”155″>
<param name=”movie” value=”flash/movie.swf” />
<img src=”noflash.gif” width=”260″ height=”155″ alt=”" />
</object>

As you can see, this method loads up and sizes the flash video as necessary, all without the use of the embed tag. You may also notice the image tag in there that loads up ‘noflash.gif’ - this is where the accessibility we mentioned comes in. As we know not all people have flash player installed on their computer for whatever reason. This means if you don’t have any backup content these users will just see a blank space, or worse still, it could mess up the layout of the entire page for them. That’s why it’s important to create an image that can easily fill in for the flash movie, as in our example above.

Rik
Web Designer / Developer

Posted in Web Design | No Comments »

« Previous Next »