Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas

Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas - Dalam postingan kali ini Master Chef akan share tetang Cara Membuat Dropdown Menu dengan gaya seperti pada Web Kompas.com. Navigasi Dropdown memang banyak digemari oleh para blogger karena dropdown dapat menghemat banyak tempat dan menyediakan banyak tempat untuk berbagai kat gori. Navigasi yang akan kita buat seperti pada gambar dibawah ini.

Jauh sebelum postingan ini Master Chef juga sudah pernah membahas Cara membuat Menu Dropdown Horizontal. Cara yang digunakan untuk memasang Menu Dropdwon ala kompas ini tidak jau berbeda dengan cara sebelumnya. Ok langsung saja, berikut cara Memasang Menu Navigasi Ala Kompas.com

1. Login Ke blogger anda
2. Masuk ke halaman Edit HTML dengan cara, Dari dashboard pilih Template --> Edit HTML --> Proses/lanjutkan ( Baca selengkapnya Cara mengakses halaman Edit HTML)
3. Download Lengkap Template  blog terlebih dahulu untuk antisipasi kesalanan (Baca selengkapnya Cara Back-up dan Upload template blog)
4. Sekarang Cari Kode ]]></b:skin> (Gunakan CTRL + F dan F3 untuk mempermudah pencarian)
5. Setelah Ketemu Copas kode berikut dan letakan diatas kode ]]></b:skin>

 .nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62FnAlI8sLD0s1nzW16ICI8oQfEKEtrmvU-3z3XKerDV8wWTjh-V4r0wbTO-L5afWbJ4SdCvpc_HpguHiiGpLZ9tKP9ytLUzYr8WjyJ5l14zGHbFi6Es0qm_xy_ZI6Mrt9KQd9oOvr8Xc/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/AVvXsEj62FnAlI8sLD0s1nzW16ICI8oQfEKEtrmvU-3z3XKerDV8wWTjh-V4r0wbTO-L5afWbJ4SdCvpc_HpguHiiGpLZ9tKP9ytLUzYr8WjyJ5l14zGHbFi6Es0qm_xy_ZI6Mrt9KQd9oOvr8Xc/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/AVvXsEhMTqnjfbehWmxKAn6P-Hh7xHuTYOwPCiD3bKIFcQkkHzL1WfOGy9D1yV8cODiNy4SMDX2_YgN6hmPCm_FPwLgN47aTAIy0DvaD7ume5SG4umRUbhQ-gUTXJ92m3sl9dbv5qJ-JX2-NCU1n/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/AVvXsEhMTqnjfbehWmxKAn6P-Hh7xHuTYOwPCiD3bKIFcQkkHzL1WfOGy9D1yV8cODiNy4SMDX2_YgN6hmPCm_FPwLgN47aTAIy0DvaD7ume5SG4umRUbhQ-gUTXJ92m3sl9dbv5qJ-JX2-NCU1n/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/AVvXsEhcyG_KL8pDa3KIS9jdG3eXXvFrjT6qy4uk9mYIQjlFQq3FBY59BlvPRHANFysQ4ntJuyYkuODn28-nfSbBcdqyuY4lVtShyphenhyphen4v0W3CCTEhpPs98dIyu3hGT11kCRvCFrNdYzWJFfn9NtoiS/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;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->

6. Jika sudah cari salah satu kode dibawah ini

<div id='header-wrapper'>  
.............
</b:section>
    </div>

Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

<div class='header-outer'>
    ...............................
</b:section>
    </div>

7. Jika salah satu kode diatas sudah ketemu Copas kode berikut dan letakan disalah satu kode tersebut

<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>

8. Silahkan menu Navigasi Dropdown diisi sesuai dengan kebutuhan.
9. Terakhir Klik Simpan Template dan lihat hasilnya
10. Selesai

Demikian Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas. Atau mungkin sobat blogger Dapur Tutorial Blogspot juga membutuhkan menu Horizontal, Silahkan Baca tutorialnya dipostingan Cara Membuat Menu Navgasi Horizonta Diblog. Selamat mencoba and Thanks !.