Membuat Menu Dropdown Sederhana Dengan CSS

Posted by Eddy Wijaya Wednesday, 3 July 2013 0 komentar
Membuat Menu Dropdown Sederhana Dengan CSS -Dalam membangun sebuah blog tentunya sangatlah penting untuk membangun navigasi yang baik. Salah satu elemen navigasi yang terpenting adalah menu yang biasanya teretak di bagian atas blog.

Pernah saya bahas sebelumnya mengenai cara membuat dropdown menu namun rasanya banyak teman-teman blogger sekalian yang kurang menyukai formatnya. Maka dari itu saya akan coba berbagi model menu dengan format yang lain.

Untuk contoh bisa anda lihat pada menu yang saya gunakan di blog ini. Menurut saya menu ini cukup sederhana dan pemasangannya tidak begitu sulit.

Membuat Menu Dropdown Sederhana Dengan CSS


Membuat Menu Dropdown

1. Untuk membuatnya hal pertama yang harus anda lakukan adalah login ke blogger.com
2. Buka menu TEMPLATE dan pilih EDIT HTML
3. Cari kode ]]></b:skin> (Untuk memudahkan pencarian gunakan CTRL + F)
4. Kemudian letakanlah kode di bawah ini tepat di atas kode ]]></b:skin>


/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#008ec3;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:34px;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(http://1.bp.blogspot.com/-RFDvbDJNPyQ/Tmrb7AdySKI/AAAAAAAABpY/KLAlm7t9Yac/s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
#menubar li {float: left;position: relative;background:#008ec3;}
/* hide from IE mac */
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a  {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0  rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0;}
#menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}

5. Lalu SIMPAN template anda.
6. Langkah selanjutnya adalah cari lagi kode </head>
7. Copy paste kode di bawah ini dan letakan tepat di bawah kode </head> tersebut

<!-- Menu Horizontal -->
<script type='text/javascript'>
//<![CDATA[
function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com
 if(navigator.appVersion.indexOf("MSIE")==-1){return;}
 var i,k,g,lg,r=/s*hvr/,nn='',c,cs='hvr',bv='menubar';
 for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){
 lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){
 lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs;
 this.className=cl;};lg[k].onmouseout=function(){c=this.className;
 this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}}
//]]>
</script>
<!--[if lte IE 7]> <style> #menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;} </style> <![endif]-->

8. Sekarang menuju ke menu TATA LETAK dan pilih ADD GADGET.
9. Cari menu HTML/JAVASCRIPT
10. Lalu letakanlah copy dan paste kode di bawah ini

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://digitalareas.blogspot.com/search/label/Hot%20News'>Hot News</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Blogging'>Blogging</a>
<ul>
<li><a href='http://digitalareas.blogspot.com/search/label/Blogger'>Blogger</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Wordpress'>Wordpress</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/SEO%20Trick'>SEO Trick</a></li>
</ul>
</li>
<li><a href='http://digitalareas.blogspot.com/search/label/Devices'>Devices</a>
<ul>
<li><a href='http://digitalareas.blogspot.com/search/label/Komputer'>Computer</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Laptop'>Laptop</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Gadget'>Gadget</a></li>
</ul>
</li>
<li><a href='http://digitalareas.blogspot.com/search/label/Download'>Download</a>
<ul>
<li><a href='http://digitalareas.blogspot.com/search/label/Antivirus'>Antivirus</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Application'>Application</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Browser'>Browser</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Template'>Template</a></li>
</ul>
</li>
<li><a href='http://digitalareas.blogspot.com/search/label/Entertainment'>Entertainment</a>
<ul>
<li><a href='http://digitalareas.blogspot.com/search/label/Game'>Game</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Movie'>Movie</a></li>
</ul>
</li>
<li><a href='http://digitalareas.blogspot.com/search/label/Internet'>Internet</a>
<ul>
<li><a href='http://digitalareas.blogspot.com/search/label/Alexa'>Alexa</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Bisnis%20Online'>Bisnis Online</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Email'>Email</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Youtube'>Youtube</a></li>
</ul>
</li>
<li><a href='http://digitalareas.blogspot.com/search/label/Social%20Media'>Social Media</a>
<ul>
<li><a href='#'>Google +</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Facebook'>Facebook</a></li>
<li><a href='http://digitalareas.blogspot.com/search/label/Twitter'>Twitter</a></li>
</ul>
</li>
<li><a href='http://digitalareas.blogspot.com/search/label/Tips-Trik'>Tips-Trik</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'></div>
</div>

11. Kemudian klik tombol SIMPAN
12. Sekarang coba lihat hasilnya pada blog anda.

Menu ini sengaja saya beri warna latar belakang hitam gelap. Jika anda ingin menggantinya silakan ganti kode warna #161616 yang ada pada kode CSS dengan kode yang anda inginkan.

Dan untuk menu yang ada pada contoh merupakan menu yang ada pada blog ini, anda harus menggantinya dengan menu dan URL yang anda inginkan.

Baiklah, saya rasa artikel tentang Membuat Menu Dropdown Dengan CSS saya rasa cukup sampai disini. Semoga bermanfaat dan Happy Blogging !

Source code : kucoba.com


Silahkan Masukan Email Anda Untuk Mendapatkan Notifikasi Setiap Ada Artikel Baru Di Blog ini.


Berikut adalah caranya :
1. Masukan Email Anda dikotak yang disediakan.
2. Klik Tombol Suscribe
3. Buka Email Anda dan Segera Klik Link yang diberikan Untuk Mengaktivasi

Delivered by FeedBurner


Artikel Komputer
Blinkie Text Generator at TextSpace.net
Terima Kasih Atas Kunjungan Anda
Judul: Membuat Menu Dropdown Sederhana Dengan CSS
Ditulis Oleh Eddy Wijaya
Semoga artikel ini bermanfaat bagi saudara. Dilarang melakukan Copy Paste secara langsung, Jika anda ingin membuat artikel serupa, buatlah dengan narasi anda sendiri. Untuk pengutipan silahkan sertakan link ke Membuat Menu Dropdown Sederhana Dengan CSS ini. Setiap pelanggaran yang dilakukan akan kami proses dengan cara DMCA Takedown. Terima kasih atas pengertiannya dan sudah singgah membaca artikel ini.


Artikel apakah yang anda inginkan tampil di blog ini ?

SITE INFO

DMCA.com