Wawasan spiritual dan blogging: 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>

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

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

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 22.39

8 komentar:

Imron Fhatoni15 Mei 2013 pukul 10.46
wachhh menu yang sangat menarik....
keren mas....
salam blogger....
BalasHapus
Balasan
Anonim17 Mei 2013 pukul 06.54
wah akan lebih cantik blog ini jika pake Drop down menu terpisah seperti artikel ini :) https://lh3.googleusercontent.com/-HvxDJjRjy4Y/UZVw6puGA8I/AAAAAAAAAUg/sh_i97R2Py0/w421-h243-no/menu.jpg
BalasHapus
Balasan
Rezpector Pamekasan (MADURA)28 Mei 2013 pukul 12.21
cara di atas untuk semua template yah mz ...
mohon bantuan.na .
salam blogger (y)
BalasHapus
Balasan
jalupangna28 Mei 2013 pukul 15.19
Saya rasa bisa kita implementasikan menu dropdown ini untuk semua template, cuma cocok atau tidaknya saja kita terapkan diblog. Alaikassalaam..
BalasHapus
Balasan
Unknown14 Juli 2013 pukul 15.08
Terlalu lebar kesamping kanan-kirinya ,
cara menyesuaikan yg di EDIT yg mana?
tolong
BalasHapus
Balasan

Tambahkan komentar

14 Mei 2013

Cara membuat drop down menu terpisah versi 2

Jalupangna

8 komentar:

Popular Posts

Blog Archive

Label

Recent Comment

Followers