[Code] Thanh nav đóng mở (màu mè)

avatar

Giựt243
397
82
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
243
Points :
397
Like :
82
Punbb
Cẩn thận
Éo có đối thủ

Đề mô

http://borutofans.forumvi.com/?tt=1#

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 , OK
Có 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á Razz


Tags: #nav #giựt


Được sửa bởi Giựt ngày 7/2/2018, 11:20 am; sửa lần 1.
 Trả lời bài viết
avatar

Admin277
553
97
Punbb
Quản trị
Việt đẹp trai
Founder
Founder

Bài viết :
277
Points :
553
Like :
97
Punbb
Quản trị
Việt đẹp trai
Có hình minh hoạ gì không em. nhìn cho dễ hình dung
 Trả lời bài viết
avatar

Giựt243
397
82
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
243
Points :
397
Like :
82
Punbb
Cẩn thận
Éo có đối thủ
@Admin đã viết:Có hình minh hoạ gì không em. nhìn cho dễ hình dung
Có nhưng mà nó là đóng mở, phải quay gif mà máy em ko quay đc :v
Hay là a vào forum e rồi chụp hộ e luôn
 Trả lời bài viết
avatar

Admin277
553
97
Punbb
Quản trị
Việt đẹp trai
Founder
Founder

Bài viết :
277
Points :
553
Like :
97
Punbb
Quản trị
Việt đẹp trai
@Giựt đã viết:
@Admin đã viết:Có hình minh hoạ gì không em. nhìn cho dễ hình dung
Có nhưng mà nó là đóng mở, phải quay gif mà máy em ko quay đc :v
Hay là a vào forum e rồi chụp hộ e luôn

anh vao forum của em chẳng thấy nav nào cả luôn Smile
 Trả lời bài viết
avatar

Giựt243
397
82
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
243
Points :
397
Like :
82
Punbb
Cẩn thận
Éo có đối thủ
@Admin đã viết:
@Giựt đã viết:
@Admin đã viết:Có hình minh hoạ gì không em. nhìn cho dễ hình dung
Có nhưng mà nó là đóng mở, phải quay gif mà máy em ko quay đc :v
Hay là a vào forum e rồi chụp hộ e luôn

anh vao forum của em chẳng thấy nav nào cả luôn Smile
#1 : Đã cập nhật rồi anh ơi =))
 Trả lời bài viết

Sponsored content

 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá