Another HTML5, CSS3 Navigation Menu For Blogger

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3. HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example. IE unfortunately doesn’t support this new element yet, but there is a simple fix we can use, of which I’m sure you’re all aware.

Live Preview

How To Add It To Blogger Blog

1. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.

2. Copy the HTML link and paste it inside the content box.

<style>
#org_menu { 
    position: relative; 
    margin: 0 auto; 
    clear: both; 
    width: 960px; 
    }
#org_menu:before { 
    content: ""; 
    position: absolute; 
    left: -10px; 
    bottom: -9px; 
    z-index: 1; 
    border: 10px solid transparent; 
    border-right-color: #c50; 
}
#org_menu ul { 
    display: block; 
    position: relative; 
    z-index: 2; 
    padding: .2em 30px; 
    margin-right: -2em; 
    list-style: none; 
    background: #f72; 
    font-family: 'Arial', serif; 
    font-weight:bold; 
    font-size: 16px; 
    line-height: 1; 
    color: white; 
    text-transform: capitalize; 
    border-radius: 0 9999px 9999px 0; 
    box-shadow: 0 2px 8px -3px rgba(0,0,0,.5), 
                0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;; 
}
#org_menu ul:after { 
    content: ""; 
    clear: both; 
    display: block; 
    visibility: hidden; 
}
    #org_menu li { 
        float: left; 
        position: relative; 
    } 
    
        #org_menu a { 
            display: block; 
            padding: .8em 1.4em; 
            text-decoration: none; 
            text-shadow: 1px 1px 1px rgba(0,0,0,.3); 
            color: white; 
            transition:.3s box-shadow, .3s padding; 
            border-radius: 9999px; 
        } 
        
        #org_menu a:hover, 
        #org_menu a:active { 
            background: rgba(0,0,0,.1); 
            color: #F90; 
            box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset; 
        } 
        
        #org_menu a:active { 
            background:white; 
            color: #eee; 
            padding: .5em .6em .3em 1em; 
            text-shadow: 1px 1px 0 rgba(0,0,0,.4); 
            box-shadow: 10px 6px 1px #c50 inset; 
        }
    #org_menu:hover { 
        transform: rotate(720deg); 
    } 
</style>

<nav id="org_menu"> 
<ul> 
<li ><a href="#" title="Home">Home</a></li> 
<li><a href="#">Projects</a></li> 
<li><a href="#">Speaking</a></li> 
<li><a href="#">Writing</a></li> 
<li><a href="#">Interviews</a></li> 
<li><a href="#">Press</a></li> 
<li><a href="#">About me</a></li> 
</ul> 
</nav>


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..!!

blah blah blah blah blah blah blah