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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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