Cara Membuat Menu Dropdwon Tanpa Javascript

Pada kesempatan kali ini saya akan share tutorial Cara Membuat Menu Dropdwon Tanpa Javascript, meski begitu akan tetap responsive serta seo friendly akan tetapi memiliki tampilan lebih sederhana. 

Selain tidak menggunakan JavaScript juga tidak menggunakan JQuery jadi tidak akan memberatkan blog saat di akses, bagaimana cara membuat nya langsung aja berikut ini adalah tutorial nya. 

Membuat Menubar Multi Dropdown Sederhana di Blog

1. Login ke Blogger > Tema > Buka Edit HTML lalu letakkan kode di bawah ini sebelum </head>

<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;}
</style>

2. Di bawah ini adalah kode pemanggil menu dropdown, silakan edit link dan title yang ada pada kode tersebut sesuaikan dengan blog anda, kemudian di atas atau di bawah header blog anda.

<!-- 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 -->

3. Jika semua telah rampung disesuaikan dengan blog anda, simpan template anda.

Demikian caranya membuat menu multi dropdown dengan pure menggunakan css untuk blogger. Semoga berhasil mencobanya.

• Result

Share :