CSS3 Apple Navigation Menu

On our previous of most we share with 3D tabs with you and now we are going to share Related to apple website tabs menu. These tabs menu are not much exactly the same but it give much better impression to black theme template. We create this tab for you to make your site even better. In this menu you have images with text label. We hope we have made these tab menu widgets according to your taste.

Add HTML Code to Blogger/HTML Blog:

• Go to your Blogger account and open the layout tabs right of your Blogger dashboard.
• Click on the edit widget and open it. Open the HTMl/JavaScript and past the below code on it.

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <div class='navbar'> <ul>       <li><a href="#"><span class='fa fa-home'></span>Home</a></li> <li><a href="#"><span class='fa fa-file'></span>Resources</a></li> <li><a href="#"><span class='fa fa-wrench'></span>Tools</a></li> <li><a href="#"><span class='fa fa-list'></span>Examples</a></li> <li><a href="#"><span class='fa fa-tag'></span>Tags</a></li> <li><a href="#"><span class='fa fa-pencil'></span>Blog</a> </li> </ul> </div>

Replace # with the link of your page.

Add CSS code to Blogger/HTML Blog:

• Go to your Blogger account and open the template tabs right of your Blogger dashboard.
• Click on the edit HTML and open it. The new window appears with your template codes.
• Now press Ctrl + F the new light box will appears and put this ]]></b:skin> code in the box and just above this code ]]></b:skin> past the below code.

.navbar {   display: table; /* NOT SUPPORTED IN IE7 */ margin: 20px auto } .navbar ul li { float: left } .navbar a {   color: #fff;   display: inline-block;   font: normal normal normal         12px/35px         'Roboto', Helvetica, Arial, sans-serif;   text-align: center;   text-decoration: none;   padding: 0 18px;   border: 1px solid #5d5d5d;   box-shadow: inset 0 0 0 1px #8a8a8a;   background: #4a4a4a;   background: linear-gradient(#8a8a8a,#707070,#626262,#787878);   text-shadow: 0 -1px 0 #333 } .navbar ul li a:hover {   background: #8a8a8a;   background: linear-gradient(#646464,#4a4a4a,#3b3b3b,#525252) } .navbar ul li a:active {   box-shadow: inset 0 10px 20px -5px rgba(0, 0, 0, 0.75); } .navbar ul li:first-child a { border-radius: 5px 0 0 5px } .navbar ul li:last-child a { border-radius: 0 5px 5px 0 } .fa { margin-right: 10px } /* RESPONSIVE DESIGN */ @media screen and (max-width: 600px) {   .navbar ul {     width: 100%;     display: block;     margin: 0;     padding; 0;     height: auto   }   .navbar ul li {     width: 50%;     float: left;         margin: 0;     padding; 0;     position: relative;   }   .navbar ul li a {     text-align: left;     width: 100%;     padding-left: 25px;     border-radius: 0!important;     border: 1px solid #5d5d5d   } }

Now you can change color and size of widgets. with your own. You can use this widget to help you out more further. 

HTML CSS and JS Code Creator.

We are done from here. Stay with us or subscribe to us to get more updates and news.

---

Tweet

About Post Author:

This post is fruit of pen-clipping of Mohammad Hamza, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.

Read more about Mohammad Hamza »