Free Horizontal Drop Down Menu for Blogger Page 3

4.19.2015

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.

Responsive Jay DropDown Menu

Preview

[Show Code][Hide Code]

return true;
 } else {
  return false; 
 } 
});

});
} )( jQuery );
</script>

<br />
<div id="cssmenuRJ">
<ul>
<li class="active"><a href="#">Home</a></li>
<li class="has-sub"><a href="#">Galih</a>
   <ul>
<li><a href="#">Galih1</a></li>
<li><a href="#">Galih2</a></li>
<li class="last"><a href="#">Galih3</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Gasendra</a>
   <ul>
<li><a href="#">Gasendra1</a></li>
<li class="last"><a href="#">Gasendra2</a></li>
</ul>
</li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>

Animated responsive DropDown Menu

Preview

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

[Show Code][Hide Code]

</script>

<div id='cssmenuAR'>
<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 Galih2</span></a></li>
<li class='last'><a href='#'><span>Sub2 Galih2</span></a></li>
</ul>
</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>

jQuery Responsive DropDown Menu

Preview

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

[Show Code][Hide Code]

$.fn.menumaker = function(options) {
   
   var cssmenujQR = $(this), settings = $.extend({
    title: "Menu",
    format: "dropdown",
    sticky: false
   }, options);

return this.each(function() {
    cssmenujQR.prepend('<div id="menu-button">' + settings.title + '</div>');
    $(this).find("#menu-button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
      mainmenu.hide().removeClass('open');
     }
     else {
      mainmenu.show().addClass('open');
      if (settings.format === "dropdown") {
       mainmenu.find('ul').show();
      }
     }
    });

cssmenujQR.find('li ul').parent().addClass('has-sub');

multiTg = function() {
     cssmenujQR.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenujQR.find('.submenu-button').on('click', function() {
      $(this).toggleClass('submenu-opened');
      if ($(this).siblings('ul').hasClass('open')) {
       $(this).siblings('ul').removeClass('open').hide();
      }
      else {
       $(this).siblings('ul').addClass('open').show();
      }
     });
    };

if (settings.format === 'multitoggle') multiTg();
    else cssmenujQR.addClass('dropdown');

if (settings.sticky === true) cssmenujQR.css('position', 'fixed');

resizeFix = function() {
     if ($( window ).width() > 768) {
      cssmenujQR.find('ul').show();
     }

if ($(window).width() <= 768) {
      cssmenujQR.find('ul').hide().removeClass('open');
     }
    };
    resizeFix();
    return $(window).on('resize', resizeFix);

});
 };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenujQR").menumaker({
  title: "Menu",
  format: "multitoggle"
});

});
})(jQuery);
</script>

<div id='cssmenujQR'>
<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 Galih2</span></a></li>
<li class='last'><a href='#'><span>Sub2 Galih2</span></a></li>
</ul>
</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>

Quartz Responsive DropDown Menu

Preview

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

[Show Code][Hide Code]

$('#cssmenuQRe>ul>li').each(function() {
    if ($(this).hasClass('active')) {
      activeElement = $(this);
    }
  });

var posLeft = activeElement.position().left;
 var elementWidth = activeElement.width();
 posLeft = posLeft + elementWidth/2 -6;
 if (activeElement.hasClass('has-sub')) {
 posLeft -= 6;
 }

$('#cssmenuQRe #pIndicator').css('left', posLeft);
 var element, leftPos, indicator = $('#cssmenuQRe pIndicator');
 
 $("#cssmenuQRe>ul>li").hover(function() {
    element = $(this);
    var w = element.width();
    if ($(this).hasClass('has-sub'))
    {
     leftPos = element.position().left + w/2 - 12;
    }
    else {
     leftPos = element.position().left + w/2 - 6;
    }

$('#cssmenuQRe #pIndicator').css('left', leftPos);
  }
  , function() {
   $('#cssmenuQRe #pIndicator').css('left', posLeft);
  });

$('#cssmenuQRe>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
 $( "#menu-button" ).click(function(){
   if ($(this).parent().hasClass('open')) {
    $(this).parent().removeClass('open');
   }
   else {
    $(this).parent().addClass('open');
   }
   });
});
} )( jQuery );</script>

<div id='cssmenuQRe'>
<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 Galih2</span></a></li>
<li class='last'><a href='#'><span>Sub2 Galih2</span></a></li>
</ul>
</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 jQuery Responsive DropDown Menu

Preview

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

[Show Code][Hide Code]

