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

  • Giựt
    1. [Code] Thanh nav đóng mở (màu mè)
    avatar MOD

    Đề 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 07.02.18 11:20; sửa lần 1.

  • Admin
    2. Re: [Code] Thanh nav đóng mở (màu mè)
    avatar ACP
    Có hình minh hoạ gì không em. nhìn cho dễ hình dung


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • Giựt
    3. Re: [Code] Thanh nav đóng mở (màu mè)
    avatar MOD
    @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

  • Admin
    4. Re: [Code] Thanh nav đóng mở (màu mè)
    avatar ACP
    @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

  • Giựt
    5. Re: [Code] Thanh nav đóng mở (màu mè)
    avatar MOD
    @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 =))

  • Sponsored content

Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<