Home » , , , , » CSS Gradient Navigation Menu Bar Widget For Blogger With Shutter Effect

CSS Gradient Navigation Menu Bar Widget For Blogger With Shutter Effect


CSS Gradient Navigation Menu Bar Widget For Blogger With Shutter Effect. Based on html and css . No JavaScript simple plug and play.


CSS Gradient Navigation Menu Bar Widget For Blogger With Shutter Effect
CSS Gradient Navigation Menu Bar Widget For Blogger With Shutter Effect

VIEW DEMO





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


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

  • Go To blogger dashboard.
  • Click on layout
  • Click on add a gadget.
  • Choose HTML/JavaScript.
  • Copy the below code.
  • Paste it into the box and you are done.

CODE



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

More Blogger Navigation Menu


Title: CSS Gradient Navigation Menu Bar Widget For Blogger With Shutter Effect Author: Rohan Mod
Description : CSS Gradient Navigation Menu Bar Widget For Blogger With Shutter Effect. Based on html and css . No JavaScript simple plug and play.
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS