Menubar dropdown adalah sebuah baris navigasi yang berada tepat dibawah header. Menubar ini berfungsi untuk mempermudah pengunjung dalam mengexplorasi blog kita. Untuk menubar kali ini saya akan membagikan menubar yang saya pake di blog saya. Sebenernya ada lebih dari 20 menubar yang saya ketahui. Ntar saya akan membagikannya dikesempatan berikutnya. Jika anda tertarik, ikuti step by stepnya :
1. Masuk ke Template > Edit
2. Simpan kode dibawah ini tepat diatas ]]></b:skin>
/* NAVIGATION ------------------*/#nav { display:inline-block; width:1190px; height: 47px; margin: 6px 0px 0px 10px; padding-left:4px;border-top:3px solid #eee; background:transparent;/*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);}#nav li { margin-top:2px; margin-right:2px; float:left; position:relative; list-style:none;}#nav a { font-weight:bold; color:#333333; text-decoration:none; display:block; padding:8px 15px; border:1px solid #eee; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px;}/* selected menu element */ #nav .current a, #nav li:hover > a { background:#7788aa url(../images/bg.png) repeat-x 0 -20px; color:#000; border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/ -moz-box-shadow:0 2px 2px rgba(0,0,0, .7); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); text-shadow:0 2px 2px rgba(255,255,255, 0.7);}/* sublevels */#nav ul li:hover a, #nav li:hover li a { background:none; border:none; color:#000;}#nav ul li a:hover { background:#335599 url(../images/bg.png) repeat-x 0 -100px; color:#fff;/*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; text-shadow:0 2px 2px rgba(0,0,0, 0.7);}#nav ul li:first-child > a { -moz-border-radius-topleft:10px; /*some css3*/ -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px;}#nav ul li:last-child > a { -moz-border-radius-bottomleft:10px; /*some css3*/ -moz-border-radius-bottomright:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px;}/* drop down */#nav li:hover > ul { opacity:1; visibility:visible;}#nav ul { opacity:0; visibility:hidden; padding:0; width: 185px; position: absolute; background:#aabbcc url(../images/bg.png) repeat-x 0 0; border:1px solid #444;border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s; -webkit-transition:opacity .25s linear, visibility .1s linear .1s; -o-transition:opacity .25s linear, visibility .1s linear .1s; transition:opacity .25s linear, visibility .1s linear .1s;}#nav ul li { float:none; margin:0;}#nav ul a { font-weight:normal; text-shadow:0 2px 2px rgba(255,255,255, 0.7);}#nav ul ul { left:160px; top:0px; top:0px;}#nav ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;}#nav ul li:first-child a:hover:after{ border-bottom-color: #0186ba;} /* =============================Search Box============================= */#srcnt { float:right; margin:0; padding-top:8px; padding-right:13px; width:auto; overflow:hidden;}#search input[type="text"] { border: 1px solid #6699FF; border-radius:3px; color: #777; width: 160px; padding: 8px; font:normal 10px Verdana, Arial; text-transform:uppercase; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;}#search input[type="text"]:focus { width: 200px;}
Keterangan : (perhatikan warna bukan tulisan ya)
- Kode berwarna merah adalah ukuran dari menu navigasi dan menu search
<ul id='nav'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvWIDRsqskkIvznU_K9B4yxh16b9K1lNTFIyFo1YSRCo5IXW4m4zbXdEPs1-NoTSaRi6nhqrnEZImhsVLQ765UxwSs80BXnh5ovq7vzHi69NUQX0V4lzdHLY5nQJ5oYtvvuISBt568GRM/s1600/Home.png' style='padding:0px;'/>Home</a></li>
<li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhOVQFKAfa2Jea-IV-mF5_ck2RrFWTp7uoX-oWqVFPfy5Chkh_xDc_olUhN54Ektn9TX7OU4VQVCXXS3EDkVbhChZpNhRcUltKGWP-aHczDSArmYOfQLX2anHVlVVng3Vi6R6jvzXxdo/s1600/PC.png' style='padding-right:3px;'/>Computer</a><ul><li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Aplication'>Aplication</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Bluestacks'>Bluestacks</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Game'>Games</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Tricks'>Tips dan Trick</a></li><li class='hr'/></ul></li><li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKcAjbdjhAMzsYjyyl-2pMkWcX_wrON5CpHh2ktvVLMo93rVKEWHJEtdw6Hdpd5rRx6__L0ugpalt9g7nlC9gAEbXYuXPiHSljVlC0LrLsc0S8WNdbCAXJT12xqlnklNutxlWnsvD81T4/s1600/android.png' style='padding-right:3px;'/>Android</a><ul><li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Aplication'>Aplication</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Games'>Games</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Article'>Tips dan Trick</a></li><li class='hr'/></ul></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Tutorial%20Blog'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5PfXvizqBq-GMOkVJZPQ8yfh1r3-1EtWPmjta5XTgSojSN1dfYBnNrTsv-dpflb2-WTQqEAycoZ0pggOqYXnRCQxDoYaiv6_L9eVPEZs5xqfuYyaVTayC_WhWmqN6m-cYRyLlC4TqXSo/s1600/blogger.png' style='padding-right:3px;'/>Blogger</a><ul><li><a href='http://ujangyoyo.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Blog</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/SEO'>SEO</a></li></ul></li><li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVHHoi41bYGkCJqg2nqJi7DxPFfwnJn4DNXJX9PZVUoP7fOPO8TYE3XfLxg84Djw1vrCSU5CpuR6qoz4UcWUNDvq-axV2MIl98lPDkiccHq7BhjQpffbv2cW8ScYu8FT-XOcNPalvty4/s1600/Knowledge.png' style='padding-right:3px;'/>Knowladge</a><ul><li><a href='http://ujangyoyo.blogspot.com/search/label/Bahasa%20Indonesia'>B. Indonesia</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Bahasa%20Inggris'>B.Inggris</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Islam'>Islam</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Matematika'>Matematika</a></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Tips%20dan%20Info'>Tips dan Info</a></li></ul></li><li><a href='http://ujangyoyo.blogspot.com/search/label/Make%20Money'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjno78rXsZucGadxUMm4MkHK7lPKvptv-gG35BXXneis2ADwrkMOQC7gkts-dfj_k-W5amm85UAUmmlPmIk0pX-sVn5vWBJq4GgTWJboD3m7rgz7Bn1rgQl5lmibuxm6n4KibkA_-7C6Eo/s1600/money.png' style='padding-right:3px;'/>Make Money</a></li><li><a href='http://ujangyoyo.blogspot.com/2013/03/sitemap-blog.html'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2G9W6byl2NGE0vHX8v0CcA-c4QfS3H1yxZiIPWgvkvEKh6MB0SURa3kfl-wiW_D4mMn5blXtd4Y6QK6wcc8mEKJboZpHsPX_kmA6UHIvDJFign3zh04xvII-zqETHXhEI1f9dme2_fkA/s1600/Sitemap.png' style='padding-right:3px;'/>Daftar Isi</a></li><li><a href='http://ujangyoyo.blogspot.com/2013/03/pasang-iklan-murah-di.html'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz70l2g5BQwIUnwSI98EnGsnN7HjnBT3R_Fd494_Xepk8liHWZzJsmcnPtU0OhANmr2VFcEnfdcP-SPvxGB-7CLma5qn3qngX3qzZCoTx2HqWLH4x2eXGfSIEqIYe4ZvmFX5i6AJVcDy0/s1600/Iklan.png' style='padding-right:3px;'/>Pasang Iklan</a></li><li class='current-cat'><a href=LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEWQXuvqBS9QnBAsXU3rzU3fBaEfZQ5QUx4mTornWg11lcVjGxf_DNnHIXQXNpBYJbk-wns4RTK7XD2lvg91mbOhnvs46uPhlntAB48lgW8oC72yeknP14PWMMqzZI9lQezmLw5y5Apc/s1600/Help.png' style='padding-right:3px;'/>Help</a><ul><li><a href='http://ujangyoyo.blogspot.com/2012/12/about-us.html'>About Us</a></li><li><a href='http://ujangyoyo.blogspot.com/2012/12/announcement.html'>Anouncement</a></li><li><a href='http://ujangyoyo.blogspot.com/2012/12/contact-me.html'>Contact Us</a></li><li><a href='http://ujangyoyo.blogspot.com/2013/04/privasi-policy.html'>Privasi Policy</a></li></ul></li><div id='srcnt'><form action='/search' id='search' method='get'><input name='q' placeholder='looking for something?' size='40' type='text'/></form></div></ul>
Keterangan : (perhatikan warna bukan tulisan ya)
- Kode berwarna biru adalah alamat url gambar, anda dapat mengkreasikannya tetapi dengan syarat ukurannya harus 32x32 px
- Kode berwarna orange adalah alamat url yang dituju (url dari menu).
- Kode berwarna Hijau adalah nama dari menu anda.
Last Words
Bagaimana? sangat mudah sekali bukan? Untuk selebihnya anda dapat mengkreasikan sendiri menubar diatas, mau pake background gambar kah atau mengganti latar warnanya. Sekian post tentang Membuat menu navigasi seperti blog ini ^_^. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)
AD-BLOCKER DETECTED!
