Free Vertical Drop Down Menu for Blogger Page 2

by Galih Gasendra on 9:54 AM in Blogger, Gadget

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

Home
Galih
- Galih1
  - Sub1 Galih1
  - Sub2 Galih1
- Galih2
  - Sub1 Galih2
  - Sub2 Galih
Gasendra
- Gasendra1
- Gasendra2
Contact

[Show Code][Hide Code]

<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

Home
Galih
- Galih1
  - Sub1 Galih1
  - Sub2 Galih1
- Galih2
  - Sub1 Galih2
  - Sub2 Galih
Gasendra
- Gasendra1
- Gasendra2
Contact

[Show Code][Hide Code]

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

Home
Galih
- Galih1
  - Sub1 Galih1
  - Sub2 Galih1
- Galih2
  - Sub1 Galih2
  - Sub2 Galih
Gasendra
- Gasendra1
- Gasendra2
Contact

[Show Code][Hide Code]

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

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

$('#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

Home
Galih
- Galih1
  - Sub1 Galih1
  - Sub2 Galih1
- Galih2
  - Sub1 Galih2
  - Sub2 Galih
Gasendra
- Gasendra1
- Gasendra2
Contact

[Show Code][Hide Code]

$('#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/