Your Ad Here

Cara Membuat Flex Drop Down Menu Pada Blog.



Cara Membuat Flex  Drop Down Menu Pada BlogSetelah beberapa hari off dari dunia perblogingan dikarenakan tidak memiliki bahan atau ide untuk diposting, kini saya kembali dengan membahas tutorial lagi hehehe...:D

Pada kesempatan kali ini saya ingin berbagi untuk para sobat Blogger pemula tentang cara memasang atau membuat "Flex Drop Down Menu", untuk dipasang pada blog milik sobat.

Fungsi dari "Flex Drop Down Menu" itu sendiri, menurut saya sich untuk menghemat tempat apabila pada blog sobat memiliki banyak link yang terpasang. Sehingga terlihat memanjang kebawah dan kurang enak untuk dilihat, dengan cara ini kita bisa mengakali masalah tersebut hehehe...:D

Ok dech langsung menuju topik utamanya yach, dan apabila sobat ingin memasangnya silakan ikuti langkah-langkah berikut...

Langkah pertama silakan sobat buat css eksternal dengan menggunakan code dibawah ini, dan beri nama terserah.css





.flexdropdownmenu, .flexdropdownmenu ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}


.flexdropdownmenu li{
position: relative;
}

.flexdropdownmenu li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: #fae7a9;
border-bottom: 1px solid black;
text-decoration: none;
padding: 4px 5px;
}

