Menu Navigasi Dropdown Dengan CSS

April 09, 2012

Bismillah
Iseng pagi-pagi posting cara membuat menu navigasi dropdown dengan CSS, kali ini saya akan mengulas tentang cara bagaimana membuat menu dropdown dengan css dan menurut saya ini sangat mudah dan tidak rumit
Preview

Demo

Cara Membuat Menu Navigasi Dropdown Dengan CSS

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode berikut ini: ]]></b:skin>
Langkah 5
Letakkan kode dibawah ini diatas kode langkah 4

/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi7HiA2psjL8sqhK2k0ivkruMl5dxDsaEIt1vL1nonytKJDSi8vZTmYbqifVvjD7vcE_t4Y7LSOPYXLmjs3oUvIwJXGWPI1LeA_1R3IYGnz5Y3nBZQ1TTMDqAce4I_QlS7X1Ds-76T7FfQ/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiuVaEFKZ8axuJEV5byew0eTMZdBZd7lpP7BZjywqpGXjMhLRww8ut0VJtxh4F71_Tx7qHVPB0QrSg8fjcwNzGN_pFB2MrTeGPAnMcwrlOB-Q_dE5P5rfbv_361PxFN2fXQG_SCxxue9Gv/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

Klik Simpan Template
Langkah 6

Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Masukan (copypaste) kode dibawah ini pada bagian konten dan letakkan pada bagian Header

<div class="menu">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="mailto:nama@domain.com">Contact</a></li>
</ul>
</div>

Semoga bermanfaat, Selamat mencoba dan semoga berhasil

Labels: Blog Design, Menu Navigasi