1. Chèn css dưới vào blog:
/* Chiase78 Mobile Navigation */
.mobileNav{position:absolute;width:100%;background:#fff;display:none;z-index:99}
.mobileNav-open{display:block}
.mobileNavlist1{width:90%;font-size:1rem;background:#ccc;color:#fff;margin:0;padding:0}
.mobileNavlist1 li a{color:#fff;display:block;padding:10px 10px 10px 20px;font-weight:700}
.mobileNavlist1 li.active{background:#464646}
.mobileNavlist1 li.active > a{color:rgba(255,255,255,1)}
.mobileNavlist1 li.active .mobileNavsublist{display:block}
.mobileNavtem{display:block;padding:16px;color:rgba(255,255,255,0.9)}
.mobileNavsublist{display:none;top:0;text-align:left;margin:0}
.mobileNavsublist li a{color:#fff;display:block;font-weight:400}.mobileNavsublist li a:hover{background:#3c84b3;color:#fff}
.mobileNavlist1 .icon-text{color:#fff;font-weight:700}
.mobileNavsublist_item{display:block;width:100%;padding:20px;color:#464646;font-weight:700}
.navbaru{width:100%;}
.mobme{padding:20px 20px;cursor:pointer;}
[class^="line-"]{display:block;height:3px;width:28px;background:#464646;border-radius:1px}
.line-1,.line-2{margin-bottom:5px}
[class^="icon-"]{margin:0 auto;display:block}
.mobme-open .line-1{-webkit-animation:mobme-line1-open .2s forwards ease-in;animation:mobme-line1-open .2s forwards ease-in}
.mobme-open .line-2{-webkit-animation:mobme-line2-open .2s forwards ease-in;animation:mobme-line2-open .2s forwards ease-in}
.mobme-open .line-3{-webkit-animation:mobme-line3-open .2s forwards ease-in;animation:mobme-line3-open .2s forwards ease-in}
@-webkit-keyframes mobme-line1-open{0%{-webkit-transform:translateY(0px);transform:translateY(0px)}100%{-webkit-transform:translateY(8px) rotate(45deg);transform:translateY(8px) rotate(45deg)}}
@keyframes mobme-line1-open{0%{-webkit-transform:translateY(0px);transform:translateY(0px)}100%{-webkit-transform:translateY(8px) rotate(45deg);transform:translateY(8px) rotate(45deg)}}
@-webkit-keyframes mobme-line2-open{0%{opacity:1}100%{opacity:0}}
@keyframes mobme-line2-open{0%{opacity:1}100%{opacity:0}}
@-webkit-keyframes mobme-line3-open{0%{-webkit-transform:translateY(0px);transform:translateY(0px)}100%{-webkit-transform:translateY(-8px) rotate(-45deg);transform:translateY(-8px) rotate(-45deg)}}
@keyframes mobme-line3-open{0%{-webkit-transform:translateY(0px);transform:translateY(0px)}100%{-webkit-transform:translateY(-8px) rotate(-45deg);transform:translateY(-8px) rotate(-45deg)}}
2. Chèn JS dưới vào trước </body>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(".mobme").on("click",function(){$(".mobme").toggleClass("mobme-open"),$(".mobileNav").toggleClass("mobileNav-open")}),$(".mobileNavlist1 li").on("click",function(){$(".mobileNavlist1 li").removeClass("active"),$(this).toggleClass("active")});
//]]>
</script>
3. Chèn code dưới vào nơi hiển thị:
<div class="navbaru">
<div class="mobme">
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
<nav class="mobileNav" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul class="mobileNavlist1">
<li class="active"><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Menu 1</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Menu 2</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Menu 3</span></a></li>
<li> <a class="ripplelink mobileNavtem" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"> <span class="icon-text" itemprop="name">Submenu 1</span> </a> <ul class="mobileNavsublist">
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
</ul>
</li>
<li> <a class="ripplelink mobileNavtem" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"> <span class="icon-text" itemprop="name">Submenu 2</span> </a> <ul class="mobileNavsublist">
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
</ul>
</li>
<li> <a class="ripplelink mobileNavtem" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"> <span class="icon-text" itemprop="name">Submenu 3</span> </a> <ul class="mobileNavsublist">
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Link</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Email</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">Chat</span></a></li>
<li><a class="ripplelink" href="https://www.blogger.com/blogger.g?blogID=1410474368144410329#" itemprop="url"><span itemprop="name">FAQ</span></a></li>
</ul>
</li>
</ul>
</nav>
Nhận xét
Đăng nhận xét