Cara Membuat Menu Navigasi

Selamat malam sahabat blogger malam kali ini saya akan membahas CARA MEMBUAT MENU NAVIGASI,cara kali ini sanagat lah mudah karena kali ini saya akan berbagi dengan cara javascript yang simple tanpa harus mas bro harys mengedit html.sebelum mulai cara nya jika mas bro penasaran ddengan MENU NAVIGASI nya silakan klik di sini untuk melihat DEMO

1. Login Dashboard milik sahabat
2. Pilih HTML/JAVASCRIPT
3. Kemudian masukan kode ini di dalam nya

<div id="dimash">
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="
http://blogdimash.xtgem.com/adminarea.gif" alt="My Menu" title="Click here to open Menu" /></a>
<br/>
<style type="text/css">
#at{
position:fixed;
left:300px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:80px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:1px solid #ff0000;
background:url(http://blogdimash.xtgem.com/hitam.png) #000000 repeat center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://blogdimash.xtgem.com/hitam.png) no-repeat;">


<table
 style="background-color: rgb(0, 0, 0); width: 275px; height: 308px;"
 border="1" bordercolor="#cc0000" cellpadding="3"
 cellspacing="3">
  <tbody>
    <tr>
      <td style="height: 59px;">
      <center><a href="http://red3vil.xtgem.com/"><img
 src="http://blogdimash.xtgem.com/coollogo_com-43681747.png" alt="perbaikan"></img
></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>
   
<td style="height: 59px;">
      <center><a href="http://red3vil-666.blogspot.com" target="_blank"><img src="http://blogdimash.xtgem.com/coollogo_com-163771401.png" border="0" alt="portal"/></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>
<td style="height: 59px;">
      <center><a href="http://dim4sh.wapdale.com" target="_blank"><img src="http://blogdimash.xtgem.com/coollogo_com-43661104.png" border="0" alt="my wap"/></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>
<td style="height: 59px;">
      <center><a href="http://facebook.com/reddevil_detected" target="_blank"><img src="http://blogdimash.xtgem.com/coollogo_com-163771455.png" border="0" alt="AboutMe"/></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>
<td style="height: 59px;">
      <center><a href="http://twitter.com/dim4sh" target="_blank"><img src="http://blogdimash.xtgem.com/coollogo_com-43661189.png" border="0" alt="contact"/></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>

  </tr></tbody>

</table
></div>
</div>
<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://blogdimash.xtgem.com/cooltext533782482.gif" alt="close" title="Click here to Close Cbox" /></a></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div></div></center></div>

4. Simpan dan lihat hasilnya semoga bermanfaat...........

Artikel Terkait: