Grow your CSS skills. Land your dream job.

CSS3 multilevel menu with transitions

  • # July 30, 2010 at 2:22 pm

    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)

    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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".