Home » Blogger , Gadget » Free Vertical Drop Down Menu for Blogger Page 2

Free Vertical Drop Down Menu for Blogger Page 2

Posted by Unknown Posted on 19.54 with No comments

Berikut ini beberapa kode Drop Down menu gratis yang tentunya bukanlah karya saya melainkan saya temukan dan kumpulkan dari Blog sahabat lainnya.

Here are some free code of Drop Down menu that certainly is not my work, but I found and collected from other site. Hope you like them.

Elegant Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@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: 250px;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(images/icon_plus.png) 98% center no-repeat;}#cssmenu > ul > li.has-sub.active > a span {background: url(images/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> <script type="text/javascript">(function($){$(document).ready(function(){$('#cssmenu li.active').addClass('open').children('ul').show();$('#cssmenu li.has-sub>a').on('click', function(){$(this).removeAttr('href');var element = $(this).parent('li');if (element.hasClass('open')) {element.removeClass('open');element.find('li').removeClass('open');element.find('ul').slideUp(200);}else {element.addClass('open');element.children('ul').slideDown(200);element.siblings('li').children('ul').slideUp(200);element.siblings('li').removeClass('open');element.siblings('li').find('li').removeClass('open');element.siblings('li').find('ul').slideUp(200);}});});})(jQuery);</script>  <div id='cssmenu'><ul><li><a href='#'><span>Home</span></a></li><li class='active has-sub'><a href='#'><span>Galih</span></a>      <ul><li class='has-sub'><a href='#'><span>Galih1</span></a>            <ul><li><a href='#'><span>Sub1 Galih1</span></a></li><li class='last'><a href='#'><span>Sub2 Galih1</span></a></li></ul></li><li class='has-sub'><a href='#'><span>Galih2</span></a>            <ul><li><a href='#'><span>Sub1 Galih1</span></a></li><li class='last'><a href='#'><span>Sub2 Galih2</span></a></li></ul></li></ul></li><li><a href='#'><span>Gasendra</span></a></li><li class='last'><a href='#'><span>Contact</span></a></li></ul></div>

