CSS3 Navigation with Transitions

August 19, 2011

Hi guys, this is a works by transitioning the :before and :after pseudo-elements on :hover.

Unfortunately only Firefox supports the transitions of the pseudo elements.

HTML

We keep the markup nice and simple by only using the elements that we need. Start by creating your navigation with an unordered list. Be sure to assign a “effects” class name to all of the list items.

<ul>
    <li class="effects"><a href="#">HOME</a></li>
    <li class="effects"><a href="#">ABOUT</a></li>
    <li class="effects"><a href="#">PORTFOLIO</a></li>
    <li class="effects"><a href="#">BLOG</a></li>
    <li class="effects"><a href="#">CONTACT</a></li>
</ul>

Style CSS

Okay, now we start to style the menu items by applying simple rules.

ul { 
   list-style:none;
   padding-top:50px;
}

li {
    position:relative;
    float: left;
    width:150px;
    text-align:center;
    padding-top:35px;
    padding-bottom:35px;
    color:#fff;
    margin-right:20px;
    border-radius:5px;
    background:#161616;
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    cursor:pointer;
}

Setting the “effects” class

Now just simply create the class “effects” and assign the pseudo-elements :after and :before, remember this experiment works only Firefox.

For more information about pseudo-elements go here CSS Pseudo-elements.

.effects:after, .effects:before {
    -moz-transition:width 0.5s ease 0s;
    height: 0px;
    width: 0px;
    position: absolute;
    content: ' ';
    display: block;
    opacity:0;
    box-shadow: 0px 0px 5px #00c6ff;
}

.effects:after {
    background: -moz-linear-gradient(left, #0ad, #08b);
    top: 84px;
    left: 75px;
}

.effects:before {
    background: -moz-linear-gradient(right, #0ad, #08b);
    top: 84px;
    right:75px;
}

.effects:hover:after, .effects:hover:before{
    width: 72px;
    height: 1px;
    opacity:1;
} 

Conclusion

If anyone has any questions, concerns, or comments please feel free to let me know!

7 Comments

  1. Bunny

    In awe of that aswner! Really cool!

  2. Really good work. love the style as well.

  3. Very nice menu bar thank you

  4. Grifas

    can you add for each lesson a download button? it will be great :)

  5. Jackeee

    Nice work!
    Agree with Grifas – the download button will be very good.

  6. kuroshironin

    very nice, thank you! but, not working in chrome…
    please tell me how…

Leave a Reply