Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript

Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript

Cara Memasang Menu Responsive + Kotak Pencarian Menggunakan Selectnav Javascript. Selectnav Menu Responsive. Penampakannya seperti gambar di bawah ini.

Selectnav Menu Responsive

1. Tema > Edit HTML
2. Copas kode JavaScript berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Plugin: SelectNav.js
window.selectnav=function(){"use strict";var e=function(e,t){function c(e){var t;if(!e)e=window.event;if(e.target)t=e.target;else if(e.srcElement)t=e.srcElement;if(t.nodeType===3)t=t.parentNode;if(t.value)window.location.href=t.value}function h(e){var t=e.nodeName.toLowerCase();return t==="ul"||t==="ol"}function p(e){for(var t=1;document.getElementById("selectnav"+t);t++);return e?"selectnav"+t:"selectnav"+(t-1)}function d(e){a++;var t=e.children.length,n="",l="",c=a-1;if(!t){return}if(c){while(c--){l+=o}l+=" "}for(var v=0;v<t;v++){var m=e.children[v].children[0];if(typeof m!=="undefined"){var g=m.innerText||m.textContent;var y="";if(r){y=m.className.search(r)!==-1||m.parentNode.className.search(r)!==-1?f:""}if(i&&!y){y=m.href===document.URL?f:""}n+='<option value="'+m.href+'" '+y+">"+l+g+"</option>";if(s){var b=e.children[v].children[1];if(b&&h(b)){n+=d(b)}}}}if(a===1&&u){n='<option value="">'+u+"</option>"+n}if(a===1){n='<select class="selectnav" id="'+p(true)+'">'+n+"</select>"}a--;return n}e=document.getElementById(e);if(!e){return}if(!h(e)){return}if(!("insertAdjacentHTML"in window.document.documentElement)){return}document.documentElement.className+=" js";var n=t||{},r=n.activeclass||"active",i=typeof n.autoselect==="boolean"?n.autoselect:true,s=typeof n.nested==="boolean"?n.nested:true,o=n.indent||"?",u=n.label||"Menu",a=0,f=" selected ";e.insertAdjacentHTML("afterend",d(e));var l=document.getElementById(p());if(l.addEventListener){l.addEventListener("change",c)}if(l.attachEvent){l.attachEvent("onchange",c)}return l};return function(t,n){e(t,n)}}();$(document).ready(function(){selectnav('menu-main-nav');selectnav('menu-main-nav');});
$("#LinkList94").each(function () {
var k = "<ul id='menu-main-nav'><li><ul class='sub-menu'>";
$("#LinkList94 li").each(function () {
var a = $(this).text(),
o = a.substr(0, 1),
p = a.substr(1);
"_" == o ? (o = $(this).find("a").attr("href"), k += '<li><a href="' + o + '">' + p + "</a></li>") : (o = $(this).find("a").attr("href"), k += '</ul></li><li><a href="' + o + '">' + a + "</a><ul class='sub-menu'>")
});
k += "</ul></li></ul>";
$(this).html(k);
$("#LinkList94 ul").each(function () {
var k = $(this);
if (k.html().replace(/\s|&nbsp;/g, "").length == 0) k.remove()
});
$("#LinkList94 li").each(function () {
var k = $(this);
if (k.html().replace(/\s|&nbsp;/g, "").length == 0) k.remove()
})
});
$(document).ready(function ($) {
$("#menu").show();
$("ul.sub-menu").parent("li").addClass("has-children");
$('#search-icon').on('click', function () {
$('#nav-search').slideToggle(0)
});
//]]>
</script>

3. Copas kode CSS Menu Responsive berikut ini di atas kode ]]></b:skin>

