Membuat Menu Drop Down Versi Beda

Berikut menu drop-down beda dengan postingan sebelumnya, adalah menu horizontal dengan sub-tab dan sisi kanan memiliki pencarian bulat. Menu ini berguna bagi mereka yang tidak memerlukan menu kompleks atau memilih untuk tidak menggunakan salah satu yang memerlukan script dan / atau terlalu banyak gambar, juga instalasi dan kustomisasi cukup sederhana, dan untuk top it off cukup fungsional. 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.

Ikuti langkah-langkahnya dengan hati-hati (perlahan-lahan).

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://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="#">Tool</a></li> </ul>
  <!-- Drop Down #2 -->
  <ul id="dropmenu2" class="splitdropdown"> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li class="separator"><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a> <ul> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</a></li> <li><a href="http://lesibobi.blogspot.com/search/label/Belajar%20Blog">Belajar Blog</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 / Save

• 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 (http://lesibobi.blogspot.com/search/label/Belajar%20Blog) dengan URL/Link anda
  warna yang disorot warna merah tua (Belajar Blog) adalah nama sub menu.

Demonya tidak dapat ditampilkan. Silahkan anda input code seperti yang diuraikan di atas, nanti dapat dilihat sendiri melalui preview dasar blog anda. Semoga Bermanfaat!