Saturday 4 August 2012

Cara Membuat Menu Navigasi Horisontal Dropdown / Bercabang Ke Bawah

Hari ini saya akan mengulas sedikit cara membuat menu horizonal dropdown lewat css, yang menurut kang salman sangat mudah dan tidak rumit.



Berikut Langkah-langkahnya:
1. Login Blogger > Rancangan > Edit HTML     *Jangan lupa dicentang

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89Mowqc3Ew0OoDBd35KlFhjgfOMRjl7RbGy5dMIo8DuaaeAcrRX1r67bZhba3dBXRunxtOj3NHDVw2KIPMU7Gdk6VHdW7ki8xTZe-ENJPDNiUFvfPzIu0FlbJQr6OxrOIIR61k1kCzM8A/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/AVvXsEgmBT78War8txlAJXeiOoYhvc2WXrQSnKbnfYnsHPfUfHBZBsy32kTqL7jmjtHv-2AVHzrhowtdH44yjr5TSoCKmLrvDXbtc15W4Si3X1ZTL0o3wFQ-QALpyzD_IphOmKncG9bffweiohw4/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}


4. Save Template
5. Selanjutnya masuk ke Rancangan, lalu tabah widget baru dan pilih  HTML/Javascript, pastekan kode di bawah ini.


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

*KETERANGAN
  • Tanda pagar # adalah tempat meletakan link / url dari artikel kita yang ingin di pasang di menu navigasi. ingat awali dengan tanda kutip " dan akhiri kembali dengan tanda kutip ", jika tidak maka tidak bisa di save.
  • Nama Menu 1 dan selanjutnya adalah, nama menu-menu yang di tampilkan.
  • Anda dapat memperbanyak menu navigasi sesuai kebutuhan.
                                    
5. Kemudian save, dan lihatlah blog Anda

Selamat Mencoba

sumber: Disini




3 comments:

  1. Bro bisa buat menu navigasi kayak di Indowebster gk??
    Itu yang floating dan hovernya bekerja saat di scroll ke bawah..
    Kayak gambar yg ada di link ini bro..

    1.Gambar Sebelum Di Scroll Ke Bawah
    2.Gambar Sesudah Di Scroll Ke Bawah

    kloq bisa share donk, email saya cnambiexz@yahoo.com atau twitter saya @Cah_Gembloengz thanks...

    ReplyDelete
  2. makasih banyak buat tutornya gan,,

    http://goo.gl/0bvO1h

    ReplyDelete

LinkWithin

Related Posts Plugin for WordPress, Blogger...
;