» » » » » » Simple and clean CSS3 menu

1 , , , , 5/15/2012
Today I’ll show you how to create a simple and clean CSS3 menu in just a few steps.


The HTML

<nav>
        <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Categories</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Portfolio</a></li>
                <li><a href="">Contact</a></li>
        </ul>
</nav>
Also, do not forget to include the following snippet when using HTML5 specific tags like nav:
 <!--[if lt IE 9]>

         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

The CSS

nav{
        width: 960px;
        margin: 80px auto;
        text-align: center;
}

nav ul{
        margin: 0;
        padding: 0;
}nav li{
        margin: 0 10px; /* Add some horizontal spacing */
        display: inline-block;
        *display: inline;  /* IE7 and below */
        zoom: 1;
}
nav a{
        display: inline-block;
        position: relative;
        padding: 8px 15px;
        border: 2px solid #fff;
        text-decoration: none;
        color: #999;
        font: bold 14px 'Lucida sans', Arial, Helvetica;
        background-color: #eaeaea;
        background-image: linear-gradient(top, #eaeaea, #fff);
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
                                0 0 1px 0 rgba(0, 0, 0, .2),
                                0 2px 2px rgba(0, 0, 0, .3),
                                0 10px 10px -5px rgba(0, 0, 0, .2);
}

nav a:hover{
        background-color: #eee;
        background-image: linear-gradient(top, #eee, #fff);
}       

nav a:active{
        top: 1px; /* Simulate the push button effect */
        background: #f5f5f5;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
                                0 0 1px 0px rgba(0, 0, 0, .2),
                                0 1px 2px rgba(0, 0, 0, .3);
}
nav a::before{
        content: '';
        position: absolute;
        top: -10px;
        right: -10px;
        bottom: -10px;
        left: -10px;
        z-index: -1;
        background-color: #e3e3e3;
        background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
}

nav a:active::before{
        top: -11px; /* Hey you, don't move! */
}
How to Add this in Blogger ?
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save
 
Another proceess :
1.Add The CSS above    </b:skin>   
2. Paste THE CSS part
3.After    <body>     paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
I hope you enjoyed this article :-)

Posted by

Share to:

Post a Comment Blogger

  1. Sailaja25 January 2014 at 02:27

    Please change the color of your code. It shows white and seems hidden!

    ReplyDelete

Thank you..

Subscribe to: Post Comments (Atom)
 
Top