CSS3 multilevel menu with transitions

[limenet]

Hi,

At the moment I’m working on a design, which should use as most css3 as possible (and if not, jQuery). While building the navigation, I decided to make it support three levels (multilevel solution by webdesignerwall) and use the nettuts lava lamp. (Till here it works). And then I wanted to use css3 transitions (-moz and -webkit), just like division bye zero does it. But their solution doesn’t work with the lava lamp and needs a fixed height. If anyone has an idea, how I can add the css3 transitions to the following listing (and not losing the other features), I’d be very glad!
In fact, my problem is the use of height:0 and overflow:hidden on #nav ul, because this kills th multilevel menu and requires a fixed height afterwards.
Ok, after this much text, here’s the html (extract)

Code:

• Home
• Portfolio
  • Webdesign
  • Webdevelopment
  • Photography
  • Other
    • Print
    • Logo
    • Copywriting
• Contact
  • Hire Me!
• About

It’s just a normal multi-level list.
The css going with this

Code:

#navigation {
float: right;
padding: 10px;
margin: 0 0 0 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#nav {
float: left;
position: relative;
display: inline-block;
z-index: 1;
}

#nav:after {
clear: both;
content: “.”;
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}

#nav ul {
display: none;
padding: 10px;
position: absolute;
top: 30px;
margin: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 5px white;
z-index: 0;
}

#nav li:hover > ul {
display: block;
}

#nav ul li {
float: none;
margin: 0;
padding: 0;
position: relative;
}

#nav ul ul {
right: 170px;
top: -3px;
}

#nav ul li:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#navigation li {
float: left;
margin: 0 2px;
}

#blob-1 {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#navigation li:active {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#navigation a {
text-decoration: none;
color: #fff;
display: block;
padding: 5px 20px;
z-index: 2;
position: relative;
text-shadow: 1px 1px 1px black;
}

#navigation li#active {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#blob-1 {
position: absolute;
top: 0;
z-index: 1;
}

and

Code:

#navigation {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(255,51,214)),
color-stop(0.5, rgb(255,0,204)),
color-stop(1, rgb(221,0,177))
);
background: -moz-linear-gradient(
center top,
rgb(255,51,214) 0%,
rgb(255,0,204) 50%,
rgb(221,0,177) 100%
);
}
#navigation li#active {
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(221,0,177)),
color-stop(0.5, rgb(204,0,163)),
color-stop(1, rgb(187,0,150))
) !important;
background:-moz-linear-gradient(
center top,
rgb(221,0,177) 0%,
rgb(204,0,163) 50%,
rgb(187,0,150) 100%
) !important;

}
#blob-1{
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #88006d),
color-stop(0.5, #77005f),
color-stop(1, #660052)
);
background:-moz-linear-gradient(
center top,
#88006d 0%,
#77005f 50%,
#660052 100%
);
}
#nav ul li:hover{
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #88006d),
color-stop(0.5, #77005f),
color-stop(1, #660052)
);
background:-moz-linear-gradient(
center top,
#88006d 0%,
#77005f 50%,
#660052 100%
);
}
#nav ul{
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #ff33d6),
color-stop(0.5, #ff22d3),
color-stop(1, #ff11cf)
);
background:-moz-linear-gradient(
center top,
#ff33d6 0%,
#ff22d3 50%,
#ff11cf 100%
);
}
#nav ul ul{
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #ff66e0),
color-stop(0.5, #f5d),
color-stop(1, #ff44da)
);
background:-moz-linear-gradient(
center top,
#ff66e0 0%,
#f5d 50%,
#ff44da 100%
);
}

The #blob-1 is for the lava lamp menu.

Further questions (if anything isn’t clear) or great responses – just post ’em! :),
Linus

[Author]

Posts