Cara Membuat Menu Navigation Simple di Samping Header Responsive

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Cara Membuat Menu Navigation Simple di Samping Header Responsive, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Javascript, Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Dikarenakan ada request cara membuat menu navigation di samping header seperti template evo magz redesign yang saya buat, maka dari itu saya membuat tutorial ini untuk memudahkan Anda membuatnya tanpa ada error ataupun yang lainnya.

Baca juga : Membuat Menu Navigasi Seperti Arlina Design

Navigasi ini sudah di lengkapi dengan search button yang simple & keren, berguna untuk Anda mencari sebuah postingan di blog Anda. Dan jangan lupa, widget ini di lengkapi dengan header/judul blog, berguna untuk mencari sebuah postingan terbaru di blog Anda.

Navigation Menu di Samping Header

Silakan pahami tutorial ini dengan baik untuk mendapatkan hasil yang memuaskan, jika mengalami error, silakan berkomentar dibawah, secepatnya akan saya tanggapi jika saya sedang online.

1. Login ke Blogger > Tema > Edit HTML
2. Silakan cari kode </style> atau ]]></b:skin>
3. Lalu Copy dan Paste kode dibawah ini di atas kode tersebut


/* NAVIGATION MENU */

.nav_wrapper{position:fixed;left:0;top:0;width:100%;transition:top .5s ease-out;background:#fff;border-bottom:1px solid #dedede;border-top:2px solid #ed4441;z-index:9999;text-decorati}

.fixed-top{background:#fff;margin:0 auto;padding:0;width:100%;height:auto;border-top:2px solid transparent;border-bottom:1px solid #dedede;position:fixed;top:0;left:0;z-index:9999}

#head-mt{padding:0;margin:0;width:100%}

.menu-header{width:100%;max-width:1050px;margin:0 auto}

nav{width:100%}

.scroll{top:0}

.no-scroll{top:0;z-index:9999}

.btn{padding:10px 1%;margin:5px;color:#ed4441;text-decoration:none;font-family:sans-serif;transition:all .1s ease}

.btn:hover{transition:all .1s ease;}

#search{float:right;font-size:30px;padding:2px 15px;line-height:40px;color:#ed4441;margin:0;font-weight:700;-webkit-transform:rotate(181deg);-moz-transform:rotate(181deg);-ms-transform:rotate(181deg);-o-transform:rotate(181deg);transform:rotate(181deg)}

#search:hover{color:#af2826}

.search_box{clear:both;width:100%;padding:0;margin:0;height:0;overflow:hidden;transition:all .1s ease-in-out}

.search_box.active{height:auto;padding:15px 0}

.search_box input{width:80%;font-size:13px;margin:0 15px;padding:10px;border:1px solid #eee;background:#fff;font-family:'PT Sans',sans-serif;color:#666;}

.search_box input:focus{outline:none}

.search_box input.search_icon{clear:both;width:10%;height:auto;padding:10px;margin:0;margin-left:-5px;border:none;color:#fff;cursor:pointer;background:#ed4441;opacity:1;transition:all .1s ease}

.search_box input.search_icon:hover{background:#af2826}

.menu-link{display:none}

.spinner-master input[type=checkbox]{display:none}

.menu{background:#ffffff;width:100%;height:auto;transition:all .3s ease}

.menu ul{font:normal bold 14px PT Sans;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:#f4f4f4;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:#ed4441;font-size:14px}

.menu ul li a:hover{background:#ed4441;color:#ffffff;}

.menu ul li.hover > a{background:#ed4441;color:#ffffff;}

.menu ul li > a{padding:15px 10px}

.menu ul ul{display:none;position:absolute;top:100%;min-width:160px;background:#ed4441}

.menu ul li:hover > ul{display:block}

.menu ul ul > li{position:relative}

.menu ul ul > li a{padding:10px 15px;height:auto;background:#ed4441;color:#fff}

.menu ul ul > li a:hover{background:#ed4441;color:#fff}

.menu ul ul ul{position:absolute;left:100%;top:0}

.menu a.fud{background:#fff;color:#228aff;border:1px solid #228aff;padding:6px 6px 5px;border-radius: 3px;margin-left: 3px;}

.menu a.fud:hover{background:#228aff;}

.menu a.active{background:#fff;color:#ed4441;border:1px solid #ed4441;padding:6px 6px 5px;border-radius: 3px;margin-left: 3px;}

.menu a.active:hover{background:#ed4441;}

.menu a.idn{background:#fff;color:#ff0036;border:1px solid #ff0036;padding:6px 6px 5px;border-radius: 3px;margin-left: 3px;}

.menu a.idn:hover{background:#ff0036;}

.menu a.cbd{background:#fff;color:#00a9e0;border:1px solid #00a9e0;padding:6px 6px 5px;border-radius: 3px;margin-left: 3px;}

.menu a.cbd:hover{background:#00a9e0;}

Lalu silakan Anda cari kode @media only screen and (max-width:768px){ lalu copas kode dibawah ini di bawah kode tersebut


.nav{float:none;width:100%;max-width:100%}

.active{display:block}

.example-header .container{width:100%}

#search{padding:10px}

.spinner-master *{transition:all 0.3s;box-sizing:border-box}

.spinner-master{position:relative;margin:15px;height:30px;width:30px;float:right}

.spinner-master label{cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:5px;left:0}

.spinner-master .spinner{position:absolute;height:4px;width:100%;padding:0;background-color:#ed4441}

.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:#333}

a.menu-link:after{content:"\2630";font-weight:normal}

a.menu-link.active:after{content:"\2715"}

.menu{clear:both;min-width:inherit;float:none}

.menu,.menu >ul ul{overflow:hidden;max-height:0;background-color:#f0f0f0}

.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-color:#f0f0f0;padding:10px 18px 10px 30px}

.menu a.fud,.menu a.idn,.menu a.active,.menu a.cbd{background:#f0f0f0;color:#ed4441;border:none}

.menu a.fud:hover,.menu a.idn:hover,.menu a.active:hover,.menu a.cbd:hover{background:#eee}

.menu ul li a:hover{background:#eee}

.menu ul li.hover >a{color:#333}

.menu ul ul,.menu ul ul ul{display:inherit;position:relative;left:auto;top:auto;border:none}

.search_box{position:absolute;top:60px;left:0;z-index:10;background:#f0f0f0;border-bottom:2px solid #ddd}

.search_box input{width:65%}

.search_box input.search_icon{width:17%}}

Silakan cari tag Stylenya yang tidak ada tag conditional untuk postingan, dikarenakan CSS ini digunakan untuk disemua halaman.

4. Silakan Anda cari kode </body>
5. Lalu Copy dan Paste kode Javascript dibawah ini di atas kode tersebut


<script type='text/javascript'>

//<![CDATA[

var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}

//]]>

</script>


<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;)});$(&quot;ul li:has(ul)&quot;);$(function(){var e=$(document).scrollTop();var t=$(&quot;.nav_wrapper&quot;).outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()&gt;=50){$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}else{$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}if(n&gt;t){$(&quot;.nav_wrapper&quot;).addClass(&quot;scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).removeClass(&quot;scroll&quot;)}if(n&gt;e){$(&quot;.nav_wrapper&quot;).removeClass(&quot;no-scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).addClass(&quot;no-scroll&quot;)}e=$(document).scrollTop()})})

</script>

6. Jika sudah, Copy dan Paste kode dibawah ini ke bawah kode <body> atau <body..

<div class='nav_wrapper' id='navimenu'>

<div id='head-mt'>

<div class='menu-header'>

<!-- header wrapper start -->

<header itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

<div id='header-wrapper'>

<div class='menu-header'>

<b:section class='header section' id='header' showaddelement='no'>

  <b:widget id='Header1' locked='false' title='Evo Magz (Header)' type='Header' version='1'>

    <b:widget-settings>

      <b:widget-setting name='displayUrl'/>

      <b:widget-setting name='displayHeight'>0</b:widget-setting>

      <b:widget-setting name='sectionWidth'>-1</b:widget-setting>

      <b:widget-setting name='useImage'>false</b:widget-setting>

      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>

      <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>

      <b:widget-setting name='displayWidth'>0</b:widget-setting>

    </b:widget-settings>

    <b:includable id='main'>



  <b:if cond='data:useImage'>

    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>

      <!--

      Show image as background to text. You can't really calculate the width

      reliably in JS because margins are not taken into account by any of

      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum

      width if the user is using shrink to fit.

      This results in a margin-width's worth of pixels being cropped. If the

      user is not using shrink to fit then we expand the header.

      -->

      <b:if cond='data:mobile'>

          <div id='header-inner'>

            <div class='titlewrapper' style='background: transparent'>

              <h1 class='title' style='background: transparent; border-width: 0px'>

                <b:include name='title'/>

              </h1>

            </div>

            <b:include name='description'/>

          </div>

        <b:else/>

          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>

            <div class='titlewrapper' style='background: transparent'>

              <h1 class='title' style='background: transparent; border-width: 0px'>

                <b:include name='title'/>

              </h1>

            </div>

            <b:include name='description'/>

          </div>

        </b:if>

    <b:else/>

      <!--Show the image only-->

      <div id='header-inner'>

        <a expr:href='data:blog.homepageUrl' style='display: block'>

          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

        </a>

        <!--Show the description-->

        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>

          <b:include name='description'/>

        </b:if>

      </div>

    </b:if>

  <b:else/>

    <!--No header image -->

    <div id='header-inner'>

      <div class='titlewrapper'>

        <h1 class='title'>

          <b:include name='title'/>

        </h1>

      </div>

      <b:include name='description'/>

    </div>

  </b:if>

</b:includable>

    <b:includable id='description'>

  <div class='descriptionwrapper'>

    <p class='description'><span><data:description/></span></p>

  </div>

</b:includable>

    <b:includable id='title'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <data:title/>

  <b:else/>

    <a expr:href='data:blog.homepageUrl'><data:title/></a>

  </b:if>

</b:includable>

  </b:widget>

</b:section>

</div>



<div class='clear'/>

</div>

</header>

<!-- header wrapper end -->

<!-- navigation start -->

<!--<a class="menu-link" href="#menu"></a>-->

<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'>&#9740;</a>

<nav class='menu' id='menu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

<ul class='dropdown'>

<li><a href='/search/label/Berita%20Unik' itemprop='url'><span itemprop='name'>Berita Unik</span></a></li>

<li><a href='/search/label/Islam' itemprop='url'><span itemprop='name'>Dunia Islami</span></a></li>

<li><a href='/search/label/Top%205' itemprop='url'><span itemprop='name'>Top 5</span></a></li>

<li><a href='/search/label/Video' itemprop='url'><span itemprop='name'>Video</span></a></li>

<li><a href='/search/label/Viral' itemprop='url'><span itemprop='name'>Viral</span></a></li>

<li><a class='active' href='http://otomotif.makintau.com' itemprop='url'><span itemprop='name'>OTO</span></a></li>

<li><a class='fud' href='http://www.fudfact.com' itemprop='url' target='_blank'><span itemprop='name'>FUD</span></a></li>

<li><a class='idn' href='http://www.idnetizen.com' itemprop='url' target='_blank'><span itemprop='name'>IDN</span></a></li>

<li><a class='cbd' href='http://www.combades.com' itemprop='url' target='_blank'><span itemprop='name'>CBD</span></a></li>

</ul>

</nav>

<!-- navigation end -->

<!-- search form start -->

<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>

<form action='https://www.google.com/search' class='search_box' id='search_box' method='get' target='_blank'>

<input name='as_sitesearch' type='hidden' value='https://demoevomagzredesign.blogspot.co.id/'/>

<input name='ie' type='hidden' value='ISO-8859-1'/>

<input id='search-form' name='q' placeholder='Cari disini....' required='required' type='text'/><input class='search_icon' type='submit' value='Cari'/></form>

</div>

<!-- search form end -->

</div>

</div>

</div>