Navigasi sajian dropdown yang aku bagikan kali ini tidak memakai sentuhan JavaScript ataupun jQuery. Menu dropdown ini pure memakai CSS, tentu sudah divalidasi HTML5 dan CSS3. Bahkan modifikasi sajian dropdown ini juga tidak memakai icon-icon, dengan begitu tidak perlu merasa khawatir akan loading blog kalau memasangnya di blog.
Selain itu, pemasangan sajian dropdown ini juga akan mempunyai kegunaan dalam upaya menurunkan persentase bounce rate yang tinggi di blog, lebih-lebih kalau setiap submenu pribadi menuju ke artikel tertentu.
Menu dropdown ini akan efektif diletakkan di atas atau di bawah header. Namun, tidak menutup kemungkinan di tempatkan di daerah lain juga tidak lebih baik, sesuaikan dengan tata letak template anda. Jika tertarik memasang sajian dropdown ini di blog, silahkan ikuti tutorialnya berikut ini.
Membuat Menubar Multi Dropdown Sederhana di Blog
1. Setelah masuk ke pengeditan HTML template blog, kopi arahan di bawah ini, kemudian letakkan di bawah arahan <style> atau <b:skin>
/* 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 yaitu arahan pemanggil sajian dropdown, silahkan edit link dan title yang ada pada arahan tersebut sesuaikan dengan blog anda, kemudian di atas atau di bawah header blog anda.
<!-- Start sajian 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 sajian multi dropdown -->3. Jika semua telah rampung diubahsuaikan dengan blog anda, simpan template anda.
Demikian caranya menciptakan sajian multi dropdown dengan pure memakai css untuk blogger. Semoga berhasil mencobanya.