* html .flexdropdownmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a{
background: #F0CE7D;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}


Setelah selesai silakan sobat upload file terserah.css tersebut pada hosting yang sobat gunakan, kemudian ambil URLnya.

Langkah yang kedua silakan sobat buat js eksternal menggunakan code dibawah ini, beri nama terserah.js kemudian ikuti langkah seperti yang pertama...





/* Flex Level Drop Down Menu v1.1
* Created: Jan 5th, 2010 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* Tweaked by Rchymera at http://www.rchymera.blogspot.com
*/

//Version 1.1 (Feb 19th, 2010): Each flex menu (UL) can now be associated with a link dynamically, and/or defined using JavaScript instead of as markup.

//Usage: $(elementselector).addflexmenu('menuid', options)
//ie:
//jQuery(document).ready(function($){
//$('a.mylinks').addflexmenu('flexmenu1') //apply flex menu with ID "flexmenu1" to links with class="mylinks"
//})

jQuery.noConflict()

var flexdropdownmenu={
arrowpath: 'arrow.gif', //full URL or path to arrow image
animspeed: 200, //reveal animation speed (in milliseconds)
showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds

//***** NO NEED TO EDIT BEYOND HERE
startzindex:1000,
builtflexmenuids: [], //ids of flex menus already built (to prevent repeated building of same flex menu)

positionul:function($, $ul, e, $anchor){
var istoplevel=$ul.hasClass('jqflexmenu') //Bool indicating whether $ul is top level flex menu DIV
var docrightedge=$(document).scrollLeft()+$(window).width()-40 //40 is to account for shadows in FF
var docbottomedge=$(document).scrollTop()+$(window).height()-40
if (istoplevel){ //if main flex menu DIV
var offsets=$anchor.offset()
var anchorsetting=$anchor.data('setting')
var x=offsets.left+anchorsetting.useroffsets[0]+(anchorsetting.dir=="h"? $anchor.outerWidth() : 0) //x pos of main flex menu UL
var y=offsets.top+anchorsetting.useroffsets[1]+(anchorsetting.dir=="h"? 0 : $anchor.outerHeight())
x=(x+$ul.data('dimensions').w > docrightedge)? x-(anchorsetting.useroffsets[0]*2)-$ul.data('dimensions').w+$anchor.outerWidth()+(anchorsetting.dir=="h"? -($anchor.outerWidth()*2) : 0) : x //if not enough horizontal room to the ridge of the cursor
y=(y+$ul.data('dimensions').h > docbottomedge)? y-(anchorsetting.useroffsets[1]*2)-$ul.data('dimensions').h-$anchor.outerHeight()+(anchorsetting.dir=="h"? ($anchor.outerHeight()*2) : 0) : y
}
else{ //if sub level flex menu UL
var $parentli=$ul.data('$parentliref')
var parentlioffset=$parentli.offset()
var x=$ul.data('dimensions').parentliw //x pos of sub UL
var y=0
x=(parentlioffset.left+x+$ul.data('dimensions').w > docrightedge)? x-$ul.data('dimensions').parentliw-$ul.data('dimensions').w : x //if not enough horizontal room to the ridge parent LI
y=(parentlioffset.top+$ul.data('dimensions').h > docbottomedge)? y-$ul.data('dimensions').h+$ul.data('dimensions').parentlih : y
}
$ul.css({left:x, top:y})
},

showbox:function($, $flexmenu, e){
clearTimeout($flexmenu.data('timers').hidetimer)
$flexmenu.data('timers').showtimer=setTimeout(function(){$flexmenu.show(flexdropdownmenu.animspeed)}, this.showhidedelay[0])
},

hidebox:function($, $flexmenu){
clearTimeout($flexmenu.data('timers').showtimer)
$flexmenu.data('timers').hidetimer=setTimeout(function(){$flexmenu.hide(100)}, this.showhidedelay[1]) //hide flex menu plus all of its sub ULs
},


buildflexmenu:function($, $menu, $target){
$menu.css({display:'block', visibility:'hidden', zIndex:this.startzindex}).addClass('jqflexmenu').appendTo(document.body)
$menu.bind('mouseenter', function(){
clearTimeout($menu.data('timers').hidetimer)
})
$menu.bind('mouseleave', function(){ //hide menu when mouse moves out of it
flexdropdownmenu.hidebox($, $menu)
})
$menu.data('dimensions', {w:$menu.outerWidth(), h:$menu.outerHeight()}) //remember main menu's dimensions
$menu.data('timers', {})
var $lis=$menu.find("ul").parent() //find all LIs within menu with a sub UL
$lis.each(function(i){
var $li=$(this).css({zIndex: 1000+i})
var $subul=$li.find('ul:eq(0)').css({display:'block'}) //set sub UL to "block" so we can get dimensions
$subul.data('dimensions', {w:$subul.outerWidth(), h:$subul.outerHeight(), parentliw:this.offsetWidth, parentlih:this.offsetHeight})
$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)").append( //add arrow images
'<img src="'+flexdropdownmenu.arrowpath+'" class="rightarrowclass" style="border:0;" />'
)
$li.bind('mouseenter', function(e){ //show sub UL when mouse moves over parent LI
var $targetul=$(this).css('zIndex', ++flexdropdownmenu.startzindex).addClass("selected").data('$subulref')
if ($targetul.queue().length<=1){ //if 1 or less queued animations
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer=setTimeout(function(){
flexdropdownmenu.positionul($, $targetul, e)
$targetul.show(flexdropdownmenu.animspeed)
}, flexdropdownmenu.showhidedelay[0])
}
})
$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.hide(100).data('$parentliref').removeClass('selected')}, flexdropdownmenu.showhidedelay[1])
})
})
$menu.find('ul').andSelf().css({display:'none', visibility:'visible'}) //collapse all ULs again
this.builtflexmenuids.push($menu.get(0).id) //remember id of flex menu that was just built
},



init:function($, $target, $flexmenu){
if (this.builtflexmenuids.length==0){ //only bind click event to document once
$(document).bind("click", function(e){
if (e.button==0){ //hide all flex menus (and their sub ULs) when left mouse button is clicked
$('.jqflexmenu').find('ul').andSelf().hide()
}
})
}
if (jQuery.inArray($flexmenu.get(0).id, this.builtflexmenuids)==-1) //if this flex menu hasn't been built yet
this.buildflexmenu($, $flexmenu, $target)
if ($target.parents().filter('ul.jqflexmenu').length>0) //if $target matches an element within the flex menu markup, don't bind onflexmenu to that element
return
var useroffsets=$target.attr('data-offsets')? $target.attr('data-offsets').split(',') : [0,0] //get additional user offsets of menu
useroffsets=[parseInt(useroffsets[0]), parseInt(useroffsets[1])]
$target.data('setting', {dir: $target.attr('data-dir'), useroffsets: useroffsets}) //store direction (drop right or down) of menu plus user offsets
$target.bind("mouseenter", function(e){
$flexmenu.css('zIndex', ++flexdropdownmenu.startzindex)
flexdropdownmenu.positionul($, $flexmenu, e, $target)
flexdropdownmenu.showbox($, $flexmenu, e)
})
$target.bind("mouseleave", function(e){
flexdropdownmenu.hidebox($, $flexmenu)
})
}
}

