This is pure CSS3 drop down block menu.hope you will like it.
The CSS :
It's very simple.
In a new HTML/JavaScript page element paste as following :
Another process :
1.Add The CSS above </b:skin>
2. Paste THE CSS part
3.After <body> paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
The CSS :
/* default styling */
.nav,
.nav ul {list-style-type:none; margin:0; padding:0; float:left;}
/* the link border radii and shadow */
.nav a {text-decoration:none;
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
/* the menu font */
.nav {font-family: verdana, sans-serif;color:#ffffff; font-size:15px; margin-bottom:-1px;}
/* style the links */
.nav a {float:left; color:#fff; line-height:16px; padding:8px 4px 8px 14px; border:1px solid #fff; margin-bottom:-1px; background:#556b2f;}
/* the dropdown arrow */
.nav .sub-a {background:#556b2f ;}
/* the sub menu links */
.nav ul a {background:#6b8e23;}
/* the links hover color */
.nav a:hover,
.nav a:focus,
.nav a:active {outline:0; background-color:#c19441;}
/* the sub links hover color and arrow */
.nav ul a:hover,
.nav ul a:focus,
.nav ul a:active {background:#c19441 url(float-drop/arrow-r.gif) no-repeat 3px center;}
/* this is for the path highlight in all browsers except IE6 and lower */
.nav li:hover > a {background-color:#c19441;}
/* WIDTH change this WITH CARE to suit your requirements */
.nav {width:120px; margin-right:-1px;}
.nav a {width:100px; margin-right:-119px;} /* take into account the borders when calculating the link width, margin-right = total link width - 1px */
.nav ul li {max-width:120px;} /* fix for IE8 */
/* flyout LEFT/RIGHT positions */
.nav ul.fly {left:119px;}
.nav .left ul.fly {left:auto; right:119px;}
.nav .mid ul.drop {left:-119px;}
/* DO NOT CHANGE ANYTHING BELOW THIS LINE */
/* ---------------------------------------------------------------------------- */
.nav ul {position:relative; margin-bottom:-1000px; z-index:500;} /* make all sub menus line up at the top and a high z-index to cover the top links drop shadow */
.nav ul li {float:left; clear:left;} /* get the sub links in a vertical column */
.nav a {position:relative;}
.nav .sub-li {margin-top:-3000px;} /* move the sub menus off the top of the screen out of sight */
.nav .sub-a {margin-top:3000px;} /* move the top level links back to their original positions */
/* The bit that does ALL the work to bring the sub menus into view */
.nav .sub-li a:hover,
.nav .sub-li a:focus,
.nav .sub-li a:active {margin-right:0;}
/* OPERA fix */
.nav ul:hover {clear:left;}
/*IE6-7 fixes*/
a:active {}
/* ---------------------------------------------------------------------------- */How to Add this in Blogger ?<div class="container"> <ul class="nav"> <li> <a href="#url">Home</a></li> </ul> <ul class="nav"> <li class="sub-li mid"> <a class="sub-a" href="#url">Resort</a> <ul class="drop"> <li> <ul class="fly"> <li> <ul class="fly"> <li> <a href="#url">Advanced Skills</a></li> <li> <a href="#url">Beginners Slopes</a></li> <li> <a href="#url">Intermediate Slopes</a></li> <li> <a href="#url">Expert</a></li> </ul> </li> <li> <a href="#url">Snow Hotel</a></li> <li> <a href="#url">The Snowman</a></li> <li> <a href="#url">Ice Cavern</a></li> <li> <a href="#url">Ski Inn</a></li> </ul> </li> <li> <a href="#url">Ski Slopes</a></li> <li> <a href="#url">Night Life</a></li> <li> <a href="#url">Restaurants</a></li> <li> <a href="#url">Car Hire</a></li> <li> <a href="#url">Ski Hire Facilities</a></li> </ul> </li> </ul> <ul class="nav"> <li class="sub-li"> <a class="sub-a" href="#url">Information</a> <ul class="drop"> <li> <ul class="fly"> <li> <a href="#url">Boots</a></li> <li> <a href="#url">Skis</a></li> <li> <a href="#url">Ski Wear</a></li> <li> <a href="#url">Goggles</a></li> </ul> </li> <li> <a href="#url">Lift Passes</a></li> <li> <a href="#url">Insurance</a></li> <li> <a href="#url">Ski Schools</a></li> <li> <a href="#url">Snow Report</a></li> <li> <a href="#url">Gear Rental</a></li> </ul> </li> </ul> <ul class="nav"> <li class="sub-li"> <a class="sub-a" href="#url">Contact</a> <ul class="drop"> <li> <a href="#url">Email</a></li> <li> <a href="#url">Telephone</a></li> <li> <a href="#url">Online Form</a></li> <li> <a href="#url">Snail Mail Address</a></li> </ul> </li> </ul> <ul class="nav"> <li> <a href="#url">Privacy</a></li> </ul> <ul class="nav"> <li class="sub-li left"> <a class="sub-a" href="#url">Nearby</a> <ul class="drop"> <li> <ul class="fly"> <li> <a href="#url">Snow Hotel</a></li> <li> <a href="#url">The Snowman</a></li> <li> <a href="#url">Ice Cavern</a></li> <li> <a href="#url">Ski Inn</a></li> </ul> </li> <li> <a href="#url">Where to go</a></li> <li> <a href="#url">What to do</a></li> <li> <a href="#url">Places of interest</a></li> <li> <a href="#url">National parks & Museums</a></li> </ul> </li> </ul> </div>
It's very simple.
In a new HTML/JavaScript page element paste as following :
And click Save<style type="text/css"> [ THE CSS ] </style> [ THE HTML ]
Another process :
1.Add The CSS above </b:skin>
2. Paste THE CSS part
3.After <body> paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
Post a Comment Blogger Facebook
Thank you..