Pertama-tama yang kita butuhkan yaitu kode CSS terlebih dahulu. Ini kode CSS yang dibutuhkan untuk bisa membuat hybrid menu.
margin: 0;
padding: 0;
}
#nav li.on ul, #nav li.off ul {
margin: 3px;
padding: 0;
}
#nav a {
text-decoration: none;
text-align: center;
background: #d6e3b0;
}
#nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 5px;
}
#nav li ul {
display: none;
}
/*put the subnav below*/
#nav li.off ul, #nav li.on ul {
position: absolute;
top: 33px;
*top: 44px;
left: 5px;
padding-top: 3px;
background: #d6e3b0;
height: 28px;
width: 1005px;
}
#nav li a {
color: #777777;
font-weight: bold;
display: block;
height: 15px;
width: 100px;
border: 2px solid #d6e3b0;
padding: 5px;
}
#nav li.on a {
border: 2px solid #d6e3b0;
color: #777777;
}
#nav li.on ul a, #nav li.off ul a {
float: left; /*ie doesn't inherit the float*/
border: 0;
color: #7a8566;
width: auto;
margin-right: 3px;
}
#nav li.on ul {
display: block;
}
#nav li.off:hover ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li:hover a {
background: #d6e7b0;
color: #7a8566;
}
Lumayan...^.^ Kalau sudah ada kode CSS-nya, sekarang yang kita butuhkan yaitu kode HTML-nya untuk memanggilnya. Oh iya, itu kode-kodenya letakkan sebelum/diatas kode ]]></b:skin>. Sekarang kita lanjut ke HTML-nya...
<li class="on"><a href="#">TITLE</a>
<ul>
<li><a href="#">Doyok</a></li>
<li><a href="#">Hendrie K bejo</a></li>
<li><a href="#">eRGe</a></li>
<li><a href="#">Ndafender4u</a></li>
<li><a href="#">Ocim</a></li>
<li><a href="#">Koben</a></li>
<li><a href="#">Kang Asep</a></li>
</ul></li>
<li class="off"><a href="#">TITLE1</a>
<ul>
<li><a href="#">Dian Sastro</a></li>
<li><a href="#">Neneng</a></li>
<li><a href="#">Mince</a></li>
<li><a href="#">Juleha</a></li>
</ul></li>
<li class="off"><a href="#">TITLE2</a>
<ul>
<li><a href="#">Tasik</a></li>
<li><a href="#">Bandung</a></li>
<li><a href="#">Solo</a></li>
<li><a href="#">Irian</a></li>
<li><a href="#">Gorontalo</a></li>
</ul></li>
<li class="off"><a href="#">TITLE3</a>
<ul>
<li><a href="#">Kang-Rohman</a></li>
<li><a href="#">Kendhin</a></li>
<li><a href="#">O-Om</a></li>
<li><a href="#">Yono</a></li>
<li><a href="#">Doddy</a></li>
</ul></li>
<li class="off"><a href="#">TITLE4</a>
<ul>
<li><a href="#">Lynchen</a></li>
<li><a href="#">MAX</a></li>
<li><a href="#">Ihsan</a></li>
<li><a href="#">Devny</a></li>
<li><a href="#">Ahmad</a></li>
</ul></li>
</ul>
Itu kode HTML-nya. Letakkan kode-kode tersebut didalam tag :
<body>
----- KODENYA ------
</body>
Kalau kalian mau berkreasi sedikit, letakkanlah kode HTML-nya didalam tag <body>, terus diatur-atur menurut keinginan. Yang terpenting diluar dari tag yang sudah ada di dalam HTML template sobat. Paham sukur enggak paham usaha terus sampai paham...xixixixi ^,^' Kalau mau merubah panjangnya biar sesuai dengan template sobat itu kode yang berwarna biru saja yang dioprek-oprek. Masalah warna tentu sobat sudah pada tahu apa yang harus dirubahnya toh.
Source by : www.alistapart.com. Be modified by : BeBeN
See you...^_^'
Loading... |
8 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...