Slabbed Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>#cssmenuSlA,#cssmenuSlA ul,#cssmenuSlA ul li,#cssmenuSlA ul li a {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}#cssmenuSlA {width: 200px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;}#cssmenuSlA ul ul {display: none;}.align-right {float: right;}#cssmenuSlA > ul > li > a {padding: 15px 20px;border-left: 1px solid #1682ba;border-right: 1px solid #1682ba;border-top: 1px solid #1682ba;cursor: pointer;z-index: 2;font-size: 14px;font-weight: bold;text-decoration: none;color: #ffffff;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);background: #36aae7;background: -webkit-linear-gradient(#36aae7, #1fa0e4);background: -moz-linear-gradient(#36aae7, #1fa0e4);background: -o-linear-gradient(#36aae7, #1fa0e4);background: -ms-linear-gradient(#36aae7, #1fa0e4);background: linear-gradient(#36aae7, #1fa0e4);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);}#cssmenuSlA > ul > li > a:hover,#cssmenuSlA > ul > li.active > a,#cssmenuSlA > ul > li.open > a {color: #eeeeee;background: #1fa0e4;background: -webkit-linear-gradient(#1fa0e4, #1992d1);background: -moz-linear-gradient(#1fa0e4, #1992d1);background: -o-linear-gradient(#1fa0e4, #1992d1);background: -ms-linear-gradient(#1fa0e4, #1992d1);background: linear-gradient(#1fa0e4, #1992d1);}#cssmenuSlA > ul > li.open > a {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);border-bottom: 1px solid #1682ba;}#cssmenuSlA > ul > li:last-child > a,#cssmenuSlA > ul > li.last > a {border-bottom: 1px solid #1682ba;}.holder {width: 0;height: 0;position: absolute;top: 0;right: 0;}.holder::after,.holder::before {display: block;position: absolute;content: "";width: 6px;height: 6px;right: 20px;z-index: 10;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-ms-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}.holder::after {top: 17px;border-top: 2px solid #ffffff;border-left: 2px solid #ffffff;}#cssmenuSlA > ul > li > a:hover > span::after,#cssmenuSlA > ul > li.active > a > span::after,#cssmenuSlA > ul > li.open > a > span::after {border-color: #eeeeee;}.holder::before {top: 18px;border-top: 2px solid;border-left: 2px solid;border-top-color: inherit;border-left-color: inherit;}#cssmenuSlA ul ul li a {cursor: pointer;border-bottom: 1px solid #32373e;border-left: 1px solid #32373e;border-right: 1px solid #32373e;padding: 10px 20px;z-index: 1;text-decoration: none;font-size: 13px;color: #eeeeee;background: #49505a;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);}#cssmenuSlA ul ul li:hover > a,#cssmenuSlA ul ul li.open > a,#cssmenuSlA ul ul li.active > a {background: #424852;color: #ffffff;}#cssmenuSlA ul ul li:first-child > a {box-shadow: none;}#cssmenuSlA ul ul ul li:first-child > a {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);}#cssmenuSlA ul ul ul li a {padding-left: 30px;}#cssmenuSlA > ul > li > ul > li:last-child > a,#cssmenuSlA > ul > li > ul > li.last > a {border-bottom: 0;}#cssmenuSlA > ul > li > ul > li.open:last-child > a,#cssmenuSlA > ul > li > ul > li.last.open > a {border-bottom: 1px solid #32373e;}#cssmenuSlA > ul > li > ul > li.open:last-child > ul > li:last-child > a {border-bottom: 0;}#cssmenuSlA ul ul li.has-sub > a::after {display: block;position: absolute;content: "";width: 5px;height: 5px;right: 20px;z-index: 10;top: 11.5px;border-top: 2px solid #eeeeee;border-left: 2px solid #eeeeee;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-ms-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}#cssmenuSlA ul ul li.active > a::after,#cssmenuSlA ul ul li.open > a::after,#cssmenuSlA ul ul li > a:hover::after {border-color: #ffffff;}</style> <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuSlA li.has-sub>a').on('click', function(){   $(this).removeAttr('href');   var element = $(this).parent('li');   if (element.hasClass('open')) {    element.removeClass('open');     element.find('li').removeClass('open');    element.find('ul').slideUp();   }   else {    element.addClass('open');    element.children('ul').slideDown();    element.siblings('li').children('ul').slideUp();    element.siblings('li').removeClass('open');    element.siblings('li').find('li').removeClass('open');    element.siblings('li').find('ul').slideUp();   }  });   $('#cssmenuSlA>ul>li.has-sub>a').append('<span class="holder"></span>');   (function getColor() {   var r, g, b;   var textColor = $('#cssmenuSlA').css('color');   textColor = textColor.slice(4);   r = textColor.slice(0, textColor.indexOf(','));   textColor = textColor.slice(textColor.indexOf(' ') + 1);   g = textColor.slice(0, textColor.indexOf(','));   textColor = textColor.slice(textColor.indexOf(' ') + 1);   b = textColor.slice(0, textColor.indexOf(')'));   var l = rgbToHsl(r, g, b);   if (l > 0.7) {    $('#cssmenuSlA>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');    $('#cssmenuSlA>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');   }   else   {    $('#cssmenuSlA>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');    $('#cssmenuSlA>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');   }  })();   function rgbToHsl(r, g, b) {      r /= 255, g /= 255, b /= 255;      var max = Math.max(r, g, b), min = Math.min(r, g, b);      var h, s, l = (max + min) / 2;       if(max == min){          h = s = 0;      }      else {          var d = max - min;          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);          switch(max){              case r: h = (g - b) / d + (g < b ? 6 : 0); break;              case g: h = (b - r) / d + 2; break;              case b: h = (r - g) / d + 4; break;          }          h /= 6;      }      return l;  } }); } )( jQuery );</script>    <div id='cssmenuSlA'><ul><li><a href='#'><span>Home</span></a></li><li class='active has-sub'><a href='#'><span>Galih</span></a>      <ul><li class='has-sub'><a href='#'><span>Galih1</span></a>            <ul><li><a href='#'><span>Sub1 Galih1</span></a></li><li class='last'><a href='#'><span>Sub2 Galih1</span></a></li></ul></li><li class='has-sub'><a href='#'><span>Galih2</span></a>            <ul><li><a href='#'><span>Sub1 Galih1</span></a></li><li class='last'><a href='#'><span>Sub2 Galih2</span></a></li></ul></li></ul></li><li><a href='#'><span>Gasendra</span></a></li><li class='last'><a href='#'><span>Contact</span></a></li></ul></div>

