Cara membuat drop down menu terpisah versi 2

Drop down menu terpisah adalah kombinasi keindahan dari tombol menu yang ramping dengan drop down menu secara fleksibel untuk menciptakan permukaan navigasi terbaik. Menu ini menggunakan tombol oval berbasis CSS yang atraktif. Dengan penambahan element opsi beralih disebelahnya secara dinamis. Menu ini saya dapatkan dari dynamic drive..

View Demo

KODE CSS DAN CARA MENAMBAHKAN MENUNYA DI BLOG 

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Edit HTML

• Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
• Berikutnya pastekan kode CSS tepat diatas kode ]]></b:skin>
  

  .splitmenubutton, .downtoggler{ /* .downtoggler element is dynamically added by script */
  color: white;
  font: bold 13px Arial;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-decoration: none;
  background: darkred; /* default color of menu button */
  display: inline-block;
  }
  
  .splitmenubutton span.innerspan, .downtoggler span.innerspan{ /* span.innerspan element dynamically added by script inside menu button */
  display: block;
  padding: 8px;
  line-height: 1em;
  /* the following CSS3 gradients add a white to transparent linear gradient to the buttons, to give them a more beveled look */
  background: -moz-linear-gradient(top,  rgba(255,252,252,0.54) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,252,252,0.54)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* W3C */
  }
  
  .dedicatedtoggler{ /* CSS to apply to toggler when it's a seperate element (instead of being the main menu button itself) */
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  border-left: 1px solid #f5f5f5;
  }
  
  a.downtoggler.selected{ /* CSS to add to toggler element when it's selected */
  background: #b13f33; /* default hover background color of menu */
  }
  
  .downarrow, rightarrow{
  cursor: pointer;
  }
  
  span.innerspan.downarrow::after{ /* Down arrow (hex value) */
  content: '\25be';
  }
  
  .splitmenubutton span.innerspan.downarrow:after{ /* Down arrow with space before the arrow */
  content: '\00a0\25be';
  }
  
  
  .rightarrow:after{ /* CSS for right arrow inside splitdropdown */
  content: '\25b8'; /* Add HTML entity based right arrow */
  position: absolute;
  right: 5px;
  font-size: 16px;
  height: 100%;
  }
  
  /* ##### CSS for UL Drop Down Menus of script ###### */
  
  
  ul.splitdropdown, ul.splitdropdown ul{ /*topmost and sub ULs, respectively*/
  font: normal 13px Verdana;
  margin: 0;
  padding: 0;
  position: absolute;
  display: none;
  left: 200px;
  top: 0;
  list-style: none;
  background: white; /* background color of drop down */
  border: 1px solid lightgray;
  border-bottom-width: 0;
  box-shadow: 0 0 8px #818181; /*shadow for CSS3 capable browsers.*/
  -webkit-box-shadow: 0 0 8px #818181;
  -moz-box-shadow: 0 0 8px #818181;
  }
  
  
  ul.splitdropdown li{
  position: relative;
  }
  
  ul.splitdropdown li a{
  display: block;
  width: 160px; /*width of menu (not including side paddings)*/
  color: black;
  background: white;
  text-decoration: none;
  padding: 8px 4px;
  }
  
  * html ul.splitdropdown li{ /*IE6 CSS hack*/
  display: inline-block;
  width: 170px; /*width of menu (include side paddings of LI A*/
  }
  
  ul.splitdropdown li a:hover, .splitdropdown li.selected>a{
  background: #eee;
  }
  
  ul.splitdropdown li.separator{
  border-bottom: 1px solid #dedddd;
  }

  KODE CSS

• Kemudian Cari kode </head> dan pastekan script berikut tepat diatas kode </head>

 <link rel="stylesheet" type="text/css" href="splitmenubuttons.css" />

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script src="splitmenubuttons.js"></script>

