Cara Membuat Menu DropDown Responsive Di Blog

Menu Dropdown

Halo sob, sekarang saya akan share Cara Membuat Menu Dropdown Dengan Search Di Blog.
Menu Dropdown ini sebenarnya saya ambil di salah satu template Minima Colored yang di buat oleh Arlinadzgn. Dan tentunya Menu ini sudah di modifikasi oleh saya, dan sudah responsive siap di gunakan di Blog Versi Mobile, apabila sobat menyukai Menu ini yang di desain oleh arlinadzgn. Sekarang kita langsung prakteknya :

1. Sobat copykan kode di bawah ini tepat di atas kode </b:skin> atau kode </style>

/* CSS Main Menu */
a.menu-slide{display:none;background:#3b3e44;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase}
a.menu-slide:hover {color:#fff;}
#nav {font-size:14px;font-weight:700;background:#3b3e44;height:56px;line-height:56px;margin:10px auto 10px auto;}
.d-mainmenu {background:#3b3e44;list-style:none;margin:0;float:left;}
.d-mainmenu:before,.d-mainmenu:after {content: " ";display:table;}
.d-mainmenu:after {clear:both;}
.d-mainmenu ul {list-style:none;margin:0;width:11em;}
.d-mainmenu a {display:block;padding:0 15px;}
.d-mainmenu li {position:relative;margin:0;}
.d-mainmenu > li {float:left;}
.d-mainmenu > li > a {display:block;height:56px;line-height:56px;color:#858d8f;overflow:hidden;transition:initial}
.d-mainmenu > li > a.active {background:#303847;color:#858d8f;}
.d-mainmenu > li:hover > a {background:#425372;color:#fff;}
.d-mainmenu > li:hover > a.active {background:#425372;}
.d-mainmenu li ul {background:#3b3e44;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
.d-mainmenu li li ul {left:100%;top:-1px;}
.d-mainmenu > li.hover > ul {visibility:visible;opacity:1;top:100%;}
.d-mainmenu li li.hover ul {visibility:visible;opacity:10;}
.d-mainmenu li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.d-mainmenu li li a:hover {background:#425372;color:#fff;}
.d-mainmenu li li li a {background:#fff;z-index:20;color:#151515;}
.d-mainmenu li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.d-mainmenu li:hover .parent:after{color:#fff;}
.d-mainmenu li ul li .parent:after {content: "\f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;}
.d-mainmenu li ul li .parent:hover:after {color:#fff;}
#search-form {background:#3b3e44;float:right;margin:0;width:210px;}
#search-form table {width:100%;margin:0;}
#search-form input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;border:none;}
#search-form input#search-button[type="submit"] {font-family:FontAwesome;background:#3b3e44;color:#858d8f;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;}
#search-form input#search-button[type="submit"]:hover{background:#425372;cursor:pointer;}
#search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;}
/* CSS Main Menu Responsive */
@media screen and (max-width:960px) {
#search-form{width:100%;background:#263142;padding:5px 0}
#search-form td.search-box {padding-right:0;width:100%;}
#search-form input#search-box[type="text"] {background:#fff;}
#search-form input#search-box[type="text"]:focus {background:#fefefe;outline:none;}}
@media only screen and (max-width:768px){
#nav {background:#f5f5f5;}
.nav {float:none;width:100%;max-width:100%}
.active {display:block;}
.d-mainmenu > li > a.active {background:#263142;}
.d-mainmenu > li > a.active:hover {background:#263142;}
#search-form {margin:0;}
.nav > li {float:none;overflow:hidden;}
.nav ul {display:block;width:100%;float:none;}
.d-mainmenu li ul {background:#f6f6f6;box-shadow:none;}
.d-mainmenu li ul li a{background:#f0f0f0;}
.d-mainmenu > li > a{background:#263142;height:40px;line-height:40px}
.d-mainmenu li li a:hover {background:#263142;color:#fff;}
.nav > li.hover > ul , .nav li li.hover ul {position:static;}
.d-mainmenu li .parent:after,.d-mainmenu li ul li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0;}
.d-mainmenu li:active .parent:after,.d-mainmenu li ul li:active .parent:after {color:#c5cbd0;}
#search-form td.search-box {padding:0 0 0 10px;}
#search-form td.search-button {width:1%;}
#search-form input#search-box[type="text"] {margin:0;background:#fff;}
#search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;}}
@media (max-width:767px){.popup-container{width:100%}}
@media only screen and (min-width:768px){
#menu {display:block;}}
@media only screen and (max-width:640px){
#nav{background:#374760;margin:0;height:46px;line-height:46px;}}

2. Kemudian letakan kode di bawah ini tepat  di bawah kode </header>

<!-- Nav Second -->
<div class='clear'/>
<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a class='menu-slide' href='#'><i class='fa fa-list'/> Menu</a>
<ul class='nav d-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 5</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 4r</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>404 Page</span></a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value='GO'/></td></tr></tbody></table></form>
</nav>
<!-- End Nav Second -->

3. Kemudian sobat letakan kode di bawah ini tepat di atas kode </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'/>

4. Kemudian Save Template sobat dan lihat hasilnya

Ok sob untuk tutorial Membuat Menu Dropdown sampai disini. Semoga artikel ini bermanfaat bagi sobat. Apabila kode di atas ada error atau kurang paham terhadap letak penyimpanan kode di atas sobat bisa berkomentar di bawah.