Cara Membuat Menu DrobDown Menggunakan CSS di Blog - Menu DrobDown adalah sebuah sistem navigasi yang biasa terpasang di sebuah blog atau website yang berguna untuk meletakkan sebuah sub menu Label dari dalam sub Label. Menu DrobDown ini sangat berguna bagi blog atau website yang memiliki kategori Label yang sangat banyak sehingga tidak cukup hanya dengan Down atau menurun saya namun perlu adanya di buat Sub Menu lagi. Menu DrobDown ini berfungsi untuk memudahkan pengunjung untuk mencari sebuah Menu Kategori yang mereka cari, keuntungan bagi blogger adalah menambah Jumlah Page View dan memberikan pelayanan terbaik pada Pengunjung.
Menu DrobDown ini menggunakan Sistem CSS 3 dan tentu sudah di validasi HTML 5, sehingga tidak akan memberatkan Loading Blog sobat. Maka dari itu kali ini saya akan memberikan tutorial cara membuatnya, bagi sobat yang berminat untuk memasangnya atau berminat untuk mempelajarinya silahkan simak cara membuatnya berikut ini.
1. buka Blog Sobat > masuk menu “Template” > Edit HTML > Salin kode di bawah ini dan letakkan di bawah kode ]]><b:skin> atau <style>
]]><b:skin> atau <style>
/* Menu Multi Dropdown */
ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#201816;width:100%}
ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#201816}
ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#CB4E48; padding:0 7px 0}
ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}
ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}
ul#mainmenu li:hover {z-index:1;}
ul#mainmenu ul ul {position:absolute;left:100%;top:0;}
ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}
* html ul#mainmenu li a {display:inline-block;}
ul#mainmenu>li {margin:0;}
ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}
ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}
ul#mainmenu ul li {float:none;margin:7px 0 0;}
ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #BE3C36;}
ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}
ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}
ul#mainmenu ul span {background-image:none; padding-right:5px;}
ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #BE3C36;}
ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#988989;}
ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#CB4E48;color:#FFFFFF;}
2. di bawah ini adalah menu pemanggil menu Dropdown silahkan sobat edit Link dan Titel yang ada pada kolom tersebut sesuai dengan keinginan sobat.
<!-- Start menu multi dropdown-->
<nav>
<ul class='menutop' id='mainmenu'>
<li class='menutop'><a href='#' title='Home'>Home</a>
</li>
<li class='menutop'><a href='#' title='Product Info'>Product info</a>
<ul>
<li><a href='#'>Features</a>
</li>
<li><a href='#' title='Installation'>Installation</a>
<ul>
<li><a href='#'>Description of files</a>
</li>
<li><a href='#'>How to setup</a>
</li>
</ul>
</li>
<li><a href='#'>Parameters info</a>
</li>
<li><a href='#' title='Supported browsers'>Supported browsers</a>
<ul>
<li><a href='#'>Firefox</a>
</li>
<li><a href='#'>Internet Explorer</a>
</li>
<li><a href='#'>Opera</a>
</li>
<li><a href='#'>Safari</a>
</li>
<li><a href='#'>Google Chrome</a>
</li>
</ul>
</li>
<li><a href='#'>CSS3 info</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Samples'>Samples</a>
<ul>
<li><a href='#'>Android template</a>
</li>
<li><a href='#'>Mac template</a>
</li>
<li><a href='#' title='Mercury template'>Mercury template</a>
<ul>
<li><a href='#'>Blue theme</a>
</li>
<li><a href='#'>Green theme</a>
</li>
<li><a href='#'>Lilac theme</a>
</li>
<li><a href='#'>Orange theme</a>
</li>
</ul>
</li>
<li><a href='#'>Elegant template</a>
</li>
<li><a href='#' title='Poin Template'>Point template</a>
<ul>
<li><a href='#'>Aquamarine theme</a>
</li>
<li><a href='#'>Blue theme</a>
</li>
<li><a href='#'>Green theme</a>
</li>
<li><a href='#'>Grey theme</a>
</li>
<li><a href='#'>Orange theme</a>
</li>
<li><a href='#'>Red theme</a>
</li>
</ul>
</li>
<li><a href='#' title='Toolbars template'>Toolbars template</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
<ul>
<li><a href='#'>Firefox</a>
</li>
<li><a href='#'>Internet Explorer</a>
</li>
<li><a href='#'>Opera</a>
</li>
<li><a href='#'>Safari</a>
</li>
<li><a href='#'>Google Chrome</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- End menu multi dropdown -->
NB : <ul class='menutop' id='mainmenu'>adalah awal dari pembukaan menu Dropdown.
Demikianlah tutorial mengenai Cara Membuat Menu DrobDown Menggunakan CSS di Blog, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.
0 Komentar