Another HTML5, CSS3 Navigation Menu For Blogger

A
html5-css3-navigation-menu

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.

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

About the author

domdom rung

Add comment

By domdom rung

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

Recent Posts

Recent Comments

Archives