Membuat Menu Touch Down

Tutorial cara membuat menu touch down, Lama sudah awak tidak meng-update Adri Baraka dotCom ini dan awak hanya men-sortir komentar-komentar dan dari sekian cukup banyak komentar ada yang bertanya:

Bagaimana cara membuat sub menu seperti yang ada di blog ini dan ini.

Mungkin yang di maksud adalah menu Touch Down (mendarat), sesuai dengan namanya 'mendarat' yakni menu ini akan bekerja ketika pointer mouse melintas diatas link tersebut. Yang menampilkan daftar-daftar link yang lain ke bawah.Tutorial ini kelanjutan dari cara membuat sub menu link yang erat kaitannya dg tutorial ini, karena menu touch down biasanya di letakan pada sub menu. Manfaat menu touch down ini yakni untuk menghemat ruang pada blog, sama halnya menu multi kolom yang di ciptakan untuk menghemat ruang pada blog, namun sayang menu touch down dan menu multi kolom hanya bekerja ketika di akses lewat komputer, jika di akses lewat ponsel maka tidak bisa bekerja. Tapi bagi yang ingin mencoba bolehlah, silahkan ikuti tutorial berikut.

• Pertama login ke dashboard blog kamu.
  
• Pilih Rancangan »» Edit HTML
  
• Backup template lengkap dulu dg mendownload template lengkap.
  
• Tandai kotak kecil pada Expand Widget Template
  
• Kemudian tempatkan kode CSS berikut di atas kode ]]></b:skin>
  

• #subnavbar { margin: 0; padding: 0; }
  #subnavbar ul { float: center; list-style: none; margin: 0; padding: 0; }
  #subnavbar li { list-style: none; margin: 0; padding: 0; }
  #subnavbar li a, #subnavbar li a:link, #subnavbar li a:visited { color: #bb0000; display: block; font-size: 16px; font-family: Arial, Tahoma, Verdana; font-weight: bold; text-transform: uppercase; margin: 0; padding: 4px 10px 4px; }
  #subnavbar li a:hover, #subnavbar li a:active { background: #222222; color: #FFF; margin: 0; padding: 4px 10px 4px; text-decoration: none; }
  #subnavbar li li a, #subnavbar li li a:link, #subnavbar li li a:visited { background: #222222; color: #FFF; font-size: 14px; font-family: verdana,sans-serif; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 4px 10px; border: 1px solid #ddd; }
  #subnavbar li li a:hover, #subnavbar li li a:active { background: #222222; color: #FFF; padding: 4px 10px; }
  #touch li { float: center; padding: 0; }
  #touch li ul { z-index: 9999; position: absolute; left: -999em; height: auto; margin:0; padding: 0; }
  #touch li ul a {}
  #touch li ul ul { margin: 0;}
  #touch li:hover ul ul, #touch li:hover ul ul ul, #touch li.sfhover ul ul, #touch li.sfhover ul ul ul { left: -999em; }
  #touch li:hover ul, #touch li li:hover ul, #touch li li li:hover ul, #touch li.sfhover ul, #touch li li.sfhover ul, #touch li li li.sfhover ul { left: auto; }
  #touch li:hover, #touch li.sfhover { position: static; }

• Kemudian tambahkan kode HTML berikut di bawah kode <div id='header'>
  

• <div id='subnavbar'>
  <ul id='touch'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-menu-1'>Menu-1</a>
  <ul>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-1.a'>Submenu-1.a</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-1.b'>Submenu-1.b</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-1.c'>Submenu-1.c</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-1.d'>Submenu-1.d</a></li>
  </ul></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-menu-2'>Menu-2</a>
  <ul>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-2.a'>Submenu-2.a</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-2.b'>Submenu-2.b</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-2.c'>Submenu-2.c</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-2.d'>Submenu-2.d</a></li>
  </ul></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-menu -3'>Menu-3</a>
  <ul>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-3.a'>Submenu-3.a</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-3.b'>Submenu-3.b</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-3.c'>Submenu-3.c</a></li>
  <li><a href='http://ilmutrik-tipsadribaraka.blogspot.com/link-submmenu-3.d'>Submenu-3.d</a></li>
  </ul></li>
  </ul></div>

• Terakhir SAVE TEMPLATE

Keterangan:

1. Untuk teks yang berwarna ungu merupakan alamat link, sesuaikan dg punyamu.
   
2. Untuk teks yang berwarna hijau akan di jadikan sebagai daftar menu yg akan di tampilkan.
   
3. Untuk teks yang berwarna biru yang akan di jadikan sebagai daftar sub menu /menu touch down.

Silahkan berexperimen sendiri untuk tampilan dan bentuk warna bisa di sesuaikan seleramu. Selamat berpusing ria

Sudah Baca Yang Ini..?