<script>
jQuery(function(){ // on document load
    $('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr
})
</script>

Apabila kode jquery yang disorot warna merah sudah ada di template anda, harap diabaikan

• Langkah berikutnya cari kode </body> pastekan script kode javascript dibawah ini tepat diatas kode </body> 

<script type='text/javascript'> //<![CDATA[ jQuery.fn.splitmenubuttonMenu = function(options){ var $ = jQuery, startzindex = 1 var s = $.extend({}, {split:true, triggerevt:'mouseover', hidetoplevelmouseout:true, hidedelay:200, fxduration:100}, options) var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null s.triggerevt = ismobile? 'click' : (s.triggerevt == 'mouseover'? 'mouseenter' : s.triggerevt) function deselecttoggler($dropmenu){ // func to deselect toggler var $activetoggler = $dropmenu.data('$activetoggler') if ($activetoggler && $activetoggler.length == 1){ $activetoggler.removeClass('selected') var menucolors = $activetoggler.data('menucolors') if (menucolors) $activetoggler.css('backgroundColor', menucolors[0]) } } function positionmenu(s, level, $toggler, $dropmenu){ if (level == "toplevel"){ var docrightedge = $(document).scrollLeft() + $(window).width() - 40 var docbottomedge = $(document).scrollTop()+$(window).height()-40 this.docrightedge = docrightedge // cache this value this.docbottomedge = docbottomedge var $offset = $toggler.data('mainanchor').offset() var togglerWidth = (s.split)? $toggler.data('mainanchor').width() + $toggler.width() : $toggler.width() var togglerHeight = $toggler.height() var dropmenuWidth = $dropmenu.outerWidth() var dropmenuHeight = $dropmenu.outerHeight() var leftpos = (($offset.left + dropmenuWidth) > docrightedge)? $offset.left - (dropmenuWidth - togglerWidth) : $offset.left var toppos = (($offset.top + dropmenuHeight) > docbottomedge)? $offset.top - (dropmenuHeight + togglerHeight) : $offset.top return {left: leftpos, top: toppos} } else{ var $offset = $toggler.offset() var submenuWidth = $dropmenu.outerWidth() var submenuHeight = $dropmenu.outerHeight() var leftpos = ($offset.left + (submenuWidth*2) > this.docrightedge)? -submenuWidth : submenuWidth var toppos = ($offset.top + (submenuHeight) > this.docbottomedge)? -submenuHeight + $toggler.height() : 0 return {left: leftpos, top: toppos} } } function hidemenu($dropmenu){ $dropmenu.find('ul').hide().end() .slideUp(s.fxduration, function(){ deselecttoggler($dropmenu) }) } return this.each(function(){ //return jQuery obj var $this = $(this).wrapInner('<span class="innerspan" />') // reference anchor item and add <span> tag inside it if (this.tagName == "A"){ // only apply split menu to element if it's a link var menucolors = $this.attr('data-menucolors') if (menucolors){ menucolors = jQuery.trim(menucolors).split(/,\s*/) $this.css('backgroundColor', menucolors[0]) } var $dropmenu = $('ul#' + this.getAttribute('data-showmenu')) $dropmenu.data('timer', {}) var splitit = $this.attr('data-splitmenu') || s.split splitit = (typeof splitit == "string")? (splitit == "true" ? true : false ) : splitit if (splitit && $dropmenu.length == 1){ // split up toggler and menu link itself? var $toggler = $('<a class="downtoggler dedicatedtoggler"><span class="innerspan downarrow"> </span></a>').insertAfter($this) // append new "toggler" element after menu button if (menucolors){ $toggler.css('backgroundColor', $this.css('backgroundColor')) } } else{ var $toggler = $this if ($dropmenu.length == 1){ $toggler.addClass('downtoggler').find('span.innerspan:eq(0)').addClass('downarrow') } } $toggler.data({'mainanchor':$this, 'menucolors':menucolors}) // store ref to menu link (which may be different from toggler if splitit == true) $dropmenu.appendTo(document.body) //move drop down menu so it's a child of document.body if ($dropmenu.length == 1){ $toggler.bind(s.triggerevt, function(e){ // action when toggler is activated clearTimeout($dropmenu.data('timer').hidetimer) var $this = $(this) var menucolors = $this.data('menucolors') // get menu colors (if data-menucolors attr defined) if (menucolors) $toggler.css('backgroundColor', menucolors[1]) $toggler.addClass('selected') // add CSS class of 'selected' to toggler var slidefunc = (e.type =='click')? 'slideToggle' : 'slideDown' if ($dropmenu.data('$activetoggler') && $dropmenu.data('$activetoggler').get(0) != $this.get(0)){ deselecttoggler($dropmenu) slidefunc = 'slideDown' } var menupos = (positionmenu(s, "toplevel", $toggler, $dropmenu)) $dropmenu.css({zIndex:++startzindex, left:menupos.left, top:menupos.top + $this.outerHeight()}) [slidefunc](s.fxduration, function(){ var $this = $(this) if ($this.css('display') == 'none') deselecttoggler($this) }) $dropmenu.data('$activetoggler', $this) return false }) // end $toggler.trigger if (s.hidetoplevelmouseout){ $toggler.bind('mouseleave', function(e){ // action when mouse rolls out of toggler $dropmenu.data('timer').hidetimer = setTimeout(function(){ hidemenu($dropmenu) }, s.hidedelay) }) } } // end if $dropmenu.length == 1 else{ // else if this button has no drop down menu $toggler.hover( function(){ $toggler.addClass('selected') if ($toggler.data('menucolors')) $toggler.css('backgroundColor', menucolors[1]) }, function(){ $toggler.removeClass('selected') if ($toggler.data('menucolors')) $toggler.css('backgroundColor', menucolors[0]) } ) } if ($dropmenu.data('isbuilt')) // if this drop down menu has been built already, move on to the next one return true $dropmenu.on('click mouseenter', function(e){ clearTimeout($dropmenu.data('timer').hidetimer) if (e.type == "mouseenter") $(this).css({zIndex: startzindex++}) else{ if ($(e.target).parent('li').hasClass('headerli')) e.stopPropagation() } }) if (s.hidetoplevelmouseout){ $dropmenu.on('mouseleave', function(e){ $dropmenu.data('timer').hidetimer = setTimeout(function(){ hidemenu($dropmenu) }, s.hidedelay) }) } var $headers = $dropmenu.find('ul').parent() $headers.each(function(i){ var $li=$(this).css({zIndex: 1000+i}).addClass('headerli') var $subul = $li.find('ul:eq(0)').css({display:'block'}) //set sub UL to "block" so we can get dimensions $subul.data('$parentliref', $li) //cache parent LI of each sub UL $subul.data('timers', {}) $li.data('$subulref', $subul) //cache sub UL of each parent LI $li.children("a:eq(0)").addClass('rightarrow') $li.bind(s.triggerevt, function(e){ //show sub UL when mouse moves over parent LI var $targetul=$(this).addClass("selected").data('$subulref') if ($targetul.queue().length<=1){ //if 1 or less queued animations clearTimeout($targetul.data('timers').hidetimer) var menupos = (positionmenu(s, "sublevel", $(this), $targetul)) $targetul.css({left: menupos.left, top: menupos.top}) $targetul.stop(true, true).slideDown(s.fxduration) } }) $li.bind('mouseleave', function(e){ //hide sub UL when mouse moves out of parent LI var $targetul=$(this).data('$subulref') clearTimeout($targetul.data('timers').showtimer) $targetul.data('timers').hidetimer=setTimeout(function(){ $targetul.stop(true, true).slideUp(s.fxduration).data('$parentliref').removeClass('selected') }, s.hidedelay) }) $subul.bind('mouseenter', function(e){ clearTimeout($(this).data('timers').hidetimer) }) }) // end $headers.each() $dropmenu.find('ul').andSelf().css({display:'none', visibility:'visible'}) //collapse all ULs again $dropmenu.data('isbuilt', true) if (!$(document).data('hidemenuevt')){ // hide top level drop down menus when user clicks on document $(document).on('click', function(e){ $('ul.splitdropdown:visible').find('ul').hide().end() .slideUp(s.fxduration, function(){ var $this = $(this) if ($this.css('display') == 'none') deselecttoggler($this) }) }) $(document).data('hidemenuevt', true) } } }) } //]]> </script>

• Simpan template...
• Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript
• Pastekan kode berikut di bawah ini didalamnya:  

<a href="#" class="splitmenubutton" data-showmenu="dropmenu1" data-splitmenu="false">wawasan spiritual dan blogging</a>
<a href="#" data-showmenu="dropmenu2" data-menucolors="navy,blue" class="splitmenubutton">All about spiritual</a>
 
 <!-- contoh markup yang berhubungan dengan  drop down menu -->
 
  <!-- Drop Down #1 -->
 
<ul id="dropmenu1" class="splitdropdown">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">jejaring sosial</a></li>
<li><a href="#">Tool</a></li>
</ul>
 
<!-- Drop Down #2 -->
 
<ul id="dropmenu2" class="splitdropdown">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li class="separator"><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">wawasan umum</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a>
<ul>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
<li><a href="#">nama sub menu</a></li>
</ul>
</li>
<li><a href="#">nama sub menu</a></li>
<li><a href="#">nama folder1 submenu</a>
<ul>
<li><a href="#">nama item folder1 submenu</a></li>
<li><a href="#">nama folder2 submenu</a>
<ul>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">nama sub menu</a></li>
</ul>

• Simpan gadget...selesai 

Ganti nama judul yang disorot warna biru dengan judul menu anda, yang disorot warna orange adalah nama warna menu dan bisa diganti dengan green atau black atau blue dll.
Ganti warna yang disorot warna merah dengan URL/Link anda
warna yang disorot warna merah tua adalah nama sub menu.

 Happy Blogging....