Cara Membuat Menu Horizontal Dengan Sub Menu Warna-Warni
Menu navigasi atau menu horizontal dalam seuatu website atau blog sangatlah penting, menu tersebut bertujuan untuk memudahkan pengunjung melihat konten yang ada dalam suatu web atau blog. Agar menu tersebut menarik dan disukai banyak pengunjung pastinya menu tersebut haruslah bagus.
Menu drop down kali ini sangatlah keren dan sangat profesional untuk dipasang di web atau blog. Dan berikut cara membuat menu horizontal dengan sub menu warna-warni ditambah dengan jQuery untuk mengaktifkan fitur warna-warninya.
1. Login ke blog.
2. Pilih Template > Edit HTML
3. Copy kode CSS di bawah ini tepat di atas kode ]]></b:skin>
6. HTML kode: Letakan kode di bawah ini tepat di bawah kode akhir bagian header blog kamu
Ganti kata seperti, kesehatan, naruto episode, community, dll, dengan kata-kata yang kamu suka.
Ganti URL berwarna merah dengan URL blog kamu.
Menu drop down kali ini sangatlah keren dan sangat profesional untuk dipasang di web atau blog. Dan berikut cara membuat menu horizontal dengan sub menu warna-warni ditambah dengan jQuery untuk mengaktifkan fitur warna-warninya.
 |
