Cara membuat button menu ini sangatlah simple dan sederhana. Jika dijalankan yang tampil hanyalah button yang berisikan tulisan Klik Here. Disini ada 3 buah sub button menu yang disembunyikan dan ketiga submenu akan muncul apabila button di klik. Tiap-tiap sub menu akan menuju link masing-masing apabila di klik. Sobat bisa merubah warna dan link yang dituju sesuai dengan keinginan sobat.
Langsung saja dipraktekin yah... Kopi script dibawah dan simpan sebagai dokumen html.
<html>
<head>
<title></title>
</head>
<body>
<div id="MainFrame" style="LEFT: 5px; POSITION: absolute; TOP: 5px;">
<div id="first" style="LEFT: 0px; POSITION: relative; top: 0px; cursor: default; background-color: #00CCFF; layer-background-color: #00CCFF; border: 1px none #000000; color: #FF0000; font-weight: bold; border-color: #00FF00; border-width: 4px; 2px;2px;2px;border-style: outset; padding: 2px; margin: 2px; text-align: center;" onClick="Go()" onMouseDown="ButtonEff(1,'down')" onMouseUp="ButtonEff(1,'up')" onMouseOver="OverEff(1,'over')" onMouseOut="OverEff(1,'out')">Click Here!</div>
<div id="second" style="LEFT: -300px; POSITION: relative; top: -1px; cursor: default; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; color: #0000FF; font-weight: bold; border-color: #FFFF00; border-width: 4px; 2px;2px;2px;border-style: outset; padding: 2px; margin: 2px;" onClick="Load(1)" onMouseDown="ButtonEff(2,'down')" onMouseUp="ButtonEff(2,'up')" onMouseOver="OverEff(2,'over')" onMouseOut="OverEff(2,'out')">http://yaldex.com</div>
<div id="third" style="LEFT: -400px; POSITION: relative; top: -2px; cursor: default; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; color: #0000FF; font-weight: bold; border-color: #FFFF00; border-width: 4px; 2px;2px;2px;border-style: outset; padding: 2px; margin: 2px;" onClick="Load(2)" onMouseDown="ButtonEff(3,'down')" onMouseUp="ButtonEff(3,'up')" onMouseOver="OverEff(3,'over')" onMouseOut="OverEff(3,'out')">http://google.com</div>
<div id="fourth" style="LEFT: -500px; POSITION: relative; top: -3px; cursor: default; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; color: #0000FF; font-weight: bold; border-color: #FFFF00; border-width: 4px; 2px;2px;2px;border-style: outset; padding: 2px; margin: 2px;" onClick="Load(3)" onMouseDown="ButtonEff(4,'down')" onMouseUp="ButtonEff(4,'up')" onMouseOver="OverEff(4,'over')" onMouseOut="OverEff(4,'out')">http://yahoo.com</div>
</div>
<script>
var i = - 300;
var j = - 400;
var k = - 500;
var SlideIn = false;
function ButtonEff( Nb, state )
{
if ( state == 'up' )
{
if ( Nb == 1 )
{
document.getElementById( "first" ).style.borderStyle = "outset"
}
if ( Nb == 2 )
{
document.getElementById( "second" ).style.borderStyle = "outset"
}
if ( Nb == 3 )
{
document.getElementById( "third" ).style.borderStyle = "outset"
}
if ( Nb == 4 )
{
document.getElementById( "fourth" ).style.borderStyle = "outset"
}
}
if ( state == 'down' )
{
if ( Nb == 1 )
{
document.getElementById( "first" ).style.borderStyle = "inset"
}
if ( Nb == 2 )
{
document.getElementById( "second" ).style.borderStyle = "inset"
}
if ( Nb == 3 )
{
document.getElementById( "third" ).style.borderStyle = "inset"
}
if ( Nb == 4 )
{
document.getElementById( "fourth" ).style.borderStyle = "inset"
}
}
}
// ---------------------------------------
function OverEff( Nb, Ovstate )
{
if ( Ovstate == 'over' )
{
if ( Nb == 1 )
{
document.getElementById( "first" ).style.color = "#00CCFF";
document.getElementById( "first" ).style.backgroundColor = "red";
}
if ( Nb == 2 )
{
document.getElementById( "second" ).style.color = "#00FF00";
document.getElementById( "second" ).style.backgroundColor = "#0000FF";
}
if ( Nb == 3 )
{
document.getElementById( "third" ).style.color = "#00FF00";
document.getElementById( "third" ).style.backgroundColor = "#0000FF";
}
if ( Nb == 4 )
{
document.getElementById( "fourth" ).style.color = "#00FF00";
document.getElementById( "fourth" ).style.backgroundColor = "#0000FF";
}
}
if ( Ovstate == 'out' )
{
if ( Nb == 1 )
{
document.getElementById( "first" ).style.color = "red";
document.getElementById( "first" ).style.backgroundColor = "#00CCFF";
}
if ( Nb == 2 )
{
document.getElementById( "second" ).style.color = "#0000FF";
document.getElementById( "second" ).style.backgroundColor = "#00FF00";
}
if ( Nb == 3 )
{
document.getElementById( "third" ).style.color = "#0000FF";
document.getElementById( "third" ).style.backgroundColor = "#00FF00";
}
if ( Nb == 4 )
{
document.getElementById( "fourth" ).style.color = "#0000FF";
document.getElementById( "fourth" ).style.backgroundColor = "#00FF00";
}
}
}
// ---------------------------------------
function DoIt()
{
if ( i < 0 )
{
i += 4;
document.getElementById( "second" ).style.left = i;
}
if ( j < 0 )
{
j += 4;
document.getElementById( "third" ).style.left = j;
}
if ( k < 0 )
{
k += 4;
document.getElementById( "fourth" ).style.left = k;
}
if ( ( k == 0 ) || ( SlideIn == false ) )
{
clearInterval( Over );
}
}
// ---------------------------------------
function ReversIt()
{
if ( ( i > - 300 ) && ( j < - 100 ) && ( k < - 200 ) )
{
i -= 4;
document.getElementById( "second" ).style.left = i;
}
if ( ( j > - 400 ) && ( k < - 200 ) )
{
j -= 4;
document.getElementById( "third" ).style.left = j;
}
if ( k > - 500 )
{
k -= 4;
document.getElementById( "fourth" ).style.left = k;
}
if ( ( k == - 500 ) || ( SlideIn == true ) )
{
clearInterval( Out );
}
}
// ---------------------------------------
function Go()
{
SlideIn = ! SlideIn;
if( SlideIn == true )
{
Over = setInterval( "DoIt()", 1 );
}
else
{
Out = setInterval( "ReversIt()", 1 );
}
}
// ---------------------------------------
function Load( Nb )
{
if ( Nb == 1 )
{
window.location = "http://yaldex.com";
}
if ( Nb == 2 )
{
window.location = "http://google.com";
}
if ( Nb == 3 )
{
window.location = "http://yahoo.com";
}
}
</script>
</body>
</html>
Bagaimana, gampang bukan... Silahkan di otak-atik biar lebih mahir lagi. Selamat berkarya.
Artikel keren lainnya:
Belum ada tanggapan untuk "Membuat Button Menu Dengan HTML Dan Javascript"
Post a Comment