Đề mô
http://borutofans.forumvi.com/?tt=1#![[Code] Thanh nav đóng mở (màu mè) ToeXpnk](https://i.imgur.com/toeXpnk.jpg)
Cách làm
B1 : Chèn css sau :Code:
/*Nav*/
#main-nav{background:#212121;float:left;height:100%;position:fixed;z-index:999;display:none;}
.nav_li{padding:10px;height:50px;margin-bottom:45px;text-align:center;transition:0.1s;}
.nav_li a{color:white;text-transform:uppercase;font-size:20px;}
a[href="/"]:hover ,a[href="/?tt=1"]:hover{color:#e64a61!important;}
.nav_li svg{display:block;font-size:40px;text-align:center;margin-left:20px;margin-bottom:5px;}
.nav_li:first-child{margin-top:15px;}
B2: Vào overall_header :
- Chèn vào sau <head> :
Code:
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>- Tìm <body>, chèn vào sau nó :
Code:
<nav class="main-nav" id="main-nav">
<ul>
<li class="nav_li">
<a href="/">
<i class="fas fa-home"></i>
<span>Diễn đàn</span>
</a>
</li>
<li class="nav_li">
<a href="/profile?mode=editprofile">
<i class="fas fa-user"></i>
<span>Lý Lịch</span>
</a>
</li>
</ul>
</nav>
<button class="close" style="display:none;z-index:99999;position: fixed;bottom:0;color:white">Đóng</button>
<button class="open" style="display:block;z-index:99999;position: fixed;bottom:50%">Mở</button>
<script>
$(".open").click(function(){
$("#main-nav").fadeIn();
$(this).fadeOut();
$(".close").fadeIn(100);
});
$(".close").click(function(){
$("#main-nav").fadeOut();
$(this).fadeOut();
$(".open").fadeIn(100);
});
</script>Thường thức
Nhấn nút đóng / mở để mở nav , OKCó gì sai sót thì comment bên dưới =)
Made by Giựt - Copy nhớ ghi nguồn
p/s : Ai làm được r thì chụp lại demo để mình đăng nhá
Tags: #nav #giựt
Được sửa bởi Giựt ngày 2/7/2018, 11:20; sửa lần 1.
