Drop Down Navigation Menu for Blogger

Now I am about to share the easy sink navigation menu for blogger. this can be vital for each blogger to form the navigation easier of their blogs owing to many reasons and sink navigation  menu is a perfect issue for it. In these quite menus, once somebody hovers the mouse pointer on any specific class then it drops some sub classes of it within the vertical vogue. And owing to this result, it's called best menu vogue. Well, before putting in this in your blog let me tell you one thing regarding this.

Drop Down Navigation Menu for Blogger:

This is the easy sink navigation menu that is constructed with clear HTML, CSS3 and JQuery. it's a grey color as a result of it's user friendly and it'll not have an effect on the visitors' eyes. you recognize some serious colors like Purple, Blue and Orange have an effect on the visitors' eyes and most net designers use lightweight colors. thus this menu shows the vertical sub classes once you may place the mouse on any sink menu. It conjointly encompasses a focus or click result. you'll be able to have a glance at this by visiting the below demo link.

Let's get started,

• Go to your "Blogger Dashboard" and click on the blog to which you would like to add the Drop Down Navigation Menu.
• From the options to left of webpage, select and click on "Layout".
• Next, click "Add a  Gadget".
• A popup window opens, now copy and paste the below code in the content box.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"> </script> <script type="text/javascript"> $(function() { //We initially hide the all dropdown menus $('#dropdown_nav li').find('.sub_nav').hide(); //When hovering over the main nav link we find the dropdown menu to the corresponding link. $('#dropdown_nav li').hover(function() { //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn. $(this).find('.sub_nav').fadeIn(100); } , function() { //Do the same again, only fadeOut this time. $(this).find('.sub_nav').fadeOut(50); } ); } ); </script> <style> #dropdown_nav a { font-family:Georgia, Sans-Serif; font-size:15px; font-weight:bold; color:#525252; text-decoration:none; } #dropdown_nav { width:960px; padding:0px; display:inline-block; list-style:none; -moz-box-shadow:inset 0px 0px 1px #fff; -webkit-box-shadow:inset 0px 0px 1px #fff; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; background:#e2e2e2; background:-moz-linear-gradient(#f3f3f3, #e2e2e2); background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2)); } #dropdown_nav li { padding:10px 0px 10px 0px; float:left; position:relative; display:inline-block; } #dropdown_nav li a { padding:10px 15px 10px 15px; text-shadow:-1px 1px 0px #f6f6f6; -moz-box-shadow:inset 0px 0px 1px #fff; -webkit-box-shadow:inset 0px 0px 1px #fff; border-right:1px solid #ccc; } #dropdown_nav li a:hover { background:#f9f9f9; background:-moz-linear-gradient(#f9f9f9, #e8e8e8); background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8)); } #dropdown_nav li a:active { background:#e2e2e2; background:-moz-linear-gradient(#e2e2e2, #f3f3f3); background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3)); } #dropdown_nav li a.first { -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; } /*#dropdown_nav li a.last { -moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; } */ /* Sub-Nav styling */ #dropdown_nav .sub_nav { width:160px; padding:0px; position:absolute; top:38px; left:0px; border:1px solid #ccc; background:#e2e2e2; } #dropdown_nav .sub_nav li { width:160px; padding:0px; } #dropdown_nav .sub_nav li a { display:block; border-bottom:1px solid #ccc; background:-moz-linear-gradient(#f3f3f3, #e2e2e2); background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2)); } #dropdown_nav .sub_nav li a:hover { background:#f9f9f9; background:-moz-linear-gradient(#f9f9f9, #e8e8e8); background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8)); } #dropdown_nav .sub_nav li a:active { background:#e2e2e2; background:-moz-linear-gradient(#e2e2e2, #f3f3f3); background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3)); } </style> <!-- Navigation Start --> <ul id="dropdown_nav"> <li><a class="first" href="http://www.viniwebworld.blogspot.com/">Home</a></li> <li><a href="#">HTML</a> <ul class="sub_nav"> <li><a href="#">Topic 1 #1</a></li> <li><a href="#">Topic 2 #2</a></li> <li><a href="#">Topic 3 #3</a></li> <li><a href="#">Topic 4 #4</a></li> <li><a href="#">Topic 5 #5</a></li> <li><a href="#">Topic 6 #6</a></li> </ul> </li> <li><a href="#">Videos</a> <ul class="sub_nav"> <li><a href="#">VIDEOS #1</a></li> <li><a href="#">VIDEOS #2</a></li> <li><a href="#">VIDEOS #3</a></li> </ul> </li> <li><a href="#">Freebies</a> </li> <li><a class="last" href="#">Other Stuff</a> <ul class="sub_nav"> <li><a href="#">Tools #1</a></li> <li><a href="#">Optimization Stuff #2</a></li> <li><a href="#">articles #3</a></li> <li><a href="#">Other Stuff #4</a></li> </ul> </li> </ul>

• Replace # in <a href="#"> with your links and place your tab names in <li><a href="#">Topic 1 #1</a></li>.
• Click save button.
• Now click "save arrangement" tab on the top right to save the settings.
• That's it.

After applying the steps above on your blog, just refresh your blog to see whether it works.

For further information or any queries, please comment in comment area.

To receive updates, subscribe to ViNi Web World.