- This topic is empty.
-
AuthorPosts
-
July 30, 2010 at 2:22 pm #29800limenetParticipant
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:It’s just a normal multi-level list.
The css going with thisCode:#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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.