Cara Membuat Sub Menu Dengan JavaScript

Oleh Bernard Bryan Hayashi

Kamis, 29 Mei 2014

Bagikan :

Tweet

    Sub Menu adalah menu yang dapat bercabang cabang. Guna sub menu itu bermacam macam. Kebanyakan cara mudah membuat sub menu adalah lewat edit html, tapi Saya akan memakai cara lewat javascript. Langsung saja caranya :

• Pergi ke dasbor blogger.
• Klik Tata Letak.
• Klik tambah gadget di bagian yang ingin ditaruh sub menu.
• Pilih html/javascript.
• Masukkan kode ini :

<style>
.clear{clear:both}
.navigasi{position:relative;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0}
.navigasi ul{margin:0;padding:0}
.navigasi ul li{float:left;list-style:none;position:relative}
.navigasi ul li a{display:block;color:#404040;text-decoration:none;padding:5px}
.navigasi ul li a:hover{background:#404040;color:#fefefe}
.navigasi ul li ul{position:absolute;display:none;width:150px;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0;margin:0 auto}
.navigasi ul ul ul{display:none;position:absolute;right:-150px;top:0}
.navigasi ul li:hover > ul,.navigasi ul ul li:hover > ul{display:block}
.navigasi ul li.clear,.navigasi ul ul li{float:none}
</style>
<nav class="navigasi">
 <ul>
  <li><a href="#"></a></li>
  <li><a href="#">KATEGORI 1</a>
   <ul>
    <li><a href="#">SUB MENU 1.1</a></li>
    <li><a href="#">SUB MENU 1.2</a>
     <ul>
      <li><a href="#">SUB MENU 1.2.1</a></li>
      <li><a href="#">SUB MENU 1.2.2</a>
       <ul>
        <li><a href="#">SUB MENU 1.2.2.1</a></li>
        <li><a href="#">SUB MENU 1.2.2.2</a></li>
        <li><a href="#">SUB MENU 1.2.2.3</a></li>
        <li><a href="#">SUB MENU 1.2.2.4</a></li>
       </ul>
      </li>
      <li><a href="#">SUB MENU 1.2.3</a></li>
      <li><a href="#">SUB MENU 1.2.4</a></li>
     </ul>
    </li>
    <li><a href="#">SUB MENU 1.3</a></li>
    <li><a href="#">SUB MENU 1.4</a>
     <ul>
      <li><a href="#">SUB MENU 1.4.1</a></li>
      <li><a href="#">SUB MENU 1.4.2</a></li>
      <li><a href="#">SUB MENU 1.4.3</a></li>
      <li><a href="#">SUB MENU 1.4.4</a></li>
     </ul>
    </li>
   </ul>
  </li>
  <li><a href="#">KATEGORI 2</a>
   <ul>
    <li><a href="#">SUB MENU 2.1</a></li>
    <li><a href="#">SUB MENU 2.2</a></li>
    <li><a href="#">SUB MENU 2.3</a></li>
   </ul>
  </li>
  <li class="clear"></li>
 </ul>
</nav>

 Ganti kode yang tebal sendiri dengan judul menu dan ganti kode berwarna hijau dengan url menu.

Selesai.

   Maaf jika waktu yang diperlukan cukup lama, jangan lupa komentar. Terima kasih. 

Tag : Blog, Cara, SEMUA