Latest News

Cara Membuat Menu Navigasi Dengan Dropdown Menu - CSS Responsive & Melayang/Sticky

Menu navigasi sangat penting dalam suatu blog. Dan merupakan salah satu syarat yang wajib ada kalau anda ingin mendaftarkan blog anda ke google adsense. Sesuai dengan fungsinya ,menu navigasi ialah membantu pengunjung untuk mencari artikel yang mereka cari dan butuhkan. Oleh karena itu,navigasi sangat penting untuk mendaftar adsense.

Menu navigasi ini dibuat dengan CSS keren dan didesign dengan bootstrap. Selain itu navigasi ini juga memiliki fitur melayang atau sticky. Selain melayang,navigasi ini juga sudah dilengkapi dengan search box atau kotak pencarian yang terletak dikiri navigasi ibarat pada menu navigasi template evo magz. 

Anda juga tidak perlu repot-repot untuk membuat widget search box lagi di blog anda. Anda mampu mengubah dan mengotak-atik arahan yang ada untuk mempercantik menu navigasi. Berikut gambar design navigasi tersebut 👇

Cara Membuat Menu Navigasi + Search Box Responsive & Melayang

Menu navigasi ini responsive sehingga tidak akan mengganggu pengunjung kalau dibuka via mobile. Menu navigasi ini juga akan melayang kalau pengunung blog mengscroll down kebawah,maka navigasi ini akan melayang. Banyak sekali cara untuk membuat floating menu dan sticky menu yang mampu menggunakan CSS,HTML,dan JavaScript. Bagi anda yang ingin memasang navigasi melayang ini silakan ikuti langkah dibawah ini. 

Cara Membuat Menu Navigasi + Search Box Melayang di Blogger

Langkah 1
Masuk ke blogger,klik Template/Tema → Edit HTML

Langkah 2
Salin arahan dibawah ini lalu letakkan diatas arahan </body>

<style type='text/css'> /* Menu and Search */ .menu-wrapper{width:100%;max-width:1000px;margin:0 auto;padding:0;position:relative} .sticky-menu{font-family: &#39;Open Sans&#39;, arial;background:#2d2d2d;width:auto;padding:0;margin:0;font-size:15px;font-weight:400} .sticky-menu ul{margin:0 auto;padding:0;float:left} .sticky-menu ul a {display:block;padding:0 15px;} .sticky-menu ul li{position:relative;margin:0;} .sticky-menu ul &gt; li {float:left;} .sticky-menu ul &gt; li &gt; a {display:block;height:57px;line-height:56px;color:#fff;font-weight:bold;overflow:hidden;transition:all .35s ease;} .sticky-menu ul &gt; li &gt; a.active {background:#e35959;color:#fff;} .sticky-menu ul &gt; li:hover &gt; a,.sticky-menu ul li.homex {background:#e35959;color:#fff;} .sticky-menu ul &gt; li:hover &gt; a.active {background:#e35959} .sticky-menu ul li a img{vertical-align:middle!important;height:10px;width:14px} .sticky-menu ul ul {display:none;list-style:none;position:absolute;top:100%;width:190px;z-index:9999;overflow:hidden} .sticky-menu ul &gt; li:hover ul {display:block} .sticky-menu ul ul &gt; li {clear:both;overflow:hidden;background:rgba(22,3,48,.6);height:42px;z-index:9999;width:190px;} .sticky-menu ul ul &gt; li &gt; a {margin:0;color:#fff !important;padding:0 15px;text-align:left;height:42px;line-height:41px;width:190px;z-index:9999} .sticky-menu ul ul &gt; li &gt; a:hover {color:#fff !important;background:#e35959} /* Sticky menu */ .makesticking2{position:fixed!important;padding:0!important;top:0;max-width:100%;left:0;right:0;z-index:99999} </style> <script type='text/javascript'> //<![CDATA[ var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("floating");}//]]> </script>

Langkah 3
Lalu letakkan arahan pemanggilnya dibawah header dengan meletakkannya dibawah arahan </header> atau juga mampu anda letakkan diatas conten wrapper.

<div id=’floating’> <div class='menu-wrapper' id='floating'> <nav class='sticky-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>  <ul>    <li class='homex'><a href='/' itemprop='url' title='home'><img alt='Home' expr:title='data:blog.title' height='12' src='http://2.bp.blogspot.com/-eXDzvmiaYcc/VktrFQnAsPI/AAAAAAAAGJQ/ECTgSNQKlzs/s1600/siminihome.png' width='14'/> Home</a></li>    <li><a href='/search/label/Amazing' itemprop='url' title='Amazing'><span itemprop='name'>Amazing</span></a></li>    <li><a href='/search/label/Black' itemprop='url' title='Black'><span itemprop='name'>Black</span></a></li>    <li><a href='/search/label/Speed' itemprop='url' title='Speed'><span itemprop='name'>Speed</span></a></li>    <li><a href='/search/label/Sport' itemprop='url' title='Sport'><span itemprop='name'>Sport</span></a></li>    <li><a href='/search/label/Style' itemprop='url' title='Style'><span itemprop='name'>Style</span></a></li> <li><a href='#' itemprop='url' title=''><span itemprop='name'>Other</span></a> <ul> <li><a href='/search/label/Red' itemprop='url' title='Red'><span itemprop='name'>Red Car</span></a></li> <li><a href='/search/label/Modern' itemprop='url' title='Modern'><span itemprop='name'>Modern</span></a></li> <li><a href='/search/label/ThankYou' itemprop='url' title='Thank You'><span itemprop='name'>Thank You</span></a></li> </ul> </li>     </ul> <form action='/search' id='search-wrapper' method='get'><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 here...'/></td> <td class='search-button'><input id='search-button' type='submit' value='Go'/></td></tr></tbody></table></form>     <div class='clear'/> </nav>     <div class='clear'/> </div></div> 

Langkah 4
Untuk membuat menu navigasi menadi melayang maka silakan salin arahan dibawah lalu letakkan diatas arahan </body>
 
<script type='text/javascript'> //<![CDATA[ var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("floating");} //]]> </script>

Cukup sekian tutorial cara membuat menu navigasi + search box responsive dan melayang yang mampu aku bagikan. Semoga bermanfaat.