Using CSS gradient to make this navigation menu bar widget for blogger or for websites without using any JavaScript. That makes it fast loading and very attractive because of shutter effect when you hover your mouse on the menu it changes color and looks like shutter going down and up. We have already shared many navigation menu bar widget for blogger so it is another one in that series.

First we shared many professional and fashion websites and blog related navigation menu bar widget for blogger and this time we are sharing a complete professional menu bar for blogger or  WordPress websites. It is completely compatible with all browsers. You will surely like it.

Installation is pretty easy . I have made these code very simple. Copy the code and paste it anywhere you want it to appear.

<style type="text/css">
body {
background-color:#111;
margin:0px 0px;
padding:50px;
}

#shutter-menu {
font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
color:white;
text-transform:uppercase;
}

#shutter-menu ul {
height:50px;
margin:0px 0px;
padding:0px 0px;
overflow:hidden;
}

#shutter-menu li {
float:left;
display:inline;
list-style:none;
margin:0px 0px;
padding:0px 0px;
}

#shutter-menu a,
#shutter-menu a:before {
display:block;
margin:0px 0px;
padding:0px 30px;
line-height:50px;
color:white;
text-decoration:none;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
position:relative;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

#shutter-menu a:before {
content:attr(data-clone);
position:absolute;
top:100%;
left:0px;
display:block;
background-color:white;
background-image:-webkit-linear-gradient(top, #ddd, white);
background-image:-moz-linear-gradient(top, #ddd, white);
background-image:-ms-linear-gradient(top, #ddd, white);
background-image:-o-linear-gradient(top, #ddd, white);
background-image:linear-gradient(top, #ddd, white);
border-top:2px solid rgba(0,0,0,0.2);
color:#333;
}

#shutter-menu a:hover {
margin-top:-50px;
margin-bottom:1px;
}
</style>

<nav id="shutter-menu">
<ul>
<li><a href="#" data-clone="Home">Home</a></li>
<li><a href="#" data-clone="About">About</a></li>
<li><a href="#" data-clone="Portfolio">Portfolio</a></li>
<li><a href="#" data-clone="Comments">Comments</a></li>
<li><a href="#" data-clone="Contact">Contact</a></li>
</ul>
</nav>

Attitude navigation menu bar widget for blogger 

Dashed Rich Navigation menu bar widget for blogger 

Professional Blue Navigation menu bar widget for blogger 

Fashion Style Navigation menu bar widget for blogger 

Cute Yellow Navigation menu bar widget for blogger 

King of Black Navigation Menu Bar Widget for blogger