Style Unik Navigasi Dropdown Menu Mirip Kompas.com

Posted by : ahman " creativ" Senin, 29 Oktober 2012

Dalam posting ini menemukan sebuah coding yang unik dan cool, menu navigasi in di buat hanya dengan CSS karena memang saya menyukai CSS. Jika menu navigasi dropdown umumnya biasanya akan cendrung vertikal seperti pada tutorial yang kang salman tulis sebelum ini (Membuat Navigasi Dropdown Menu Dengan CSS), Namun dengan sedikit modifikasi kita bisa membuat menu navigasi dengan sifat dropdown yang sama seperti situs kompas.com. sudah di ucji coba di IE6 dan semuanya baik-baik saja. Bagaimana dengan kecepataannya apa memeberatkan blog? Oh tentu tidak, sebab navigasi ini di buat tanpa ada penambahan jquery sehingga tidak akan menambah loading blog Anda. Baik kalau tidak ada pertanyaan akan mulai saja tutorialnya.

1. Login ke blogger > Rancangan > Edit HTML
2. Silakan cari kode ini ]]></b:skin>
3. Copy kode berikut inidan taruh tepat di atas ]]></b:skin>

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsJdeVWtpp57xQvQGhmoYunymzhqvh027ag4NM_wzzH2dWQIeACb1xmrc-SZqujmr_QXNCIQkb0a5Kf1n4eNjaQVA5e7SOdCkFre4-zDGEF-hcEL1xlCKUn2xQsvGpTDyxzfbvFiFXpTN/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsJdeVWtpp57xQvQGhmoYunymzhqvh027ag4NM_wzzH2dWQIeACb1xmrc-SZqujmr_QXNCIQkb0a5Kf1n4eNjaQVA5e7SOdCkFre4-zDGEF-hcEL1xlCKUn2xQsvGpTDyxzfbvFiFXpTN/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}

.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJVz6fnTiiUpwwyOXBfGJSLu3-43Etvc-_P2QKweQaupkhf247mP2d_vhEe4BGsHcM8T7rPu4HJUMOgBhzxTfN77M5ULKIgINockMnlqEtWgjdq7yFHpULEQWhJJrLjqVpThPmgGi-eQj/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJVz6fnTiiUpwwyOXBfGJSLu3-43Etvc-_P2QKweQaupkhf247mP2d_vhEe4BGsHcM8T7rPu4HJUMOgBhzxTfN77M5ULKIgINockMnlqEtWgjdq7yFHpULEQWhJJrLjqVpThPmgGi-eQj/s1600/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gIVWNuxDupS141yixSmyWlc7OqR7IZoJoWcu-Jwi3iHWQFU8OOdRJBkQ5WakP53EaRRq5y_BOsEi9BE0bg-OLukeFGiPoKDjZ9_S6gGSybsWd7D4r1MJB2BRwIuV3yA2uhiO8vHIGdKp/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}

3. Lalu simpan.

Langkah 2

1. Masuk ke Rancangan > lalu Tabah Widget Baru > HTML/Javascript

Membuat Navigasi Dropdown Menu Dengan CSS

Pastekan kode di bawah ini.

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>

Setelah itu silakan di isi sesuai kebutuhan, bagi Anda yang bingung silakan baca tutorial saya tentang Cara Mengisi Menu Navigasi

Jika sudah selesai Simpan dan lihat hasilnya.

Walau bentuknya tidak mirip dengan situs kompas, tapi sifat dropdownnya mirip bukan? nah sahabat kucoba, demikianlah posting Style Unik Navigasi Dropdown Menu Mirip Kompas.com

selamat mencoba sobat !!!