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 membuat top sajian responsive plus link media sosial, kali ini CB mengembangkan cara memasang sajian lainnya.

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

Menu Responsive Mobile

Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian

Menu Responsive Desktop

Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian

Cara Membuat Menu Responsive Dropdown + Kotak Pencarian

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

1. Tema > Edit HTML
2. Copas kode CSS berikut ini di atas isyarat ]]></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://4.bp.blogspot.com/-5E9T6vvulGk/WHrPw1i3vnI/AAAAAAAAP0k/Ch9F7Og54Lk7dc8Cco5NyrhetV2C3mEzACLcB/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://3.bp.blogspot.com/-bS8egjHLnoc/WHrPw409OZI/AAAAAAAAP0o/2Ej-_wUIyD4L_IsGRpYYsT2vO29hQTRGwCLcB/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 isyarat HTML berikut ini di bawah isyarat epilog header, ibarat </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 isyarat </body>

<script type='text/javascript'>
//<![CDATA[
/**
* navigation.js
*
* Handles toggling the navigation sajian 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;
sajian = container.getElementsByTagName( 'ul' )[0];
// Hide sajian toggle button if sajian is empty and return early.
if ( 'undefined' === typeof sajian ) {
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 memakai jenis aksara Poppins dan memakai Awesome Font, tambahkan isyarat berikut ini di bawah isyarat <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.idtutorial.com).*

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

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours