Menu Close Menu

CSS3 And HTML5 Static Tab Navigation For Blogger Blog

Today in this article we are showing you a pure CSS3 menu, no images or JavaScript used. Here are used  two CSS files.
RESET.CSS – Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
STYLE.CSS – This file contains all of the specific styling's for the menu.

How to add it to blogger blog

1. Go to your Blogger Dashboard>> Template and paste the following html5 reset style sheet link before closing your <head> tag.
<link href="" type="text/css" rel="stylesheet">

2. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.
3. Copy the HTML link and paste it inside the content box.

#nav_menu {
    width: 100%;
    margin: 10px;   
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-right: auto;
    margin-left: auto;
    text-transform: capitalize;
#nav_menu ul {   
    float: auto;
    overflow: hidden;
    margin:0 auto;
    text-align: center;
#nav_menu:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;

#nav_menu a {
    padding: 10px 30px;
    color: #fff;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 1px #333;
#nav_menu a:hover {
    color: #FFF;
    text-shadow: 0 2px #000;
#nav_menu li {
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    border-color: #005fa1 #005fa1 #005fa1 #005fa1;
    background: #0096ff; /* Old browsers */
    background: -moz-linear-gradient(top, #0096ff 0%, #006bb6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0096ff), color-stop(100%,#006bb6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* IE10+ */
    background: linear-gradient(top, #0096ff 0%,#006bb6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096ff', endColorstr='#006bb6',GradientType=0 ); /* IE6-9 */   
#nav_menu li:hover {
    background: #404040; /* Old browsers */
    background: -moz-linear-gradient(top, #404040 0%, #252525 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##404040), color-stop(100%,#252525)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, ##404040 0%,#252525 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #404040 0%,#252525 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #404040 0%,#252525 100%); /* IE10+ */
    background: linear-gradient(top, #404040 0%,#252525 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
border-color: #252525;
#nav_menu li:first-child {
    border-color: none;
    border-radius: 100px 0 0 100px;
#nav_menu li:last-child {
    border-color: none;
    border-radius: 0 100px 100px 0;
#nav_menu li:first-child a:hover {
border-color: #252525;
    <!-- begin navigation -->
    <nav id="nav_menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
               <li><a href="#">Products</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Faqs</a></li>
            <li><a href="#">Contact</a></li>
  <!-- end navigation -->

I have ran tests on both Mac and Windows versions of the latest Chrome, Safari, Firefox. Worked everywhere as it should.
To rename the category, simply replace Home with your own text. As for the link, just replace  # with the Page intended URL. Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment :) Enjoy..!!

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    1. This comment has been removed by the author.

  2. This comment has been removed by a blog administrator.


Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.