Modern Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);#cssmenuMA {position: relative;margin: 0;font-family: 'Roboto Condensed';line-height: 1;width: 250px;}.align-right {float: right;}#cssmenuMA ul {margin: 0;padding: 0;list-style: none;display: block;}#cssmenuMA ul li {position: relative;margin: 0;padding: 0;}#cssmenuMA ul li a {text-decoration: none;cursor: pointer;}#cssmenuMA > ul > li > a {color: #dddddd;text-transform: uppercase;display: block;padding: 20px;border-top: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;background: #222222;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);letter-spacing: 1px;font-size: 16px;font-weight: 300;-webkit-transition: all 0.25s ease-in;-moz-transition: all 0.25s ease-in;-ms-transition: all 0.25s ease-in;-o-transition: all 0.25s ease-in;transition: all 0.25s ease-in;position: relative;}#cssmenuMA > ul > li:first-child > a {border-top-left-radius: 3px;border-top-right-radius: 3px;}#cssmenuMA > ul > li:last-child > a {border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;border-bottom: 1px solid #000000;}#cssmenuMA > ul > li:hover > a,#cssmenuMA > ul > li.open > a,#cssmenuMA > ul > li.active > a {background: #151515;color: #ffffff;}#cssmenuMA ul > li.has-sub > a::after {content: "";position: absolute;display: block;width: 0;height: 0;border-top: 13px solid #000000;border-botom: 13px solid transparent;border-left: 125px solid transparent;border-right: 125px solid transparent;left: 0;bottom: -13px;bottom: 0px;z-index: 1;opacity: 0;-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}#cssmenuMA ul > li.has-sub > a::before {content: "";position: absolute;display: block;width: 0;height: 0;border-top: 13px solid #151515;border-botom: 13px solid transparent;border-left: 125px solid transparent;border-right: 125px solid transparent;left: 0;bottom: -12px;bottom: -1px;z-index: 3;opacity: 0;-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}#cssmenuMA ul > li.has-sub::after {content: "";display: block;position: absolute;width: 0;height: 0;border: 7px solid transparent;border-top-color: #dddddd;z-index: 2;right: 20px;top: 24.5px;pointer-events: none;}#cssmenuMA ul > li:hover::after,#cssmenuMA ul > li.active::after,#cssmenuMA ul > li.open::after {border-top-color: #ffffff;}#cssmenuMA ul > li.has-sub.open > a::after {opacity: 1;bottom: -13px;}#cssmenuMA ul > li.has-sub.open > a::before {opacity: 1;bottom: -12px;}#cssmenuMA ul ul {display: none;}#cssmenuMA ul ul li {border-left: 1px solid #ccc;border-right: 1px solid #ccc;}#cssmenuMA ul ul li a {background: #f1f1f1;display: block;position: relative;font-size: 15px;padding: 14px 20px;border-bottom: 1px solid #dddddd;color: #777777;font-weight: 300;-webkit-transition: all 0.25s ease-in;-moz-transition: all 0.25s ease-in;-ms-transition: all 0.25s ease-in;-o-transition: all 0.25s ease-in;transition: all 0.25s ease-in;}#cssmenuMA ul ul li:first-child > a {padding-top: 18px;}#cssmenuMA ul ul ul li {border: 0;}#cssmenuMA ul ul li:hover > a,#cssmenuMA ul ul li.open > a,#cssmenuMA ul ul li.active > a {background: #e4e4e4;color: #666666;}#cssmenuMA ul ul > li.has-sub > a::after {border-top: 13px solid #dddddd;}#cssmenuMA ul ul > li.has-sub > a::before {border-top: 13px solid #e4e4e4;}#cssmenuMA ul ul ul li a {padding-left: 30px;}#cssmenuMA ul ul > li.has-sub::after {top: 18.5px;border-width: 6px;border-top-color: #777777;}#cssmenuMA ul ul > li:hover::after,#cssmenuMA ul ul > li.active::after,#cssmenuMA ul ul > li.open::after {border-top-color: #666666;}</style> <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuMA li.has-sub>a').on('click', function(){   $(this).removeAttr('href');   var element = $(this).parent('li');   if (element.hasClass('open')) {    element.removeClass('open');    element.find('li').removeClass('open');    element.find('ul').slideUp();   }   else {    element.addClass('open');    element.children('ul').slideDown();    element.siblings('li').children('ul').slideUp();    element.siblings('li').removeClass('open');    element.siblings('li').find('li').removeClass('open');    element.siblings('li').find('ul').slideUp();   }  }); }); } )( jQuery );</script>   <div id='cssmenuMA'><ul><li><a href='#'><span>Home</span></a></li><li class='active has-sub'><a href='#'><span>Galih</span></a>      <ul><li class='has-sub'><a href='#'><span>Galih1</span></a>            <ul><li><a href='#'><span>Sub1 Galih1</span></a></li><li class='last'><a href='#'><span>Sub2 Galih1</span></a></li></ul></li><li class='has-sub'><a href='#'><span>Galih2</span></a>            <ul><li><a href='#'><span>Sub1 Galih1</span></a></li><li class='last'><a href='#'><span>Sub2 Galih2</span></a></li></ul></li></ul></li><li><a href='#'><span>Gasendra</span></a></li><li class='last'><a href='#'><span>Contact</span></a></li></ul></div>

