√ Button Menu Dengan HTML Dan Javascript

Button Menu Dengan HTML Dan Javascript

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.

Button Menu

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.

Admin

Anak UPB

Button Menu Dengan HTML Dan Javascript

Button Menu Dengan HTML Dan Javascript

Follow Us