Trik Pasang Menu Navigasi Bercabang
Trisatya Blog.Menu Navigasi bercabang (dropdow menu) adalah menu navigasi yang berfungsi untuk menghubungkan link satu dengan link lainnya, biasanya diletakan dibawah atau diatas header, seperti contoh berikut :
untuk membuatnya sebagai berikut :
1. Login ke dasbor ---> tata letak ---> edit HTML (centang : expand template widget)
2. Cari kode berikut :
]]></b:skin>
3. Kopy paste kode dibawah ini diatas kode tadi :
/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i40.tinypic.com/21bnh2e.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 50);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#330000; text-decoration:none; font:13px Verdana, Arial, Helvetica, sans-serif; background:url(http://i40.tinypic.com/21bnh2e.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#330000;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#330000;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:0px dotted #fff; background:LightSkyBlue; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#00CCFF;}
.status-msg-wrap{
display:none;
}
4. Simpan lalu masuk ke ---> Tata letak ---> klik tambah gaddget yang ada dibawah header blog.
Lalu pilih HTLM/JavaScript, setelah muncul jendela JavaScript, kopy paste kode berikut :
<div id="menu">
<ul>
<li><a class="active" href="/"> Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<ul>
</ul>
</ul></div>
Lalu Simpan, tanpa diberi judul diatasnya.
catatan untuk kode "#" isi dengan alamat url target anda (lihat gamabar paling bawah), tanda petiknya jangan di hilangkan dan tulisan Menu, menu 1, menu 2 dst silahkan isi sesuai kehendak. misalnya :
a. untuk yang tunggal (Tulisan 'Menu1" saja)
<li><a href="#">Menu1 </a></li> dirubah kodenya, menjadi :
<li><a href="http.www.mapasanda.co.cc/2010/01/tentang-saya.html">Tentang Saya</a></li>
b. untuk yang bercabang (tulisan "menu2, menu3 dst)
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
dirubah kodenya menjadi :
<li><a href="http.www.mapasanda.co.cc/">Tutorial</a>
<ul>
<li><a href="http.www.mapasanda.co.cc/2010/05/tutorial-blog">Tutorial Blog</a></li>
<li><a href="http.www.mapasanda.co.cc/2010/10/tutorial-komputer">Tutorial Komputer</a></li>
</ul></li>dan seterusnya lalu simpan
untuk mendapatkan alamat URL target cukup melihat diatas browser anda, seperti gambar dibawah ini :
semoga bermanfaat
Artikel Unik dan menarik lainnya :
- 1.kumpulan dari gambar yang ngakak abiz !!
- 2.Kumpulan gambar-gambar aneh dan sulit diterima akal
- 3.kumpulan barang dengan design yang inspiratif dan kreatif
- 4.kumpulan Kendaraan keren yang unik & inovatif
- 5.Kumpulan karya Fotography yang Menakjubkan
- 6.Kumpulan foto-foto keren cewek bertato
ARTIKEL LAINNYA :
TRIK WINDOWS============================
DESIGN========================================
INTERNET==================================
SECURITY======================================
EARN $==================================
Boleh nih dicoba.. soalnya punyaku gak ada menunya hehe..
ReplyDeleteBlog ni bagus2 isinya cuman adFlynya sedikit mengganggu. sampai muncul 2 kali..
Kunjung juga:
http://nomor2.blogspot.com/
hahaha sip gan.....
ReplyDeleteKlo gk diklik ya adfly muncul terus gan...
adfly merupakan bentuk kontribusi dari pembaca..,,