Cara Membuat Pop Up Menu

Cara Membuat Pop Up Menu yang mungkin merupakan tampilan sederhana namun juga mempunyai daya tarik sendiri. Pop Up Menu ini akan menampilkan beberapa pilihan menu pada mini screen tersendiri, kira-kira tampilannya mirip tool tip. Kelebihannya mempunyai tampilan mungil dan dapat ditempatkan dimana saja, karena ane membuatnya menjadi widget yang dapat anda tempatkan di sidebar atau dimana anda inginkan alias sesuaka anda (ente senang ane pun senang...hehehheeee). Pop Up Menu ini di kembangkan oleh dynamicdrive. Contohnya bisa anda lihat di sidebar kanan paling atas (Tutorial Pilihan). Ok gak usah terlalu banyak basa-basinya gan, langsung saja kita lanjut kepada cara pembuatannya. Ikuti langkah berikut.

• Log in ke blog anda
• Klik Rancangan
• Klik Edit HTML
• Tempatkan Kode CSS berikut di atas kode ]]></b:skin> 

#popitmenu{ position: absolute; background-color: #E0ECF8; border:1px solid black; font: normal 12px Verdana; line-height: 18px; z-index: 100; visibility: hidden; } #popitmenu a{ text-decoration: none; padding-left: 6px; color: black; display: block; } #popitmenu a:hover{ /*hover background color*/ background-color: #CCFF9D; }

• Selanjutnya Klik Rancangan lagi
• Klik Tambah Gadget
• Pilih HTML /JavaScript
• Masukkan kode berikut ke dalamnya

<a href="#" onmouseover="showmenu(event,linkset[0])" onmouseout="delayhidemenu()"><button>Atribut</button></a><br />
<a href="#" onmouseover="showmenu(event,linkset[1], '180px')" onmouseout="delayhidemenu()"><button>Tutorial Pilihan Bulan Ini</button></a>
/* silahkan ganti tulisan merah dengan judul anda */
<script type="text/javascript">

var defaultMenuWidth="150px" /* ukuran lebar kolom tampilan. silahkan ganti 150px dengan keinginan anda */

var linkset=new Array()
///* linkset 1 dengan kode 0 *///
linkset[0]='<a href="http://www.pingler.com/" target="_blank">Pingler</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a href="http://pingomatic.com/" target="_blank">Pingomatic</a>'
linkset[0]+='<a href="http://www.blogcrowds.com/resources/parse_html.php" target="_blank">Blogcrowds</a>'
linkset[0]+='<a href="http://html-color-codes.info/" target="_blank">Color Code</a>'
linkset[0]+='<a href="http://www.google.com/support/news_pub/bin/answer.py?hl=en&answer=191208&rd=1" target="_blank">Google News Suggest</a>'
/* silahkan ganti tulisan merah dengan alamat link dan judul anda */
 ///* linkset 2 dengan kode 1 *///
linkset[1]='<a href="http://blogonol.blogspot.com/2011/02/cara-membuat-pop-up-menu.html">Pop Up Menu</a>'
linkset[1]+='<a href="http://blogonol.blogspot.com/2011/02/cara-membuat-accordion-menu-daftar-isi.html">Accordion Menu</a>'
linkset[1]+='<a href="http://blogonol.blogspot.com/2011/02/cara-membuat-tab-menu-virtual.html">Virtual Pagination 1</a>'
linkset[1]+='<a href="http://blogonol.blogspot.com/2011/02/cara-modifikasi-tab-menu-vp-1.html">Virtual Pagination 2</a>'
linkset[1]+='<a href="http://blogonol.blogspot.com/2011/02/cara-modifikasi-tab-menu-vp-2_2895.html">Virtual Pagination 3</a>'
/* silahkan ganti tulisan merah dengan alamat link posting dan judul anda. kalau anda hanya ingin menampilkan satu Pop Up Menu, hapus kode linkset 2 dengan kode 1 sampai kebagian ini */
///* bagian di bawah ini jangan di edit *///

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>

• Simpan Template

Posted in: Belajar Nge-Blog