Style Unik Navigasi Dropdown Menu Mirip Kompas.com

Dalam posting ini kang salman 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 kang salman mulai saja tutorialnya.

LIVE DEMO

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/AVvXsEhxiCBEYnGp17mLvcbK-wNtowmXmrJdl5q2dZapT2G_V5QRcn1HEZDaMAQyzcSJaxiw5WrIG76YZXXnFNOmxv5W80cGcAISt22RU2C6fKK8S88EZzYnBi_vhY3Y-jTNC9ou-Yun6Cu5ukeS/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/AVvXsEhxiCBEYnGp17mLvcbK-wNtowmXmrJdl5q2dZapT2G_V5QRcn1HEZDaMAQyzcSJaxiw5WrIG76YZXXnFNOmxv5W80cGcAISt22RU2C6fKK8S88EZzYnBi_vhY3Y-jTNC9ou-Yun6Cu5ukeS/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/AVvXsEilp6qSKYyddJb1IR0Hpom0r2MYXc-FONFNEuwYPyoeW8T4ZSzU_nex6jcrg7ueJQcYrReb1MW3mHajb7zDV3h1xJADWJX8gLjeDQQB0SS-aOGUFoM1cUMkhl6oUIOVxhy5i9ayv79UuCRq/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/AVvXsEilp6qSKYyddJb1IR0Hpom0r2MYXc-FONFNEuwYPyoeW8T4ZSzU_nex6jcrg7ueJQcYrReb1MW3mHajb7zDV3h1xJADWJX8gLjeDQQB0SS-aOGUFoM1cUMkhl6oUIOVxhy5i9ayv79UuCRq/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/AVvXsEga4d745fXlq9F7lb2FwSAWPTwQEDtPvzqMB1WnLCylkTEwRhlLA-c_ssqtnr4bu1riS7M05VBvWT0X1x7icPDbYgs4dIxND7JkQJkKuk_ONHWqleUISLwu-Nb7Deu8gjzJtTw2zgpagQud/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
Semoga bermanfaat.

Style Unik Navigasi Dropdown Menu Mirip Kompas.com

0 komentar:

Posting Komentar