$.fn.menumaker = function(options) {
   
   var cssmenuFjQR = $(this), settings = $.extend({
    title: "Menu",
    format: "dropdown",
    sticky: false
   }, options);

return this.each(function() {
    cssmenuFjQR.prepend('<div id="menu-button">' + settings.title + '</div>');
    $(this).find("#menu-button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
      mainmenu.hide().removeClass('open');
     }
     else {
      mainmenu.show().addClass('open');
      if (settings.format === "dropdown") {
       mainmenu.find('ul').show();
      }
     }
    });

cssmenuFjQR.find('li ul').parent().addClass('has-sub');

multiTg = function() {
     cssmenuFjQR.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenuFjQR.find('.submenu-button').on('click', function() {
      $(this).toggleClass('submenu-opened');
      if ($(this).siblings('ul').hasClass('open')) {
       $(this).siblings('ul').removeClass('open').hide();
      }
      else {
       $(this).siblings('ul').addClass('open').show();
      }
     });
    };

if (settings.format === 'multitoggle') multiTg();
    else cssmenuFjQR.addClass('dropdown');

if (settings.sticky === true) cssmenuFjQR.css('position', 'fixed');

resizeFix = function() {
     if ($( window ).width() > 768) {
      cssmenuFjQR.find('ul').show();
     }

if ($(window).width() <= 768) {
      cssmenuFjQR.find('ul').hide().removeClass('open');
     }
    };
    resizeFix();
    return $(window).on('resize', resizeFix);

});
 };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
 $("#cssmenuFjQR").menumaker({
  title: "Menu",
  format: "multitoggle"
 });

$("#cssmenuFjQR").prepend("<div id='menu-line'></div>");

var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenuFjQR #menu-line"), lineWidth, defaultPosition, defaultWidth;

$("#cssmenuFjQR > ul > li").each(function() {
 if ($(this).hasClass('active')) {
  activeElement = $(this);
  foundActive = true;
 }
});

if (foundActive === false) {
 activeElement = $("#cssmenuFjQR > ul > li").first();
}

defaultWidth = lineWidth = activeElement.width();

defaultPosition = linePosition = activeElement.position().left;

menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);

$("#cssmenuFjQR > ul > li").hover(function() {
 activeElement = $(this);
 lineWidth = activeElement.width();
 linePosition = activeElement.position().left;
 menuLine.css("width", lineWidth);
 menuLine.css("left", linePosition);
}, 
function() {
 menuLine.css("left", defaultPosition);
 menuLine.css("width", defaultWidth);
});

});

});
})(jQuery);
</script>

<div id='cssmenuFjQR'>
<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 Galih2</span></a></li>
<li class='last'><a href='#'><span>Sub2 Galih2</span></a></li>
</ul>
</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>

Responsive Flat DropDown Menu

Preview

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

[Show Code][Hide Code]

$.fn.menumaker = function(options) {
   
   var cssmenuRFM = $(this), settings = $.extend({
    title: "Menu",
    format: "dropdown",
    sticky: false
   }, options);

return this.each(function() {
    cssmenuRFM.prepend('<div id="menu-button">' + settings.title + '</div>');
    $(this).find("#menu-button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
      mainmenu.hide().removeClass('open');
     }
     else {
      mainmenu.show().addClass('open');
      if (settings.format === "dropdown") {
       mainmenu.find('ul').show();
      }
     }
    });

cssmenuRFM.find('li ul').parent().addClass('has-sub');

multiTg = function() {
     cssmenuRFM.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenuRFM.find('.submenu-button').on('click', function() {
      $(this).toggleClass('submenu-opened');
      if ($(this).siblings('ul').hasClass('open')) {
       $(this).siblings('ul').removeClass('open').hide();
      }
      else {
       $(this).siblings('ul').addClass('open').show();
      }
     });
    };

if (settings.format === 'multitoggle') multiTg();
    else cssmenuRFM.addClass('dropdown');

if (settings.sticky === true) cssmenuRFM.css('position', 'fixed');

resizeFix = function() {

if ($( window ).width() > 768) {
      cssmenuRFM.find('ul').show();
     }

if ($(window).width() <= 768) {
      cssmenuRFM.find('ul').hide().removeClass('open');
     }
    };
    resizeFix();
    return $(window).on('resize', resizeFix);

});
 };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenuRFM").menumaker({
  title: "Menu",
  format: "multitoggle"
});

});
})(jQuery);</script>

<div id='cssmenuRFM'>
<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 Galih2</span></a></li>
<li class='last'><a href='#'><span>Sub2 Galih2</span></a></li>
</ul>
</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>

Tutorial How to Add Drop Down Menu

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