jQuery Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Lato);@charset "UTF-8";/* Base Styles */#cssmenuVJ,#cssmenuVJ ul,#cssmenuVJ li,#cssmenuVJ a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1;font-family: 'Lato', sans-serif;font-size: 14px;position: relative;}#cssmenuVJ a {line-height: 1.3;padding: 6px 15px;}#cssmenuVJ {width: 200px;}#cssmenuVJ > ul > li {cursor: pointer;background: #000;border-bottom: 1px solid #4c4e53;}#cssmenuVJ > ul > li:last-child {border-bottom: 1px solid #3e3d3c;}#cssmenuVJ > ul > li > a {font-size: 13px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #64676e;background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53));background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%);background: linear-gradient(#64676e 0%, #4c4e53 100%);}#cssmenuVJ > ul > li > a:hover {text-decoration: none;}#cssmenuVJ > ul > li.active {border-bottom: none;}#cssmenuVJ > ul > li.active > a {background: #97c700;background: -moz-linear-gradient(#97c700 0%, #709400 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400));background: -webkit-linear-gradient(#97c700 0%, #709400 100%);background: linear-gradient(#97c700 0%, #709400 100%);color: #4e5800;text-shadow: 0 1px 1px #709400;}#cssmenuVJ > ul > li.has-sub > a:after {content: "";position: absolute;top: 10px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;}#cssmenuVJ > ul > li.has-sub.active > a:after {right: 14px;top: 12px;border: 5px solid transparent;border-top: 5px solid #4e5800;}/* Sub menu */#cssmenuVJ ul ul {padding: 0;display: none;}#cssmenuVJ ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;}#cssmenuVJ ul ul li {border-bottom: 1px solid #c9c9c9;}#cssmenuVJ ul ul li.odd a {background: #e5e5e5;}#cssmenuVJ ul ul li:last-child {border: none;}</style>  <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuVJ ul ul li:odd').addClass('odd'); $('#cssmenuVJ ul ul li:even').addClass('even'); $('#cssmenuVJ > ul > li > a').click(function() {   $('#cssmenuVJ 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'))) {     $('#cssmenuVJ ul ul:visible').slideUp('normal');     checkElement.slideDown('normal');   }   if($(this).closest('li').find('ul').children().length == 0) {     return true;   } else {     return false;    }   }); }); } )( jQuery ); </script>   <div id='cssmenuVJ'><ul><li class='active'><a href='#'><span>Home</span></a></li><li class='has-sub'><a href='#'><span>Galih</span></a>      <ul><li><a href='#'><span>Galih1</span></a></li><li><a href='#'><span>Galih2</span></a></li><li class='last'><a href='#'><span>Galih3</span></a></li></ul></li><li class='has-sub'><a href='#'><span>Gasendra</span></a>      <ul><li><a href='#'><span>Gasendra1</span></a></li><li class='last'><a href='#'><span>Gasendra</span></a></li></ul></li><li class='last'><a href='#'><span>Contact</span></a></li></ul></div>

