Langkah untuk membuat Drop-Down Menu :
Membuat Drop Down Menu - Drop Down Menu memang sangat populer dan sangat dibutuhkan pada saat ini. Jika di blog anda terdapat banyak link dan bingung untuk menaruhnya dimana. Nah,Drop-Down Menu adalah jawabannya. Drop Down Menu yang bagus dan indah ini dibuat full CSS tanpa JS (JavaScript). Sehingga anda tidak perlu khawatir jika loading blog anda lambat.
2. Masuk ke menu
Rancangan (Design) dan pilih
Edit HTML5. Masukkan kode berikut dibawah kode <body>
<link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/>
<b:section id='menu' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
</b:section>
Kode diatas berfungsi untuk membuat sebuah JavaScript/HTML di Elemen Laman.
6. Klik Simpan Template
7. Masuk ke Elemen Laman
8. Cari Elemen Laman yang bernama Menu, kemudian klik Edit. Lihat Screenshoot !
9. Masukkan kode dibawah ini<ul class="menu">
<li class="no_drop"><a href="">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">Totto 1</a></li>
<li><a href="#">Totto 2</a></li>
<li><a href="#">Totto 3</a></li>
<li><a href="#">Totto 4</a></li>
<li><a href="#">Totto 5</a></li>
<li><a href="#">Totto 6</a></li>
<li><a href="#">Totto 7</a></li>
<li><a href="#">Totto 8</a></li>
<li><a href="#">Totto 9</a></li>
<li><a href="#">More...</a></li>
</ul>
</div></div></li>
<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">
<div class="col_1">
<h3>Totto 10</h3>
<ul>
<li><a href="#">Totto 11</a></li>
<li><a href="#">Totto 12</a></li>
<li><a href="#">Totto 13</a></li>
</ul>
</div>
<div class="col_1">
<h3>Totto 14</h3>
<ul>
<li><a href="#">Totto 15</a></li>
<li><a href="#">Totto 16</a></li>
<li><a href="#">Totto 17</a></li>
</ul>
</div>
<div class="col_1">
<h3>Totto 18</h3>
<ul>
<li><a href="#">Totto 19</a></li>
<li><a href="#">Totto 20</a></li>
<li><a href="#">Totto 21</a></li>
</ul>
</div>
<div class="col_1">
<h3>Totto 22</h3>
<ul>
<li><a href="#">Totto 23</a></li>
<li><a href="#">Totto 24</a></li>
<li><a href="#">Totto 25</a></li>
</ul>
</div></div></li></ul>
Ganti kode # dengan URL tujuan. Ganti Totto 1, Totto 2, Totto 3, Totto... dengan anchor teks dari URL tersebut.
10. Kemudian Klik Simpan
No comments:
Post a Comment