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.

 Must Read : How to Remove Blogger Page Title

Add Dropdown Menu 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/AVvXsEhyqgoI_p2t4fYBKlVw_0badyFiU6kW05bP867CMg5YWu5wjTa9t8J4xRBRx8QkZx1e93kfGhq6IhE042gvLoaAcqteNel145DtncTlcgSeZCUiXXyeDmImr3mXYjGyXkZDc59cHERd1CI/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  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.

Articles You May Like