PULAU KAUNG SELALU BERSINAR: 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..

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>

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>





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



<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

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll

Sobat sedang membaca artikel tentang Cara membuat drop down menu terpisah versi 2. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

<a href="https://hasil2.blogspot.com/2013/06/cara-membuat-drop-down-menu-terpisah.html" target="_blank"> Cara membuat drop down menu terpisah versi 2</a>

:: Get this widget ! ::

PULAU KAUNG SELALU BERSINAR

Pages

home pagee

Cara membuat drop down menu terpisah versi 2

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll

Related Posts

No comments:

Post a Comment

online

online