.png)
Metro Style Menu For Blogger
Install It Into Blogger
1. log Into Blogger Dashboard
2. Navigate To Layout
3. Click Add a Gadget
4. Select HTML/JavaScript
5. Paste the following code there
<ul id="css3menu1" class="topmenu">6. Make Changes
<li class="topmenu"><a href="#" style="height:21px;line-height:21px;">Home</a></li>
<li class="toproot"><a href="#" style="height:21px;line-height:21px;"><span>Product info</span></a>
<div class="submenu" style="width:370px;">
<div class="column" style="width:50%"><ul>
<li><a href="#">What's new</a></li>
<li><a href="#">Features</a></li>
<li><a href="#"><span>Installation</span></a>
<div class="submenu">
<div class="column"><ul>
<li><a href="#">Description of files</a></li>
<li><a href="#">How to setup</a></li>
</ul></div></div>
</li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#">Parameters info</a></li>
<li><a href="#"><span>Supported browsers</span></a>
<div class="submenu" style="width:326px;">
<div class="column" style="width:50%"><ul>
<li><a href="#">Firefox</a></li>
<li><a href="#">Internet Explorer</a></li>
<li><a href="#">Opera</a></li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#">Safari</a></li>
<li><a href="#">Google Chrome</a></li>
</ul></div></div>
</li>
<li><a href="#">CSS3 info</a></li>
</ul></div></div>
</li>
<li class="toproot"><a href="#" style="height:21px;line-height:21px;"><span>Samples</span></a>
<div class="submenu" style="width:344px;">
<div class="column" style="width:50%"><ul>
<li><a href="#">Android template</a></li>
<li><a href="#">Mac template</a></li>
<li><a href="#"><span>Mercury template</span></a>
<div class="submenu" style="width:284px;">
<div class="column" style="width:50%"><ul>
<li><a href="#">Blue theme</a></li>
<li><a href="#">Green theme</a></li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#">Lilac theme</a></li>
<li><a href="#">Orange theme</a></li>
</ul></div></div>
</li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#">Elegant template</a></li>
<li><a href="#"><span>Point template</span></a>
<div class="submenu" style="width:356px;">
<div class="column" style="width:50%"><ul>
<li><a href="#">Aquamarine theme</a></li>
<li><a href="#">Blue theme</a></li>
<li><a href="#">Green theme</a></li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#">Grey theme</a></li>
<li><a href="#">Orange theme</a></li>
<li><a href="#">Red theme</a></li>
</ul></div></div>
</li>
<li><a href="#">Toolbars template</a></li>
</ul></div></div>
</li>
<li class="topmenu"><a href="#" style="height:21px;line-height:21px;">Download</a></li>
</ul>
<style>
@import'http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,latin-ext,cyrillic';ul#css3menu1,ul#css3menu1 ul{margin:0;list-style:none;padding:0;}ul#css3menu1,ul#css3menu1 .submenu{background-color:none;border-width:0;border-style:solid;border-color:;}ul#css3menu1 .submenu{display:none;position:absolute;left:0;top:100%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";opacity:0.85;float:left;z-index:2;background-color:#000000;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;padding:0 8px 8px;filter:alpha(opacity=85)}ul#css3menu1 li:hover>*{display:block;}ul#css3menu1 li{position:relative;display:block;white-space:nowrap;font-size:0;float:left;}ul#css3menu1 li:hover{z-index:1;}ul#css3menu1 ul .submenu{position:absolute;left:100%;top:0;opacity:1;-moz-box-shadow:0px 0px 1px #AAAAAA;-webkit-box-shadow:0px 0px 1px #AAAAAA;box-shadow:0px 0px 1px #AAAAAA;}ul#css3menu1{font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;*display:inline;}ul#css3menu1 .column{float:left;}* html ul#css3menu1 li a{display:inline-block;}ul#css3menu1>li{margin:0;}ul#css3menu1 a:active,ul#css3menu1 a:focus{outline-style:none;}ul#css3menu1 a{display:block;vertical-align:middle;text-align:left;text-decoration:none;font:17px Open Sans Condensed,Arial,Helvetica,sans-serif;color:#AAAAAA;cursor:pointer;padding:6px 15px 15px 15px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}ul#css3menu1 ul li{float:none;margin:8px 0 0;}ul#css3menu1 ul a{text-align:left;padding:7px;background-color:#000000;border-width:1px;border-style:solid;border-color:transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#AAAAAA;text-decoration:none;}ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{ border-style:none;color:#000;text-decoration:none;}ul#css3menu1 ul span{background-image:none;padding-right:7px;}ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{background-color:#000000;border-style:solid;border-color:#FFFFFF;color:#FFFFFF;text-decoration:none;}ul#css3menu1 li.topmenu>a{background-color:transparent;border-radius:0x;-moz-border-radius:0x;-webkit-border-radius:0x;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{background-color:transparent;}ul#css3menu1 li.toproot>a{background-color:transparent;background-image:none;background-repeat:no-repeat;background-position:0 100%;border-radius:0x;-moz-border-radius:0x;-webkit-border-radius:0x;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}ul#css3menu1 li.toproot:hover>a,ul#css3menu1 li.toproot a.pressed{background-color:transparent;background-image:url("http://css3menu.com/images/metro-black/triangle.png");}
</style>
7. Save
And DoNe.
0 comments: