Membuat Menu Dropdown Di Blogger

Posted by

Tulisan kali ini adalah lanjutan dari tulisan sebelumnya yaitu Membuat Top Menu Di Blog. Dan kali ini kita akan menambahkan menu Dropdown pada menu yang telah kita buat sebelumnya. Bagi yang belum mengikuti tulisan saya sebelumnya bisa membaca ulang di sini.

Menu Dropdown merupakan menu yang apabila kursor kita arahkan diatasnya atau jika menu tersebut diklik maka akan muncul submenu. Tampilan menu dropdown yang akan kita buat kurang lebih seperti ini:



Dan cara pembuatannya adalah
1. Seperti sebelumnya masuk ke mode edit HTML pada menu template, kemudian carti tag <nav class="menu">
2. Sisipkan kode berikut ini diantara tag <ul> dan </ul> 

... kode pada tutorial sebelumnya

<li><a class='prett' href='#'>Menu Dropdown</a>
<ul class='menus'>
 <li><a href='#'>Sub Menu 1</a></li>
 <li><a href='#'>Sub Menu 2</a></li>
 <li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>

... (kode pada tutorial sebelumnya)

Sehingga secara keseluruhan kode menu kita akan menjadi seperti ini:

<nav id='menu'>

<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
 <li><a href='/'>Home</a></li>
 <li><a href='#'>About</a></li>
 <li><a href='#'>Template Blog</a></li>
 <li><a class='prett' href='#'>Menu Dropdown</a>
 <ul class='menus'>
  <li><a href='#'>Sub Menu 1</a></li>
  <li><a href='#'>Sub Menu 2</a></li>
  <li><a href='#'>Sub Menu 3</a></li>
 </ul>
 </li>
</ul>
</nav>
Yup, itu saja. Dan sekarang Blog anda memiliki menu Dropdown. Mudah bukan?

Jangan lupa meninggalkan jejak di sini gan ... :)


klutux Updated at: 08.29

0 komentar:

Posting Komentar