Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian

Baca Juga

Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian.

NAVIGASI Menu Blog Responsive Dropdown Simple plus Kotak Pencarian (Search Box) salah satu trending desain template blog.

Setelah CB berbagi tips membuat top menu responsive plus link media sosial, kali ini CB berbagi cara memasang menu lainnya.

Navigasi menu ini sederhana, bersih, latar putih, dilengkapi kotak pencarian. Live Demo bisa dilihat di blog demo Template Write. Ini penampakan desain menunya:

Menu Responsive Mobile

Menu Responsive Desktop

Cara Membuat Menu Responsive Dropdown + Kotak Pencarian

Langsung saja, berikut ini Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian seperti gambar di atas.

1. Tema > Edit HTML
2. Copas kode CSS berikut ini di atas kode ]]></b:skin>

.main-navigationnbt{border-bottom:solid 1px #eee;border-top:solid 1px #eee;margin-top:45px;}
.main-navigationnbt a {color: #444;font-family: 'Poppins',serif;font-size: 18px;line-height: 1.5;word-wrap: break-word;font-weight: 300;text-decoration: none;}
.menu-togglenbt,.main-navigationnbt a{line-height:58px;text-align:left;}
.main-navigationnbt{font-size:83.8%;position:relative;}
.menu-togglenbt{color:#444;cursor:pointer;text-transform:uppercase;}
.menu-togglenbt:hover{color:#666;}
.menu-togglenbt:before{content:"\f0c9";display:inline-block;font:normal 14px/1 FontAwesome;-webkit-font-smoothing:antialiased;margin-right:10px;position:relative;top:-1px;vertical-align:middle;}
.main-navigationnbt ul{display:none;list-style:none;margin:0;}
.main-navigationnbt.toggled ul{display:block;}
.menu-togglenbt,.main-navigationnbt a{padding-right:40px;}
.main-navigationnbt a{border-top:solid 1px #eee;display:block;}
.main-navigationnbt .current_page_item > a,.main-navigationnbt .current-menu-item > a,.main-navigationnbt .current_page_ancestor > a{color:#111;}
.main-navigationnbt ul ul a{padding-left:30px;}
.main-navigationnbt ul ul ul a{padding-left:45px;}
.main-navigationnbt ul ul ul ul a{padding-left:60px;}
.main-navigationnbt .search-formnbt{position:absolute;right:0;top:0;}
.main-navigationnbt .search-fieldnbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM9mmmKOxmPSl-I7-tfnYho9w-R7xUFVEBOJasA3BXuveljxNXbE3eLUMX6SBskhriMQS8vqk58z1tTdxVIJnfXob5x032FTiCtxFIih6iLls7dINzhomCqQUjVV1FId2jNytB_lsErVlB/s1600/search-icon.png) 5px center no-repeat;background-size:24px 24px;border:none;cursor:pointer;height:36px;margin-top:11px;padding:0 0 0 34px;position:relative;width:1px;}
.main-navigationnbt .search-fieldnbt:focus{background-color:#fff;border:solid 1px #eee;cursor:text;max-width:100%;outline:0;width:240px;}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.main-navigationnbt .search-fieldnbt{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Dlcskvux-2j5pl535FyuxNop0or_yhdzvkfit3N0cXK72LNJrUcE7kc95j37qWRGU8D3rEQ1Nz4utBXwyFcJFbYZ77lhAAu57eGhbXKMoRspuRpKtfLYWKj9Qlmc3kUmMi98Xs3XmKtM/s1600/search-icon%25402x.png);}}
.main-navigationnbt .search-submitnbt{display:none;}
.ie8 .site-headernbt .search-fieldnbt{padding-top:6px;}
@media screen and (min-width:783px){.main-navigationnbt{border:none;margin-top:30px;}.menu-togglenbt,.main-navigationnbt a{line-height:58px;}.menu-togglenbt{display:none;}.main-navigationnbt ul{display:block;}.main-navigationnbt a{border-top:none;padding-left:16px;padding-right:16px;}.main-navigationnbt a:hover{;}.main-navigationnbt ul ul a,.main-navigationnbt ul ul ul a,.main-navigationnbt ul ul ul ul a{padding-left:20px;}.main-navigationnbt li{position:relative;}.main-navigationnbt div.menunbt > ul,.main-navigationnbt ul.menunbt{letter-spacing:-0.4em;padding-right:30px;text-transform:uppercase;}.no-search .main-navigationnbt div.menunbt > ul,.no-search .main-navigationnbt ul.menunbt{padding-right:0;}.main-navigationnbt div.menunbt > ul > li,.main-navigationnbt ul.menunbt > li{display:inline-block;letter-spacing:normal;text-align:left;white-space:nowrap;}.main-navigationnbt div.menunbt > ul > li:first-child > a,.main-navigationnbt ul.menunbt > li:first-child > a{padding-left:0;}.main-navigationnbt div.menunbt > ul > li.page_item_has_children > a:after,.main-navigationnbt ul.menunbt > li.page_item_has_children > a:after,.main-navigationnbt div.menunbt > ul > li.menu-item-has-children > a:after,.main-navigationnbt ul.menunbt > li.menu-item-has-children > a:after{content:"\f107";display:inline-block;font:normal 16px/1 FontAwesome;-webkit-font-smoothing:antialiased;position:relative;right:-8px;top:1px;}.main-navigationnbt ul ul{background-color:#fff;box-shadow:0 1px 3px #ddd;left:-9999px;opacity:0;position:absolute;text-transform:none;top:100%;transition:opacity .3s ease-in-out;white-space:normal;width:220px;z-index:99999;}.main-navigationnbt ul ul ul{top:0;}.main-navigationnbt ul li:hover > ul{left:0;opacity:1;}.main-navigationnbt div.menunbt > ul > li:first-child:hover > ul,.main-navigationnbt ul.menunbt > li:first-child:hover > ul{left:-18px;}.main-navigationnbt ul ul li:hover > ul{left:100%;opacity:1;}.main-navigationnbt ul ul li a{border-top:1px solid #eee;line-height:1.5;padding-bottom:14px;padding-top:14px;}.main-navigationnbt  ul ul li.page_item_has_children > a,.main-navigationnbt  ul ul li.menu-item-has-children > a{padding-right:20px;}.main-navigationnbt  ul ul li.page_item_has_children > a:after,.main-navigationnbt  ul ul li.menu-item-has-children > a:after{content:">";position:absolute;right:8px;top:14px;}.main-navigationnbt .search-fieldnbt{margin-top:9px;transition:width .4s ease,background .4s ease;}
}

3. Copas kode HTML berikut ini di bawah kode penutup header, seperti </header>,  di template Anda.

<nav class='main-navigationnbt' id='site-navigationnbt' role='navigation'>
<div class='menu-togglenbt'>Menu</div>
<div class='main-navigation-contentnbt'>
<div class='menunbt-container'>
<ul class='menunbt'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li class='menu-item-has-children'><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
<li class='menu-item-has-children'><a href='#'>Parent Category</a>
<ul class='sub-menu'>
<li class='menu-item-has-children'><a href='#'>Child Category 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>
</ul>
</div>
<form action='/search' class='search-formnbt' method='get' role='search'>
<label>
<span class='screen-reader-text'></span>
<input class='search-fieldnbt' name='q' placeholder='Search...' type='search' value=''/>
</label>
<input class='search-submitnbt' type='submit' value='Search'/>
</form>
</div>
</nav>

4. Copas Kode Javascript berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
( function() {
var container, button, menu;
container = document.getElementById( 'site-navigationnbt' );
if ( ! container )
return;
button = container.getElementsByTagName( 'div' )[0];
if ( 'undefined' === typeof button )
return;
menu = container.getElementsByTagName( 'ul' )[0];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
if ( -1 === menu.className.indexOf( 'nav-menu' ) )
menu.className += ' nav-menu';
button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) )
container.className = container.className.replace( ' toggled', '' );
else
container.className += ' toggled';
};
} )();
( function() {
var is_webkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
is_opera = navigator.userAgent.toLowerCase().indexOf( 'opera' ) > -1,
is_ie = navigator.userAgent.toLowerCase().indexOf( 'msie' ) > -1;
if ( ( is_webkit || is_opera || is_ie ) && document.getElementById && window.addEventListener ) {
window.addEventListener( 'hashchange', function() {
var element = document.getElementById( location.hash.substring( 1 ) );
if ( element ) {
if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) )
element.tabIndex = -1;
element.focus();
}
}, false );
}
})();
//]]>
</script>

5. Kode Lain
Karena desain Menu Responsive Dropdown Simple plus Kotak Pencarian di atas menggunakan jenis huruf Poppins dan menggunakan Awesome Font, tambahkan kode berikut ini di bawah kode <head>

<link href='https://fonts.googleapis.com/css?family=Poppins:300,400,700&subset=latin-ext' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

6.  Save!

Menu Responsive Dropdown + Kotak Pencarian Lainnya

Cara pemasangan sama dengan di atas.

CSS

#nav_wrapper1{width:100%}
.nav_wrapper{border-bottom:1px solid #f1f1f1;left:0;top:0;position:relative;width:100%;transition:top .5s ease-out;background:#3f618c;height:50px;z-index:99999}
.btn{padding:10px 1%;margin:5px;color:#fff;text-decoration:none;transition:all 0.1s ease}
.btn:hover{transition:all 0.1s ease}
#search i{color:#fff;font-size:22px}
#search{float:right;font-size:22px;padding:15px;line-height:0;color:#fff;margin:0;font-weight:700;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
#search:hover{background:#111}
.search_box{clear:both;width:40%;background:#111;padding:0;margin:0;height:0;overflow:hidden;transition:all 0.1s ease-in-out;float:right;z-index:99999999999}
.search_box.active{height: auto;padding: 8px 0;width: 33%;position: absolute;right: 50px;top: 0;z-index: 50;}
.search_box input{width:60%;font-size:13px;margin:0 0 0 10px;padding:10px;border:none;background:#fff}
.search_box input:focus{outline:none}
.search_box input.search_icon{clear:both;width:25%;height:auto;padding:10px;margin:0;margin-right:10px;border:none;color:#fff;cursor:pointer;background:#0c6aff;opacity:1;transition:all 0.1s ease;float:right}
.search_box input.search_icon:hover{background:#FFF;color:#111}
.menu-link{display:none}
.spinner-master input[type=checkbox]{display:none}
.menu{width:100%;height:auto;background:#3f618c;color:#FF0000;transition:all 0.3s ease;margin-top:5px}
.menu ul{padding:0;margin:0;list-style:none;position:relative;display:inline-block}
.menu > li > ul.sub_menu{min-width:10em;padding:4px 0;background-color:#111;border:1px solid #fff}
.menu ul li{padding:0}
.menu > ul > li{display:inline-block}
.menu ul li a {display: block;text-decoration: none;color: #fff;font-size: 14px;height: 100%;text-transform: uppercase;font-weight: bold;}
.menu ul li a:hover{background:#111;color:#fff}
.menu ul li.hover > a{background:#111;color:#FFF}
.menu ul li > a{padding:14px}
.menu ul ul{display:none;position:absolute;top:100%;min-width:160px;background:#111}
.menu ul li:hover > ul{display:block}
.menu ul ul > li{position:relative}
.menu ul ul > li a{padding:10px 15px;height:auto;background:#666}
.menu ul ul > li a:hover{background:#111;color:#fff}
.menu ul ul ul{position:absolute;left:100%;top:0}
@media all and (max-width:860px){
.example-header .container{width:100%}
#search{color:#fff;padding:0 20px 0 5px;margin-top:25px}
.spinner-master *{transition:all 0.3s;box-sizing:border-box}
.spinner-master{position:relative;margin:15px;height:30px;width:30px;float:left}
.spinner-master label{cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:0;left:0}
.spinner-master .spinner{position:absolute;height:4px;width:100%;padding:0;background-color:#fff}
.spinner-master .diagonal.part-1{position:relative;float:left}
.spinner-master .horizontal{position:relative;float:left;margin-top:4px}
.spinner-master .diagonal.part-2{position:relative;float:left;margin-top:4px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal{opacity:0}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1{transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-12px}
a.menu-link{display:block;color:#fff;float:left;text-decoration:none;padding:10px 16px;font-size:1.5em}
a.menu-link:hover{color:#efa666}
a.menu-link:after{content:"2630";font-weight:normal}
a.menu-link.active:after{content:"2715"}
.menu{clear:both;min-width:inherit;float:none;top:0;position:relative}
.menu,.menu > ul ul{overflow:hidden;max-height:0;background-color:#39484d}
.menu > li > ul.sub-menu{padding:0;border:none}
.menu.active,.menu > ul ul.active{max-height:55em}
.menu ul{display:inline}
.menu li,.menu > ul > li{display:block}
.menu > ul > li:last-of-type a{border:none}
.menu li a{color:#fff;display:block;padding:0.8em;position:relative}
.menu li.has-submenu > a:after{content:"+";position:absolute;top:0;right:0;display:block;font-size:1.5em;padding:0.55em 0.5em}
.menu li.has-submenu > a.active:after{content:"-"}
.menu ul ul > li a{background:#666;padding:10px 18px 10px 30px;border-bottom:1px solid #111}
.menu ul li a:hover{background:#4b5f65;color:#fff}
.menu ul li.hover > a{background:#111;color:#fff}
.menu ul ul,.menu ul ul ul{display:inherit;position:relative;left:auto;top:auto;border:none}
.search_box.active{position:absolute;top:0;z-index:10;width:70%;right:45px;padding:7px 0}
.search_box input{width:50%;float:left}.search_box input.search_icon{width:30%;float:right;margin-right:14px;margin-top:-37px}}

HTML

<div class='nav_wrapper'>
<div class='ct-wrapper'>
 <div class='spinner-master'>
  <input id='spinner-form' type='checkbox'/>
  <label class='spinner-spin' for='spinner-form'>
    <div class='spinner diagonal part-1'/>
    <div class='spinner horizontal'/>
    <div class='spinner diagonal part-2'/>
  </label>
</div>
  <a class='btn' href='#search_box' id='search'><i class='fa fa-search'/></a>
<nav class='menu' id='menu'>
 <ul class='dropdown'>
   <li><a href='/' title='Link'> Home</a></li>
   <li><a href='/p/about.html' title='Link'> About</a></li> 
   <li><a href='/p/kontak.html' title='Link'> Kontak</a></li> 
   <li><a href='#' title='Link'>Categories <font size='1'>&#9660;</font></a>
<ul>
<li><a href='#' title='Link'>Label 1</a></li>
   <li><a href='#' title='Link'>Label 2</a></li>
  <li><a href='#' title='Link'>Label 3</a></li>
  <li><a href='#' title='Link'>Label 4</a></li>
  <li><a href='#' title='Link'>Label 5</a></li>
     </ul>
</li>
   <li><a href='#' title='Link'> Links</a></li> 
  </ul>
  </nav>
<form action='/search' class='search_box' id='search_box'> <input name='q' placeholder='Search here' type='text' value=''/> <input class='search_icon' type='submit' value='Search'/> </form>
</div>
    </div>
      <div class='clear'/>

JAVASCRIPT

<script type='text/javascript'>
$(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);
$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);
$(&quot;ul.dropdown li&quot;).hover(function() {
  $(this).addClass(&quot;hover&quot;)
}, function() {
  $(this).removeClass(&quot;hover&quot;)
});
var $menu = $(&quot;#menu&quot;),
  $menulink = $(&quot;#spinner-form&quot;),
  $search = $(&quot;#search&quot;),
  $search_box = $(&quot;.search_box&quot;),
  $menuTrigger = $(&quot;.has-submenu &gt; a&quot;);
$menulink.click(function(e) {
  $menulink.toggleClass(&quot;active&quot;);
  $menu.toggleClass(&quot;active&quot;);
  if ($search.hasClass(&quot;active&quot;)) {
    $(&quot;.menu.active&quot;).css(&quot;padding-top&quot;, &quot;50px&quot;)
  }
});
$search.click(function(e) {
  e.preventDefault();
  $search_box.toggleClass(&quot;active&quot;)
});
$menuTrigger.click(function(e) {
  e.preventDefault();
  var t = $(this);
  t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)
})
</script>

Demikian Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian di Blog Blogger. Good Luck and Happy Blogging! (www.contohblog.com).*

Lihat di CodePen

See the Pen Responsive Menu + Kotak Pencarian by CB Blogger (@cbblogger) on CodePen.