2012-01-05
Oleh - Kang Salman

Membuat Navigasi Dropdown Menu Dengan CSS

Membuat Navigasi Dropdown Menu Dengan CSS
Advertisement:
Membuat Navigasi Dropdown Menu Dengan CSS - hari ini kang salman akan mengulas sedikit cara membuat menu horizonal dropdown lewat css, yang menurut kang salman sangat mudah dan tidak rumit.
Membuat Navigasi Dropdown Menu Dengan CSS

1. Login Blogger > Rancangan > Edit HTML

2.  Cari kode ini  ]]></b:skin>

3.  Taruh kode di bawah ini tepat di atasnya ]]></b:skin>

/*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(http://3.bp.blogspot.com/-jEZvPu90bIA/TjlATeBIGoI/AAAAAAAAE4A/shxxdvs2fHI/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(http://1.bp.blogspot.com/-NjNjSmAlq34/TjlATMvGF7I/AAAAAAAAE38/UxPs9Qg4Fyg/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
Membuat Navigasi Dropdown Menu Dengan CSS

4.  Selanjutnya masuk ke Rancangan, lalu tabah widget baru dan pilih  HTML/Javascript, pastekan kode di bawah ini. Isi menu dengan yang Anda butuhkan setelah itu simpan. (baca : tutorial cara mengisi menu navigasi)
<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.php">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="/contact/contact.php">Contact</a></li>
</ul>
</div>
Nah sahabat kucoba, demikianlah tutorial  Membuat Navigasi Dropdown Menu Dengan CSS
Semoga bermanfaat.
Advertisement:
Judul : Membuat Navigasi Dropdown Menu Dengan CSS Deskripsi : Admin : Terbit Rating : 5 stars

  • Lifestyle