Flat Numbered jQuery Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);@charset "UTF-8";/* Base Styles */#cssmenuFNjA,#cssmenuFNjA ul,#cssmenuFNjA li,#cssmenuFNjA 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;}#cssmenuFNjA a {line-height: 1.3;}#cssmenuFNjA {width: 250px;}#cssmenuFNjA > ul > li > a {padding-right: 40px;font-size: 25px;font-weight: bold;display: block;background: #bd0e36;color: #ffffff;border-bottom: 1px solid #5e071b;text-transform: uppercase;}#cssmenuFNjA > ul > li > a > span {background: #ed1144;padding: 10px;display: block;font-size: 13px;font-weight: 300;}#cssmenuFNjA > ul > li > a:hover {text-decoration: none;}#cssmenuFNjA > ul > li.active {border-bottom: none;}#cssmenuFNjA > ul > li.active > a {color: #fff;}#cssmenuFNjA > ul > li.active > a span {background: #bd0e36;}#cssmenuFNjA span.cnt {position: absolute;top: 8px;right: 15px;padding: 0;margin: 0;background: none;}/* Sub menu */#cssmenuFNjA ul ul {display: none;}#cssmenuFNjA ul ul li {border: 1px solid #e0e0e0;border-top: 0;}#cssmenuFNjA ul ul a {padding: 10px;display: block;color: #ed1144;font-size: 13px;}#cssmenuFNjA ul ul a:hover {color: #bd0e36;}#cssmenuFNjA ul ul li.odd {background: #f4f4f4;}#cssmenuFNjA ul ul li.even {background: #fff;}</style> <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $(document).ready(function(){  $('#cssmenuFNjA > ul > li ul').each(function(index, e){   var count = $(e).find('li').length;   var content = '<span class=\"cnt\">' + count + '</span>';   $(e).closest('li').children('a').append(content); }); $('#cssmenuFNjA ul ul li:odd').addClass('odd'); $('#cssmenuFNjA ul ul li:even').addClass('even'); $('#cssmenuFNjA > ul > li > a').click(function() {   $('#cssmenuFNjA 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'))) {     $('#cssmenuFNjA ul ul:visible').slideUp('normal');     checkElement.slideDown('normal');   }   if($(this).closest('li').find('ul').children().length == 0) {     return true;   } else {     return false;    }   });  });  }); } )( jQuery );  </script>   <div id='cssmenuFNjA'><ul><li class='active'><a href='#'><span>Home</span></a></li><li class='has-sub'><a href='#'><span>Galih</span></a>      <ul><li><a href='#'><span>Galih1</span></a></li><li><a href='#'><span>Galih2</span></a></li><li class='last'><a href='#'><span>Galih3</span></a></li></ul></li><li class='has-sub'><a href='#'><span>Gasendra</span></a>      <ul><li><a href='#'><span>Gasendra1</span></a></li><li class='last'><a href='#'><span>Gasendra2</span></a></li></ul></li><li class='last'><a href='#'><span>Contact</span></a></li></ul></div>

Flat Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);#cssmenuFAM,#cssmenuFAM ul,#cssmenuFAM ul li,#cssmenuFAM ul li a {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}#cssmenuFAM {width: 220px;font-family: Raleway, sans-serif;color: #ffffff;}#cssmenuFAM ul ul {display: none;}#cssmenuFAM > ul > li.active > ul {display: block;}.align-right {float: right;}#cssmenuFAM > ul > li > a {padding: 16px 22px;cursor: pointer;z-index: 2;font-size: 16px;text-decoration: none;color: #ffffff;background: #3ab4a6;-webkit-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;}#cssmenuFAM > ul > li > a:hover {color: #d8f3f0;}#cssmenuFAM ul > li.has-sub > a:after {position: absolute;right: 26px;top: 19px;z-index: 5;display: block;height: 10px;width: 2px;background: #ffffff;content: "";-webkit-transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;-ms-transition: all 0.1s ease-out;-o-transition: all 0.1s ease-out;transition: all 0.1s ease-out;}#cssmenuFAM ul > li.has-sub > a:before {position: absolute;right: 22px;top: 23px;display: block;width: 10px;height: 2px;background: #ffffff;content: "";-webkit-transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;-ms-transition: all 0.1s ease-out;-o-transition: all 0.1s ease-out;transition: all 0.1s ease-out;}#cssmenuFAM ul > li.has-sub.open > a:after,#cssmenuFAM ul > li.has-sub.open > a:before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}#cssmenuFAM ul ul li a {padding: 14px 22px;cursor: pointer;z-index: 2;font-size: 14px;text-decoration: none;color: #dddddd;background: #49505a;-webkit-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;}#cssmenuFAM ul ul ul li a {padding-left: 32px;}#cssmenuFAM ul ul li a:hover {color: #ffffff;}#cssmenuFAM ul ul > li.has-sub > a:after {top: 16px;right: 26px;background: #dddddd;}#cssmenuFAM ul ul > li.has-sub > a:before {top: 20px;background: #dddddd;}</style> <script type="text/javascript">(function($){ $(document).ready(function(){  $('#cssmenuFAM li.active').addClass('open').children('ul').show();  $('#cssmenuFAM li.has-sub>a').on('click', function(){   $(this).removeAttr('href');   var element = $(this).parent('li');   if (element.hasClass('open')) {    element.removeClass('open');    element.find('li').removeClass('open');    element.find('ul').slideUp(200);   }   else {    element.addClass('open');    element.children('ul').slideDown(200);    element.siblings('li').children('ul').slideUp(200);    element.siblings('li').removeClass('open');    element.siblings('li').find('li').removeClass('open');    element.siblings('li').find('ul').slideUp(200);   }  });  }); })(jQuery); </script>  <div id='cssmenuFAM'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Tutorial How to Add Drop Down Menu

Tutorial How to Create Add Adding Cara Membuat Free Gratis Drop Down Vertical Vertikal Accordion Menu for untuk Blog Blogger Blogspot Wordpress Javascript
Source http://cssmenumaker.com/

0 komentar:

Posting Komentar