Tuesday 10 December 2013

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.



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 »

1 comment:

  1. This is reаlly interestіng, You're a very skilled Ьlogger.

    I have joineԁ your feed and lok forward to seeking more of your magnіficent post.

    Also, I've ѕhared your web site in my social networks!


    Here iіs my weblog getting Personal Loan

    ReplyDelete

Share your Feedback and suggestion with us. Any question or need some please contact us and get instant help. Do not post Spam or Back links comments. If spam or post backlinks comments on this blog, your comment will be deleted.

Tech News

Social