| Menu Horizontal Dengan Sub Menu Warna-Warni |
Lihat video tutorial cara membuat menu horizontal dengan sub menu warna-warni untuk blog.
1. Login ke blog.
2. Pilih Template > Edit HTML
3. Copy kode CSS di bawah ini tepat di atas kode ]]></b:skin>
.wow-menu {4. Selanjutnya, cari kode </head>, setelah ketemu letakan kode di bawah ini tepat di atas kode </head>
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifr4k247cJt1cCiq5T-U_paSfyjDIVO2tpUMSIUx8Sm0nJSN2M4PnPh7py4nY61XBjeCzNv19qO5Y6sne1QfheBymqy9KhMMBNOmkVJZaB7Sb6SrCRgSj1Hmf0YAw1HYGTbJhEUbNM9Kk/s400/menu-bgd.png) bottom left repeat-x;
position: relative;
margin: 0; padding: 0;
}
ul#nav {
border: 1px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifr4k247cJt1cCiq5T-U_paSfyjDIVO2tpUMSIUx8Sm0nJSN2M4PnPh7py4nY61XBjeCzNv19qO5Y6sne1QfheBymqy9KhMMBNOmkVJZaB7Sb6SrCRgSj1Hmf0YAw1HYGTbJhEUbNM9Kk/s400/menu-bgd.png) bottom left repeat-x;
position: relative;
font-size: 14px; font-family: helvetica, arial, sans-serif;
list-style: none; margin: 0 auto; padding: 0;
width: 979px;
}
#nav ul {
margin: 0;
}
:focus {
outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
display: block;
float: left;
text-transform: uppercase;
font-weight: bold;
line-height: 33px;
padding: 0 13px 0 10px;
color: #333;
text-decoration: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii08CANmqmMDr2POXRtRsupCCxUQDqgjxRS0iKIgKq9uOE1FFizma9tAmmxQHvoB7x3deyNwlDJkW60MiWnd7JrTuXD5hAowwocFT3i2zuUb7e_GLAVD_ww_p0t93p__5xE6pSeLlDM4Q/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-naruto a:hover, ul#nav li#link-naruto a.open { background: #8E8E8E; }
ul#nav li#link-games a:hover, ul#nav li#link-games a.open { background: #B20000; }
ul#nav li#link-cerita a:hover, ul#nav li#link-cerita a.open { background: #12127D; }
ul#nav li#link-health a:hover, ul#nav li#link-health a.open { background: #008E00; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }
ul#nav li#link-home a {
padding: 0 33px 0 10px;
text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXd62PUMadSTMeDw9_lDfoPs8xEyw_-ryp6Kq0byTVzrkcLlnyHWSyubUb3lwc0VidnrKhrZaL8wJbGRq2W0-TyRGjmfT1TejcvaQvh76XBGZuXN5yszeIxsQoY0ivLUzNhYFedgNV5U/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXd62PUMadSTMeDw9_lDfoPs8xEyw_-ryp6Kq0byTVzrkcLlnyHWSyubUb3lwc0VidnrKhrZaL8wJbGRq2W0-TyRGjmfT1TejcvaQvh76XBGZuXN5yszeIxsQoY0ivLUzNhYFedgNV5U/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
position: absolute;
top: 33px;
left: -1px;
overflow: hidden;
width: 980px;
display: none;
z-index: 999;
list-style: none;
padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTi4tU77TEEwp5P494qJMD6M2N7p33vQNfdyS_iX3GwyGSFIEjUPWeKgbq4grIRE-ma9arBPaX9PlFG_9WXSLgp8zfnWHCBKZZPhBO7IUQBhYuhU28VqloqqoFC8MS_lFjTxPSfbirWQ/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-naruto ul.sub-nav { background: #CCCCCC; }
ul#nav li#link-cerita ul.sub-nav { background: #1919B3; }
ul#nav li#link-games ul.sub-nav { background: #FF0000; }
ul#nav li#link-health ul.sub-nav { background: #00CC00; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTB3ebMy65PDzyLbnUFNP-U_X9PlpMw99bbAKf3pNsehC_XohJ9reT6LGI1V0YQB8I39dDONJCeuwaJ40J67vXgBUPmIdvzfKX2G-yVEFXpYm0U1OsZfjkoZR5ry5fVjcHcMpgVq9f3Y/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5erEdq7Vyv2xdZAd6-9yT2K9vKy5FEBX5wkf-lKJwC9IoFatNVhO-2IW-qdcu16DjlZ2tOx0NXHBoWXYmWsDhj_q3jtipBmK8R_1UkxECzIE1tztRaMKR8D-uLDeZws4B7lKF8H1C968/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQDd6uFEtwQ4Z7JbU1_ndTx-TZrPQHGHSxmw_ZZMVM1yy9MtAwwMBLkYs0-xOBjSqONvni4YomStHqAv5MGeTfoJjlMz_AuXRdXq7XKt240U2IJAzA6xmpM2pWGikVQm44UOFHYnnADU/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIFM9eDvZYMDN94xnPMqGOQzZjNZjtDIRfJ1ITJyKJ5fjutfeUMnRFrq1m9X5W6_-t0ypMWziYiKP3UPcVIRV9Nh5TX4ZNYr53_rv7QFwxb7Sskcik8q69YRTTM4xH1_hAJsyu4LL41so/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left; }
ul#nav li ul.sub-nav li a {
float: none;
background: none;
font-size: 13px;
text-transform: none;
color: #fff;
line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
<script src='http://wow-menariknya.googlecode.com/files/jQuery%20Colorful%20Pack.js' type='text/javascript'/>5. Untuk memasang menunya, cari kode bagian header blog kamu, misal:
<script src='http://wow-menariknya.googlecode.com/files/WOW-Menariknya-clorful-jcrousel.js' type='text/javascript'> </script>
<script src='http://wow-menariknya.googlecode.com/files/WOW-Menariknya-clorful-menu.js' type='text/javascript'/>
<div id='header-wrapper'>Pesan: Untuk mempermudah mencari kode akhir bagian header blog kamu, cukup klik CTRL+F cari header-wrapper, karena setiap blog agak beda kode bagian header blognya, jadi kamu harus pandai-pandai memilih. Jika sudah ketemu letakan kode HTML menunya tepat di bawah kode yang berwarna merah.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Wow Menariknya (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML22' locked='false' title='' type='HTML'/>
</b:section></div><!-- end header-wrapper -->Letakan kode HTML di sini.
6. HTML kode: Letakan kode di bawah ini tepat di bawah kode akhir bagian header blog kamu
<div class='wow-menu'>Pesan: Ganti kata URL dengan URL yang dituju.
<ul id='nav'>
<li class='non-vertical-link top-link' id='link-home'><a class='open' href='http://wowmenariknya.blogspot.com/'>Home</a></li>
<li class='top-link' id='link-health'><a href='URL'>Kesehatan</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='URL'>Diet</a></li>
<li><a href='URL'>Fitness</a></li>
<li><a href='URL'>Food Healthy</a></li>
<li><a href='URL'>Body</a></li>
<li><a href='URL'>Nutrisi</a></li>
<li><a href='URL'>Jantung</a></li>
</ul>
</li>
<li class='top-link' id='mbt'><a href='URL'>Blogger</a>
<ul class='sub-nav'>
<li><a href='URL'>CSS</a></li>
<li><a href='URL'>Widget</a></li>
<li><a href='URL'>jQuery</a></li>
<li><a href='URL'>Tutorial Blog</a></li>
<li><a href='URL'>Tips Blog</a></li>
</ul>
</li>
<li class='top-link' id='link-entertainment'><a href='URL'>Love</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='URL'>Love Tips</a></li>
<li><a href='URL'>Marriage</a></li>
</ul>
</li>
<li class='top-link' id='link-news'><a href='URL'>Unik Aneh</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='URL'>Design</a></li>
<li><a href='URL'>Animals</a></li>
<li><a href='URL'>Tech</a></li>
<li><a href='URL'>Nature</a></li>
<li><a href='URL'>Inspiration</a></li>
<li><a href='URL'>People</a></li>
</ul>
</li>
<li class='top-link' id='link-life'><a href='URL'>Beauty</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='URL'>Skin</a></li>
<li><a href='URL'>Hair</a></li>
<li><a href='URL'>Tips</a></li>
</ul>
</li>
<li class='top-link' id='link-technology'><a href='URL'>Resep</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='URL'>Breakfast</a></li>
<li><a href='URL'>Cake</a></li>
<li><a href='URL'>Chicken</a></li>
<li><a href='URL'>Soup</a></li>
<li><a href='URL'>Meat</a></li>
<li><a href='URL'>Seafood</a></li>
<li><a href='URL'>Pasta</a></li>
<li><a href='URL'>Drink</a></li>
<li><a href='URL'>Dessert</a></li>
<li><a href='URL'>Bread</a></li>
</ul>
</li>
<li class='top-link' id='link-games'><a href='URL'>Games</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='URL'>PC</a></li>
<li><a href='URL'>PS2</a></li>
<li><a href='URL'>PS3</a></li>
<li><a href='URL'>Cheat</a></li>
</ul>
</li>
<li class='top-link' id='link-cerita'><a href='URL'>Cerita</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='URL'>Cerita Lucu</a></li>
<li><a href='URL'>Cerita Seram</a></li>
<li><a href='URL'>Cerita Motivasi</a></li>
</ul>
</li>
<li class='top-link' id='link-naruto'><a href='URL'>Naruto Episode</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='URL'>New Episode</a></li>
<li><a href='URL'>Naruto 284</a></li>
<li><a href='URL'>Naruto 283</a></li>
<li><a href='URL'>Naruto 282</a></li>
<li><a href='URL'>Naruto 281</a></li>
</ul>
</li>
<li class='non-vertical-link top-link' id='link-top10'><a href='URL'>Community</a></li>
<li style='clear: both;'/>
</ul>
</div>
Ganti kata seperti, kesehatan, naruto episode, community, dll, dengan kata-kata yang kamu suka.
Ganti URL berwarna merah dengan URL blog kamu.
0 komentar: