How to add CSS3 and Jquery Dropdown Menu for Blogger

Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user friendly website. It’s a good solution to trim down long menu that is overwhelming the screen space, getting them to display in a more organize category-sub category pattern.

Adding such a beautiful drop down menu to blog definitely increases the beauty of your blog.Also drop down menus helps your readers to easily navigate through your blog.Previously we shared simple dropdownmenu for blogger so this time we're going to share something new.This menu is also designed with using pure CSS3 and Jquery.Check the below screenshot to see a demo of this.

How to Add This on Blogger?

• First log onto Blogger Dashboard >> Layout>> Add new gadget >> Add HTML// Java Script then, paste the below javascript code within it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
  
  <style type="text/css">
  .sub_navigation1 {position:absolute;display:none;}.sub_navigation1 le {clear:both;}


.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-primary-container{padding:0;position:relative;height:30px;z-index:400;float:right}
.menu-primary{}
.menu-primary ul{min-width:160px}
.menu-primary li a{color:#3F3F3F;padding:9px 15px;text-decoration:none;text-transform:uppercase;font:normal 12px Times}
.menu-primary li a:hover,.menu-primary li a:active,.menu-primary li a:focus,.menu-primary li:hover > a,.menu-primary li.current-cat > a,.menu-primary li.current_page_item > a,.menu-primary li.current-menu-item > a{color:#fff;outline:0;background:#F07A16}
.menu-primary li li a{color:#3F3F3F;text-transform:none;background:#ECECEC;padding:10px 15px;margin:0;border:0;font-weight:normal}
.menu-primary li li a:hover,.menu-primary li li a:active,.menu-primary li li a:focus,.menu-primary li li:hover > a,.menu-primary li li.current-cat > a,.menu-primary li li.current_page_item > a,.menu-primary li li.current-menu-item > a{color:#fff;background:#F07A16;outline:0;border-bottom:0;text-decoration:none}
.menu-primary a.sf-with-ul{padding-right:20px;min-width:1px}
.menu-primary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:8px 10px 0 0}
.menu-primary li li .sf-sub-indicator{padding:9px 10px 0 0}
.wrap-menu-primary .sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkhkt2vlSUFUbZfgxRzOw9zY86Jqo-dwVha96YmjhLXGuXph3eyjlyfhyphenhyphentWIGeaf-0dt-foD1RUC84s2smNG73cX1F-vA319LhcFzAWOtl3k9d8iPlmZTEfAGMkxsUEAEAwAaVADMPCw/s1600/menu-primary-shadow.png') no-repeat bottom right}
.zmh-dropdown-container{position:relative;height:42px;z-index:300;background: #7d7d7d;border-top-left-radius: 2em;
 -webkit-border-top-left-radius: 2em;
 -moz-border-top-left-radius: 2em;
border-top-right-radius: 2em;
 -webkit-border-top-right-radius: 2em;
 -moz-border-top-right-radius: 2em;
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
.zmh-dropdown{width:960px}
.zmh-dropdown ul{min-width:160px}
.zmh-dropdown li a{;padding:15px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:bold 13px Times;font-weight: bold;
 color: #e7e5e5;
 display: block;
 margin: 0;-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out}
.zmh-dropdown li a:hover,.zmh-dropdown li a:active,.zmh-dropdown li a:focus,.zmh-dropdown li:hover > a,.zmh-dropdown li.current-cat > a,.zmh-dropdown li.current_page_item > a,.zmh-dropdown li.current-menu-item > a{background: #e7e5e5;
 color: #444;border-radius:20px;text-shadow:1px 1px 3px #D2BCB0, -1px 1px 3px #D2BCB0, -1px -1px 3px #D2BCB0, 1px -1px 3px #D2BCB0; }
.zmh-dropdown li li a{color:#444;background:#e7e5e5;padding:10px 15px;text-transform:none;margin:0;font-weight:normal;}
.zmh-dropdown li li a:hover,.zmh-dropdown li li a:active,.zmh-dropdown li li a:focus,.zmh-dropdown li li:hover > a,.zmh-dropdown li li.current-cat > a,.zmh-dropdown li li.current_page_item > a,.zmh-dropdown li li.current-menu-item > a{background: #0078ff ;
 color: #fff !important;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 text-shadow: 0 1px 1px rgba(0,0,0, .1);text-indent:10px;
 -webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;}

</style>

<body><div class="span-24">
<div class="zmh-dropdown-container">
<ul class="menus zmh-dropdown">
<li><a href="Main_link">Main_Description</a></li>
<li class="dropdown1"><a href="Main_link" rel="nofollow">Main_Description</a>
<ul class="children sub_navigation1" style="display: none; ">
<li><a href="Child_Link" rel="nofollow">Child_Description</a></li>
<li><a href="Child_link" rel="nofollow">Child_Description</a></li>
<li><a href="Child_link" rel="nofollow">Child_Description</a></li><li><a href="Child_link" rel="nofollow" target="_blank">Child_Description</a></li>
<li><a href="Child_link" rel="nofollow" target="_blank">Child_Description</a></li>
<script type="text/javascript">
         // Wait for the page and all the DOM to be fully loaded
  
 
                 // Add the 'hover' event listener to our drop down class
   $('.dropdown1').hover(function() {
                         // When the event is triggered, grab the current element 'this' and
                         // find it's children '.sub_navigation1' and display/hide them
    $(this).find('.sub_navigation1').slideToggle(); 
   });
  
 </script></ul>
</li>
<li><a href="Main_link" target="_blank">Main_Description</a></li>
<li><a href="Main_link" target="_blank">Main_Description</a></li>
<li><a href="Main_link" rel="nofollow">Main_Description</a></li>
</ul>
</div>
</div></body>

Now save it and you're all done.

Customization

• Find " Main_link" And "Main_descripition" and replace it
• For the child menu or sub menu , just find "Child_Description" and "child_link" and replace with your own setting

Many newbies bloggers gets the problem while adding links and texts.If you are getting the same problem then simply ask me using the comment box below.If you like that then don't forget to subscribe our rss feed for more such awesome upcoming post of this blog.

Check out also!

Add pop up Facebook like 
 
Add a CSS3 & Jquery dropdown menu 
 
Enabale Youtube Videos Autoplay 
 
Plugins to speed up Wordpress
 
Add Paypal Donate button to Blogger
How to Extend Laptop Battery Life: Battery Doubler

How to Take Good Care of Your Laptop Computer
How to remove newfolder.exe or regsvr.exe or autorun.inf virus

How to install windows through USB drive

How to Delet files permanently on you computer.

LaCie 2big Thunderbolt series

Windows 8