jQuery.fn.addflexmenu=function(flexmenuid, options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $target=$(this)
if (typeof options=="object"){ //if options parameter defined
if (options.dir)
$target.attr('data-dir', options.dir) //set/overwrite data-dir attr with defined value
if (options.offsets)
$target.attr('data-offsets', options.offsets) //set/overwrite data-offsets attr with defined value
}
if ($('#'+flexmenuid).length==1) //check flex menu is defined
flexdropdownmenu.init($, $target, $('#'+flexmenuid))
})
};

//By default, add flex menu to anchor links with attribute "data-flexmenu"
jQuery(document).ready(function($){
var $anchors=$('*[data-flexmenu]')
$anchors.each(function(){
$(this).addflexmenu(this.getAttribute('data-flexmenu'))
})
})


//ddlistmenu: Function to define a UL list menu dynamically

function ddlistmenu(id, className){
var menu=document.createElement('ul')
if (id)
menu.id=id
if (className)
menu.className=className
this.menu=menu
}

ddlistmenu.prototype={
addItem:function(url, text, target){
var li=document.createElement('li')
li.innerHTML='<a href="'+url+'" target="'+target+'">'+text+'</a>'
this.menu.appendChild(li)
this.li=li
return this
},
addSubMenu:function(){
var s=new ddlistmenu(null, null)
this.li.appendChild(s.menu)
return s

}
}


Langkah ketiga silakan sobat login kedalam blog sobat, kemudian masuk bagian edit HTML cari code ]]></b:skin> dan letakkan code dibawah ini tepat dibawahnya...
<link rel="stylesheet" type="text/css" href="URL TERSERAH.CSS" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="URL TERSERAH.JS">

