Home jQuery Widget Widgets Jquery and Css Vertical Drop Down Menu

Tuesday, November 17, 2015

Jquery and Css Vertical Drop Down Menu

Categories: jQuery Widget Widgets Publish Date: November 17, 2015

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.

Jquery and Css Vertical Drop Down Menu

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">

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