Grow your CSS skills. Land your dream job.

Last updated on:

Expanding Boxes Navigation

From the v8 design of CSS-Tricks.

View Demo

nav {
    background: #444;
    border-bottom: 8px solid #E6E2DF;
    overflow: hidden;
    position: relative;
    width: 100%;
}
nav:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: white; 
}
nav ul {
    background: -moz-linear-gradient(left,
                #444 0%,
                #444 50%,
                #41d05f 100%);
    background: -webkit-gradient(linear, left top, right top,
                color-stop(0%,#444),
                color-stop(50%,#444),
                color-stop(50%,#41d05f),
                color-stop(100%,#41d05f));
    list-style: none;
    overflow: hidden;
    padding: 0 0 0 20px;
    width: 810px;
}
nav li {
    display: inline;
}
nav a {
    color: white;
    display: block;
    float: left;
    font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
    font-size: 22px;
    padding: 12px 0;
    text-decoration: none;
    text-align: center;
    width: 19%;
    -webkit-transition: width 0.12s ease;
       -moz-transition: width 0.12s ease;
         -o-transition: width 0.12s ease;
            transition: width 0.12s ease;
}
nav a:hover {
    color: white;
}
nav a:hover span {
    border-bottom: 2px solid white;
}
nav .a-home {
    background: #ff8400;
    z-index: 100;
    position: relative;
}    
nav .a-forums {
    background: #e42b2b;
}    
nav .a-videos {
    background: #a800ff;
}    
nav .a-downloads {
    background: #49a7f3;
}   
nav .a-snippets {
    background: #41d05f;
}
.home nav {
    border-bottom-color: #ff8400;
}
.forums nav {
    border-bottom-color: #e42b2b;
}
.videos nav {
    border-bottom-color: #a800ff;
}
.downloads nav {
    border-bottom-color: #49a7f3;
}
.snippets nav {
    border-bottom-color: #41d05f;
}
nav li:hover a {
    width: 24%;
}
nav ul:hover .active {
    width: 19%;
}
nav ul:hover .active:hover {
    width: 24%;
}
nav li a.active {
    width: 24%;
}

Comments

  1. Permalink to comment#

    I’ve gotta say this is amazing what you’ve done, sir!

  2. Brandon

    If I wanted to make it transition vertically how would I do that?

  3. Mahroof Ali

    It will be nice if you include the demo with these snippets, in the page

    • Brandon
      Permalink to comment#

      I agree with you Mahroof. — I’m new to CSS and love this site.. just hate that he doesn’t include a ‘demo’ oh well something is better than nothing!

    • Kyle

      I agree with Mahroof Ali: the html would be nice to have.

  4. Alex
    Permalink to comment#

    Open the Page Source when on the DEMO, it will show you the HTML

Leave a Comment

Current day month ye@r *

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