/***********************************************
* Flex Level Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
Apabila setelah selesai silakan sobat tekan tombol save.

Langkah yang terakhir silakan sobat klik bagian design dan tambahkan widget HTML/Javascript, kemudian masukkan code dibawah ini...
<li><p style="text-align:left"><a href="#" data-flexmenu="flexmenu1" data-dir="h" data-offsets="8,0">Nama Target Utama</a></p></li>
<!--HTML for Flex Drop Down Menu 2-->
<ul id="flexmenu1" class="flexdropdownmenu">
<li><a href="URL Situs Target">Nama Situs Target</a></li>
<li><a href="URL Situs Target">Nama Situs Target</a></li>
<li><a href="URL Situs Target">Nama Situs Target</a></li>
<li><a href="URL Situs Target">Nama Situs Target</a></li>
</ul>
<li><p style="text-align:left"><a href="#" data-flexmenu="flexmenu2" data-dir="h" data-offsets="8,0">Nama Target Utama</a></p></li>
<ul id="flexmenu2" class="flexdropdownmenu">
<li><a href="URL Situs Target">Nama Situs Target</a></li>
</ul>
Apabila sobat ingin mengganti silakan ganti pada bagian yang saya beri warna, dan bila sobat ingin menambahkan menunya silakan tambahkan dan urutkan angka pada bagian "flexmenu..." berwarna merah.

Sekian dari saya dan selamat bertweaking ria, serta kembangkan menurut kreasi sobat. Apabila sobat ingin melihat previewnya coba arahkan cursor pada widget specials link blog saya, kalau sobat ingin mencoba full codenya silakan main-main kesini (Pencet keras-keras), selamat mencoba dan semoga berguna...:D

Share to:

Related Post:

30 Response to "Cara Membuat Flex Drop Down Menu Pada Blog."

  1. Pak Liek says:

    masih bingung ...
    ntar balik lagi kalau otak dha encer ...

    @Paklik : Silakan jalan2 dulu Paklik untuk leplesing biar otak tambah encer xixixi...:D

    tomo says:

    Thanks nih gan tutornya.
    Tar dicoba dl y

    uswah says:

    Berkunjung

    tomo says:

    Sip gan tutornya

    tomo says:

    Masih belum ngerti juga.upload file css melalui hosting tu gmana maksudnya dan caranya.ambil urlny dmana.
    Maksh bnyk gan tutorny

    Wah, ada css dan js
    pelajari dulu deh

    Rizky2009 says:

    puanjang bget sob scripnya, tapi meski scriptnya panjang kanya simple juga hasilnya

    akhatam says:

    Wahh dinamiss yaw menunya.. dah liatt... kerenn!!!

    thanks gan tipsnya... akan di pakai pas postingan yaw.. hehe

    Pak Liek says:

    pak liek sekarang sudah ngerti fungsinya ...
    tapi masih bingung belum nemukan yang cocok pakai menu tersebut ...



    "Rindu Terpendam"

    attayaya says:

    siiiiiiiiiip mau kupakai untuk blog satu lagi
    tengkyu ya bro

    Thanks infonya Mas...

    oke deh aku save :)

    Mufi_ed says:

    keren !!!!!

    sukses selalu dah buat mu sob !!!

    admin says:

    thanks udah mau bagi2 ilmu, tapi kl bisa tampilin juga hasil jadinya bos !!!

    wow, artikel ny berguna bgt nih sob.. cocok bgt bwt mnmbh wawasan ku seputar tema ini..

    sob, mengingt blog ni sngt bermanfaat bgt q.. tukeran link yok!!

    link blog kamu sudah terpasang di blogku, link balik yach :) silahkan di liat di blogku!!

    ntar pasang link ku dengan anchor text "Naruto Soundtrack" yach,

    dan jdi follower q juga y, siapa thu aja dgn kehadiran blogger se-hebat kamu, blog ku bisa
    sedikit rame dan berwibawa gtu.he3

    ntar secara berkala q bakal sering-2 silaturahmi kesini..

    d tunggu kehdirannya yach :D

    salam dari blogger indonesia setengah bule.he3

    makasih..

    link sdh di psang, silahkan di cek, link balik yah..

    oke,link anda sdh terpasang gan.. link balik yah. thanks

    Rchymera says:

    @Admin : Nah ada yg kgk nyimak nich hasilnya kan sdh ada pada widget spesial link sebelah kanan, btw makasih kunjungannya sobat...:D

    @Naruto Soundtrack : Ok2 ntar klo ada waktu akan segera dipasang,mohon maaf sebelumnya bila telat...:D

    puasa tlah memasuki hari ke 16, smoga kita semua di beri kekuatan sehingga dapat bertahan sampai hari kemenangan tiba. amin! selamat menajalankan ibadah puasa.

    Mantap sob...

    anton says:

    Gan, mau tukeran link ma ane gk? kalau mau, komen di shoutmix ane ya di antonkurosaki.blogspot.com
    iklannya udah saya klik. nanti klik iklan di blog saya ya!!
    Gan, mau nanya nih. kalau misalnya saya mau ngeposin hasil posan kamu di blog saya, aturan mainnya gimana? di tunggu balesannya di blogku

    ashoel says:

    walah...langkah terakhir tuh membingungkan-----> Langkah yang terakhir silakan sobat klik bagian design dan tambahkan widget HTML/Javascript, kemudian masukkan code dibawah ini...

    yg dlik yg mana bang??? ga ketemu tombolnya tuh kkkkkkkkkk

    Aisyah says:

    duch,,, pusing ka.. blom paham... ajarin dunk./.

    Wah,,,,wah,,,wah,,
    Lama gk ktemu, kog udah punya rumah baru neh,,,
    Makin kaya aja sodara we yg satu ni ya,,,
    Beli rumah baru gk ngomong2,,,

    Salam kenal, trims teman selayaknya begini untuk mencerdaskan bangsa, bagi2 ilmu untuk semua, sekali lagi terima kasih buatmu.

    sky says:

    keren

    victz says:

    Busyet, agak rumit juga kode2 nya, tapi dicoba dl deh, nice bang

    thanks atas infonya yang bermanfaat, salam kenal

Post a Comment

Sudah baca jangan lupa tinggalin komentarnya yach friend's tanpa kalian semua saya bukanlah apa-apa,thanks...:-)

Powered by Blogger