Trik Komputer: HYBRID MENU

Menu postingan kali ini yaitu MENU STYLE. Bikin menu gitoo maksudnya mah...huehuehue. Masih dari web yang terkenal mengeluarkan trik-trik CSS. Lumayan kalau dari sobat mau menambahkan menu di blognya. Yaaa...biar gaya gitoo...wkwkwkwk!!! Hasil ngubek-ngubek biasa. Sebelumnya juga BeBeN pernah memosting tentang Drop Shadow With CSS, itu juga dari sana...wkwkwkwkwk. Mau lihat demo menunya bagaimana!!! DEMO Menu Hybrid Style. Bagaimana!!! tertarik tidak nih bikinnya bagaimana???

Pertama-tama yang kita butuhkan yaitu kode CSS terlebih dahulu. Ini kode CSS yang dibutuhkan untuk bisa membuat hybrid menu.

#nav {
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...

<ul id="nav">
<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...^_^'

Trik Komputer

Selasa, 09 Februari 2010

HYBRID MENU

Tidak ada komentar:

Posting Komentar