HTML/CSS Tutorials

CSS3 Navigation with Transitions

Tags: HTML/CSS

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!