#menu{display:none}
#main-nav{background-color:#003399;position:relative;width:100%;height:50px;font-size:12px;font-weight:700;}
#main-nav .row{height:50px;position:relative;padding:0}
li.li-home{float:left;display:inline-block;padding:0}
li.li-home a {padding-left:0 !important}
#main-nav li{position:relative;float:left;height:50px;line-height:50px;padding:0}
#main-nav li:hover a{color:#131313;}
#main-nav a{float:left;color:#fff;padding:0 16px;text-transform:uppercase}
#main-nav ul li.has-children a:after{content:"\f107";font-size:14px;font-family:FontAwesome;font-weight:400;position:relative;padding-left:5px}
#main-nav ul li ul{display:none;position:absolute;left:0;top:50px;z-index:100;background-color:#fff}
#main-nav ul li:hover > ul{display:block}
#main-nav ul li ul:before{content:"\f0d8";font-family:FontAwesome;color:#fff;position:absolute;left:20px;top:-13px;font-size:19px;height:19px;font-weight:400;line-height:1}
#main-nav ul li ul li{height:auto;clear:both;margin-left:0;line-height:normal;border-right:none;border-bottom:1px solid #eee}
#main-nav ul li ul li:last-child{border-bottom:none}
#main-nav ul li ul li::after{content:'';display:none}
#main-nav ul li ul li:hover {background-color: #f9f9f9;}
#main-nav ul li ul li a{min-width:150px;padding:0 16px;margin-top:0;font-size:12px;color:#666!important;font-weight:400;text-transform:capitalize;line-height:38px;transition:all 0s ease;border:none}
#main-nav ul li ul li a:hover {color:#003399!important}
#main-nav ul li ul li a:after{display:none}
#main-nav ul li ul ul{left:100%;top:0}
.selectnav{display:none}
#search-icon{position:absolute;right:0;top:0;display:block;line-height:50px;height:50px;color:#fff;font-size:18px;text-align:right;cursor:pointer;padding-left:10px}
#search-icon:hover{color:#131313}
#nav-search{position:absolute;right:0;top:50px;z-index:50;display:none;width:300px;height:60px;background-color:#fff}
#nav-search:before{content:"\f0d8";font-family:FontAwesome;color:#fff;position:absolute;right:0;top:-13px;font-size:19px;height:20px;font-weight:400;line-height:1}
#nav-search #searchform{box-sizing:border-box;overflow:hidden;height:60px;color:#666;position:relative;padding:12px}
#nav-search #s{position:relative;height:36px;padding:0 12px;border:1px solid #eee;font-family:'Poppins',sans-serif;font-size:12px;color:#666;box-sizing:border-box;width:100%;border-radius:2px;line-height:36px}
@media screen and (max-width: 920px) {
#menu-main-nav{display:none}
#menu{float:left;width:30%;height:50px}
.selectnav{display:block;border-radius:2px!important;background:rgba(255,255,255,0.2);color:#fff;height:30px;width:100%;line-height:30px;margin-top:10px;border:0}
.selectnav option {color:#222;}
}
@media screen and (max-width: 360px) {
#nav-search{width:100%}
}

4. Copas kode HTML  Menu Responsive berikut ini di bawah kode </header> atau setelah kode header blog Anda.

<!-- Main Menu -->
<nav id='main-nav'>
<div class='row'>
   <li class='li-home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <b:section id='menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
      <b:widget id='LinkList94' locked='true' title='Main Menu' type='LinkList' version='1'>
        <b:includable id='main'>
          <div class='widget-content'>
            <ul itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
              <b:loop values='data:links' var='link'>
                <li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
              </b:loop>
           </ul>
          </div>
        </b:includable>
      </b:widget>
    </b:section>
  <span id='search-icon'><i class='fa fa-search'/></span>
<div id='nav-search'>
<form action='/search/max-results=7' id='searchform' method='get'>
  <input id='s' name='q' placeholder='Type and hit enter...' type='text'/>
</form>
</div>
</div>
</nav>
<!-- Main Menu (end) -->
<div class='clear'/>

Kode LAYOUT
Simpan di atas kode ]]></b:skin> atau dijajaran kode body#layout yang sudah ada.

body#layout #main-nav{height:auto;min-height:87px;overflow:hidden;padding-bottom:1px}
body#layout #main-nav .section{display:block;background-color:#3598db;border-color:#2980b9}
body#layout #main-nav .section h4{padding-bottom:3px;color:#fff}
body#layout #main-nav .section .widget-content{border-color:#fff}
body#layout li.li-home{display:none}
body#layout #main-nav .row{height:auto}

Save!
Klik Layout/Tata Letak untuk memasukkan daftar menu/link menu menggunakan Link List Widget yang sudah ada.

Demikian Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript. Good Luck & Happy Blogging! (www.contohblog.com).

Sumber

Thanks for reading Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript | Labels: Desain Blog
0 Komentar untuk "Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *