Cara Mudah Membuat Menu Nav Melayang Super Keren

Berikut ini adalah Artikel tentang Cara Mudah Membuat Menu Nav Melayang Super Keren.
untuk cara Membuatnya silahkan ikuti Cara berikut ini :

1. Letakkan Kode di bawah ini di atas Kode </body> atau </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: 'Open Sans', 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 > li {float:left;}
.sticky-menu ul > li > a {display:block;height:57px;line-height:56px;color:#fff;font-weight:bold;overflow:hidden;transition:all .35s ease;}
.sticky-menu ul > li > a.active {background:#e35959;color:#fff;}
.sticky-menu ul > li:hover > a,.sticky-menu ul li.homex {background:#e35959;color:#fff;}
.sticky-menu ul > li:hover > 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 > li:hover ul {display:block}
.sticky-menu ul ul > li {clear:both;overflow:hidden;background:rgba(22,3,48,.6);height:42px;z-index:9999;width:190px;}
.sticky-menu ul ul > li > 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 > li > 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>

2. Untuk Kode Pemanggilya silahkan letakkan kode di bawah ini di bawah Header atau di atas Content-wrapper

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFpKMnlW7xsU9e-M1vBDGwzV1pgBKeSZSVxzYX6s6seqi3Z1BchY7ZJEONRPqz61zeCKVJDMZYkoUIrTgmrCG6wwkvypLPho2NH92lkkP4D-P9mHLMwDzS-zVUQFpAyo1RLyjG7M34Is/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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' 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>

Cara Membuat Menu Melayang pada Menu yang Telah di buat :

1. tambahkan <div id=’floating’> di antara kode pemanggil menu blog.

Contoh :

<div id=’floating’>
KODE PAMANGGIL MENU DI BLOG YANG SUDAH ADA
</div>

2. Letakkan Kode di bawah ini dan letakkan di atas Kode </body> atau </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>

Demikian tadi Artikel Cara Mudah Membuat Menu Nav Melayang Super Keren.
Semoga Artikel ini bermanfa'at.

Ref : https://www.bungfrangki.com/2016/01/membuat-menu-melayang-saat-di-scroll.html

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.

irinmedia

Cara Mudah Membuat Menu Nav Melayang Super Keren

More posts

Comments