20 May 2013

Beautiful Drop down Floating Multi level Menu Button(CSS/HTML Based) without jQuery

20:13  Unknown  No comments



Hi folks! Hope you were enjoying my blog post. Today I planned to add a post on blogger widget. You will find Pure CSS /HTML based floating button menu which is multi-level in nature. Drop down menu is very important for blogger/website. If your site has lots of pages and post under various categories, than you must have drop down list. It provides easy navigation. This reflects well arrangement of your site. Having drop down list is good thing but having beautiful drop down list is awesome. It gives first sight impression to your blog reader.

Why CSS/HTML and not jQuery??
J-Qery is used to give a fresh look to blog content. But jQuery suffers with load time. It consume most of blog loading time. thus give bad impression to blog reader. That’s why I created this widget which have all features of jQuery and yet easy, beautiful and fast loading. It is fully optimised for blogger blog. This widget is four level multi drop down list with colourful effects.
Features of this widget:

• Contain CSS/Html code only
• Though its not javascript/jQuery but contain all those effect.
• Fast and responsive.
• Support Almost every browser
• It is four level drop down list
• Stylish Colour and Hover Effect
• Easy scrolling with fixed position at top

How to Add this widget in Blog:
• Go to your blogger account.
• Select you blog .Create a backup.
• Not go to “Edit HTML”
• Find Closing head tag </head> by pressing CTRL+F
• Copy your code from below and Paste after </head>

<!-- Dropdown Menu By BTT Start -->
<style>
#menu { background-color: #ba1eaa;
 background-image: -moz-linear-gradient(#04acec, #ba1eaa);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
 background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
 background-image: -o-linear-gradient(#04acec, #ba1eaa);
 background-image: -ms-linear-gradient(#04acec, #ba1eaa);
 background-image: linear-gradient(#04acec, #0186ba); height:35px;; text-align:center; position:fixed; z-index:20; right: 0%; left: 0%;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {clear:both;float:none;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
#menu ul.level1 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu ul.level2 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level3 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level4 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 14px Arial; color:#fff; line-height:35px; text-decoration:none;padding:0px 15px 0 15px;outline:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:35px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-35px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:30px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:30px;}
#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu li:hover > a,
#menu ul li:hover > a.fly {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}
.main-outer {z-index:10;}/*for IE*/
.tabs-outer {z-index:11;}/*for IE*/
</style>
<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="##########">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="##########">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="##########">Email</a></li>
<li><a href="##########">Telephone</a></li>
<li><a href="##########">Online Form</a></li>
<li><a href="##########">Snail Mail Address</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="##########">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="##########">Ski Hire Facilities</a></li>
<li><a class="fly" href="##########">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="##########">Beginners Slopes</a></li>
<li><a href="##########">Intermediate Slopes</a></li>
<li><a class="fly" href="##########">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="##########">Local</a></li>
<li><a href="##########">Nearby</a></li>
<li><a href="##########">With instructor</a></li>
<li><a href="##########">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="##########">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="##########">Night Life</a></li>
<li><a class="fly" href="##########">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="##########">Snow Hotel</a></li>
<li><a href="##########">The Snowman</a></li>
<li><a href="##########">Ice Cavern</a></li>
<li><a href="##########">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="##########">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="##########">From Airport</a></li>
<li><a href="##########">In Resort</a></li>
<li><a href="##########">Multiple Resorts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="##########">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="##########">Where to go</a></li>
<li><a href="##########">What to do</a></li>
<li><a href="##########">Places of interest</a></li>
<li><a href="##########">National parks &amp; Museums</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a" href="##########">Privacy</a></li>
<li class="level1-li"><a class="level1-a" href="##########">About Us</a></li>
<li class="level1-li"><a class="level1-a" href="##########">Contact Us</a></li>
<li class="level1-li"><a class="level1-a" href="##########">SiteMap</a></li>
<li class="level1-li"><a class="level1-a" href="##########">Official Website</a></li>
<li class="level1-li left"><a class="level1-a fly" href="##########">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="##########">Money Exchange</a></li>
<li><a class="fly" href="##########">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="##########">Lift Passes</a></li>
<li><a href="##########">Insurance</a></li>
<li><a class="fly" href="##########">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="##########">Boots</a></li>
<li><a href="##########">Skis</a></li>
<li><a href="##########">Ski Wear</a></li>
<li><a href="##########">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="##########">Ski Schools</a></li>
<li><a href="##########">Snow Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="##########">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="##########">Austrian</a></li>
<li><a href="##########">German</a></li>
<li><a href="##########">French</a></li>
<li><a href="##########">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="##########">Short Breaks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
</div>
<!-- Dropdown HTML Menu By BTT Ends--> 


• Now save template.
• Done.

Posted in:

0 comments:

Post a Comment