Jquery and Css Vertical Drop Down Menu - Mix Blogging

Notifikasi

“We become extremely vulnerable to the ones that love us, we believe in what they say, we believe in their faith held next to us. It’s law of attraction to become who your surrounded by, so instead of focusing of changing another, find some one suitable to your soul.” ― Nikki Rowe

|

Home › CSS3 › Drop Down Menu › Widget › Jquery and Css Vertical Drop Down Menu

Jquery and Css Vertical Drop Down Menu

Posted by : TheCode-X

Friday, 27 December 2013

- Add Comment

Great Widget because it does not takes a lot space even makes you more valuable space and still is the main thing, the navigation menu just as this is the on the side bur and if you have a little more knowledge of jquery or css area, then you can also do custom variants. I looks nice and is very functional. You have a a demo, it is easy to install and easy to uninstall. Just remove the widget.

LIVE DEMO| TRY IT

First and most important for the widget, to work is to add this code into the blogger immediately after <head> tag

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Place the following code into the HTML / JavaScript box in the sidebar and that's all.

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); @charset 'UTF-8'; /* Base Styles */ #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {   margin: 0;   padding: 0;   border: 0;   list-style: none;   font-weight: normal;   text-decoration: none;   line-height: 1;   font-family: 'Open Sans', sans-serif;   font-size: 14px;   position: relative; } #cssmenu a {   line-height: 1.3; } #cssmenu {   width: 300px;   background: #fff;   -webkit-border-radius: 4px;   -moz-border-radius: 4px;   border-radius: 4px;   padding: 3px;   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);   box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); } #cssmenu > ul > li {   margin: 0 0 2px 0; } #cssmenu > ul > li:last-child {   margin: 0; } #cssmenu > ul > li > a {   font-size: 15px;   display: block;   color: #ffffff;   text-shadow: 0 1px 1px #000;   background: #565656;   background: -moz-linear-gradient(#565656 0%, #323232 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));   background: -webkit-linear-gradient(#565656 0%, #323232 100%);   background: linear-gradient(#565656 0%, #323232 100%);   border: 1px solid #000;   -webkit-border-radius: 4px;   -moz-border-radius: 4px;   border-radius: 4px; } #cssmenu > ul > li > a > span {   display: block;   border: 1px solid #666666;   padding: 6px 10px;   -webkit-border-radius: 4px;   -moz-border-radius: 4px;   border-radius: 4px;   font-weight: bold; } #cssmenu > ul > li > a:hover {   text-decoration: none; } #cssmenu > ul > li.active {   border-bottom: none; } #cssmenu > ul > li.active > a {   background: #97be10;   background: -moz-linear-gradient(#97be10 0%, #79980d 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d));   background: -webkit-linear-gradient(#97be10 0%, #79980d 100%);   background: linear-gradient(#97be10 0%, #79980d 100%);   color: #fff;   text-shadow: 0 1px 1px #000;   border: 1px solid #79980d; } #cssmenu > ul > li.active > a span {   border: 1px solid #97be10; } #cssmenu > ul > li.has-sub > a span {   background: url(https://lh5.googleusercontent.com/-21rx6aIUzic /UqSoMviGxWI/AAAAAAAACPw/_Qq7GteXckM/h120/icon_plus.png) 98% center no-repeat; } #cssmenu > ul > li.has-sub.active > a span {   background: url(https://lh6.googleusercontent.com/-1qb7a6ft13M /UqSoMYncT1I/AAAAAAAACPs/ZFr7yxcDvv4/h120/icon_minus.png ) 98% center no-repeat; } /* Sub menu */ #cssmenu ul ul {   padding: 5px 12px;   display: none; } #cssmenu ul ul li {   padding: 3px 0; } #cssmenu ul ul a {   display: block;   color: #595959;   font-size: 13px;   font-weight: bold; } #cssmenu ul ul a:hover {   color: #79980d; } </style><div id='cssmenu'><ul><li><a href='index.html'><span>Home</span></a></li><li class='has-sub'><a href='#'><span>Products</span></a>      <ul><li><a href='http://j.mp/qbpg1'><span>Widgets</span></a></li><li><a href='#'><span>Menus</span></a></li><li class='last'><a href='#'><span>Products</span></a></li></ul></li><li class='has-sub'><a href='#'><span>Company</span></a>      <ul><li><a href='#'><span>About</span></a></li><li class='last'><a href='#'><span>Location</span></a></li></ul></li><li class='last'><a href='#'><span>Contact</span></a></li></ul></div><div style="clear:both; margin: 0 0 30px 0;"> </div><script type='text/javascript'>//<![CDATA[ $( document ).ready(function() { $('#cssmenu > ul > li > a').click(function() {   $('#cssmenu li').removeClass('active');   $(this).closest('li').addClass('active');   var checkElement = $(this).next();   if((checkElement.is('ul')) && (checkElement.is(':visible'))) {     $(this).closest('li').removeClass('active');     checkElement.slideUp('normal');   }   if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {     $('#cssmenu ul ul:visible').slideUp('normal');     checkElement.slideDown('normal');   }   if($(this).closest('li').find('ul').children().length == 0) {     return true;   } else {     return false;   }  }); }); //]]></script>

Replace all with this COLOR with your titles or tags

Replace hashtag #' with your link

Replace this - width, width: 300px; as needed

You can make some more custom variation because it's very easy to handle

That's all, click save and your done, happy bloging

Mix-R

Mix-R

"Myths, legends and stories are the signposts previous generations have left us so we don’t have to figure out our own personal journey in solitude!"

Disqus CommentsLoadHide