Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Tuesday, February 5, 2013

MultiLevel DropDown Floating Menu WithOut J-Query (Only HTML-CSS)

This Article Was Live On: Tuesday, February 5, 2013 And Till Now Have14 comments.
Hello again, it’s time for widget article. Here you’ll find pure CSS based drop-down multi level menu with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.

MultiLevel DropDown Floating Menu WithOut J-Query (Only HTML-CSS)
Preview

I’ve had a few requests from readers asking how to install a drop-down menu without j-query due to heavy load. So here it is, a multi level dropdown/fly-out menu. The original code is from CSS Play. I modified the CSS part a little to adapt to Blogger template. This four level drop-down/fly-out menu should work in most browsers. A tab with small caps indicates it has upper level/levels. A drop-down/fly-out will appear when you hover the tab. First Have A Look On Image Or See The Demo By The Given Link.




Features:

1.) This Contain Only HTML-CSS.
2.)  This Will Also Contain J-Query Effect With Out JAVASCRIPT File.
3.) Speed Loading Time Because There Is No  JAVASCRIPT File.
4.) 4 Level Drop-Down Menu.
5.) Stylish Gradient Color With StylisgGradient Hover Effect.
6.) Scroll With Your Page (Fixed Position At Top).

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Create A Backup Oh Your Template.
4.) Open "Edit HTML" And Find </head> Tag By Pressing (CTRL+F)
5.) Now Copy The Below Code And Paste After </head> .
6.) Click Save Template, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.


<!-- Dropdown Menu 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 -->

Customization:

1.) Change All Blue Hash With Your Links.
2.) Change All Red Text With Your Links Names.
3.) Done, Now Enjoy.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



14 comments :

  1. Awesome style.

    Thank's bro. Keep writting. :)

    Visit my blog <a href="http://d-copy.blogspot.com</a>Blogger Hack, Blogger Widget, Blogger Tip, SEO and Many More</a>. Thank's Bro...

    ReplyDelete
  2. hello.. can I ask something.. why my dropdown menu moving each time I am scrolling my blog? can i know the solution to make it static on its fixed place. thank you for your help

    ReplyDelete
    Replies
    1. Just Change "fixed" to "absolute" in the code everywhere.

      Delete
  3. Nice Info.??? And the blogs are really good.
    visit my blog guys

    ReplyDelete
  4. Works perfectly by using absolute instead of fixed..
    Thanks

    ReplyDelete
    Replies
    1. You Are Welcome To Use It And It's Also Working Perfect With fixed Position But Litte Editing In Your Template.

      Delete
  5. Please Help how to change multi tab colour from red to black ?
    And please Tell how to change font text style ?
    Help......

    ReplyDelete
    Replies
    1. For Font CSS, Just Find #menu a {..... And Change It What You Want.
      For Color Change, Just Removed All background-images Codes With Your Desire...

      Delete
  6. Nice menu, looking beautiful.


    www.pokharatech.com

    ReplyDelete
    Replies
    1. Thanks For Your Appreciation, Be With US To Get More...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.