Hướng dẫn Cách làm menu cố định khi scroll chuột

Thảo luận trong 'CSS' bắt đầu bởi PVS, 24/03/2017.

  • Google checker:
  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    9,578
    Đã được thích:
    6,326
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    Cách làm menu cố định khi scroll chuột

    Floating menu thực sự không phải là một thủ thuật gì mới và ghê gớm lắm đâu. Nó có từ rất lâu rồi và cách dùng nó cũng thực sự không quá khó. Trong bài viết này mình sẽ hướng dẫn các bạn tạo một floating menu cho website và áp dụng nó vào trong XenForo.

    #Tạo hình với HTML & CSS
    Trước hết thì mình cần phải xây dựng trước một cấu trúc menu với HTML
    HTML:
    <nav id="fixNav">
      <ul>
        <li><a href="#">Trang chủ</a></li>
        <li><a href="#">Diễn đàn</a></li>
        <li><a href="#">Newbie</a></li>
        <li>
          <a href="#">Video</a>
          <ul class="sub-menu">
            <li><a href="#">Html & CSS</a></li>
            <li><a href="#">PHP & MySQL</a></li>
            <li><a href="#">jQuery</a></li>
         </ul>
        </li>
      </ul>
    </nav>
    Dựa vào cấu trúc trên thì các bạn có thể thấy, menu được xây dựng có 2 cấp. Bây giờ các bạn hãy tiến hành CSS cho menu.
    Mã:
    #fixNav{
      width: 100%;
      height: 35px;
      background-color: #0082bb;
      display: block;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.5); /*Đổ bóng cho menu*/
      position: fixed; /*Cho menu cố định 1 vị trí với top và left*/
      top: 0; /*Nằm trên cùng*/
      left: 0; /*Nằm sát bên trái*/
      z-index: 100000; /*Hiển thị lớp trên cùng*/
    }
    #fixNav ul{
      margin: 0;
      padding: 0;
    }
    #fixNav ul li{
      list-style:none inside;
      width: auto;
      float: left;
      line-height: 35px; /*Cho text canh giữa menu*/
      color: #fff;
      padding: 0;
      margin-right:10px;
      position: relative;
    }
    #fixNav ul li a{
      text-transform: uppercase;
      white-space: nowrap; /*Cho chữ trong menu không bị wrap*/
      padding: 0 10px;
      color: #fff;
      display: block;
      font-size: 0.8em;
      text-decoration: none;
    }
    /*CSS Style cho Submenu*/
    #fixNav ul li ul {
      position: absolute;
      width: auto;
      display: none;
      background-color: #252525;
      border-bottom: 3px solid #0082bb;
      padding-left: 5px;
    }
     
    #fixNav ul li ul li{
      display: block;
      padding:0;
      margin: 0;
      float: none; /*Bỏ float cho li cấp thứ 2*/
    }
    /* Hover cho submenu */
    #fixNav ul li:hover {
      /* Hover thì li sẽ đổi màu*/
      background-color: #252525;
    }
    #fixNav ul li:hover ul{
      /*Display ra submenu*/
      display: block;
    }
    /*Không copy cái này, dùng tăng padding top bottom để demo cuộn*/
    p{
      padding-top: 80px;
      padding-bottom: 80px;
    }
    Giải thích ý nghĩa của css mình có chú thích comment phía trong code. Các bạn có thể xem và tham khảo.

    Sau khi làm xong menu như trên thì các bạn đã có cho mình một cái floating menu rồi đó. Bây giờ mình sẽ giải thích rõ hơn. Các bạn hãy quan sát trong css chỗ đầu tiên, khai báo cho #fixNav.
    Mã:
    #fixNav{
      width: 100%;
      height: 35px;
      background-color: #0082bb;
      display: block;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.5); /*Đổ bóng cho menu*/
      position: fixed; /*Cho menu cố định 1 vị trí với top và left*/
      top: 0; /*Nằm trên cùng*/
      left: 0; /*Nằm sát bên trái*/
      z-index: 100000; /*Hiển thị lớp trên cùng*/
    }
    Các bạn có thể quan sát thấy css position có giá trị là fixed. Với bất kỳ đối tượng nào được gán css position có giá trị fixed, thì sẽ được cố định tại một vị trí nhất định. Vị trí đó sẽ phụ thuộc vào giá trị top left bottom right. Trong trường hợp này mình khai báo top và left đều bằng 0, tức nó sẽ nằm trên cùng, bên trái. Do width:100% nên menu sẽ kéo dài toàn màn hình. Các bạn có thể xem demo và code bên dưới này:

    HTML:
    HTML:
    <nav id="fixNav">
      <ul>
        <li><a href="#">Trang chủ</a></li>
        <li><a href="#">Diễn đàn</a></li>
        <li><a href="#">Newbie</a></li>
        <li>
          <a href="#">Video</a>
          <ul class="sub-menu">
            <li><a href="#">Html & CSS</a></li>
            <li><a href="#">PHP & MySQL</a></li>
            <li><a href="#">jQuery</a></li>
         </ul>
        </li>
      </ul>
    </nav>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor, beatae corrupti, totam, vitae est mollitia similique repudiandae tempore odio minus et id quos, laboriosam facilis. Minima molestias iusto, voluptas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor, beatae corrupti, totam, vitae est mollitia similique repudiandae tempore odio minus et id quos, laboriosam facilis. Minima molestias iusto, voluptas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor, beatae corrupti, totam, vitae est mollitia similique repudiandae tempore odio minus et id quos, laboriosam facilis. Minima molestias iusto, voluptas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor, beatae corrupti, totam, vitae est mollitia similique repudiandae tempore odio minus et id quos, laboriosam facilis. Minima molestias iusto, voluptas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor, beatae corrupti, totam, vitae est mollitia similique repudiandae tempore odio minus et id quos, laboriosam facilis. Minima molestias iusto, voluptas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dolor, beatae corrupti, totam, vitae est mollitia similique repudiandae tempore odio minus et id quos, laboriosam facilis. Minima molestias iusto, voluptas.</p>
    Mã:
    #fixNav{
      width: 100%;
      height: 35px;
      background-color: #0082bb;
      display: block;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.5); /*Đổ bóng cho menu*/
      position: fixed; /*Cho menu cố định 1 vị trí với top và left*/
      top: 0; /*Nằm trên cùng*/
      left: 0; /*Nằm sát bên trái*/
      z-index: 100000; /*Hiển thị lớp trên cùng*/
    }
    #fixNav ul{
      margin: 0;
      padding: 0;
    }
    #fixNav ul li{
      list-style:none inside;
      width: auto;
      float: left;
      line-height: 35px; /*Cho text canh giữa menu*/
      color: #fff;
      padding: 0;
      margin-right:10px;
      position: relative;
    }
    #fixNav ul li a{
      text-transform: uppercase;
      white-space: nowrap; /*Cho chữ trong menu không bị wrap*/
      padding: 0 10px;
      color: #fff;
      display: block;
      font-size: 0.8em;
      text-decoration: none;
    }
    /*CSS Style cho Submenu*/
    #fixNav ul li ul {
      position: absolute;
      width: auto;
      display: none;
      background-color: #252525;
      border-bottom: 3px solid #0082bb;
      padding-left: 5px;
    }
    
    #fixNav ul li ul li{
      display: block;
      padding:0;
      margin: 0;
      float: none; /*Bỏ float cho li cấp thứ 2*/
    }
    /* Hover cho submenu */
    #fixNav ul li:hover {
      /* Hover thì li sẽ đổi màu*/
      background-color: #252525;
    }
    #fixNav ul li:hover ul{
      /*Display ra submenu*/
      display: block;
    }
    /*Không copy cái này, dùng tăng padding top bottom để demo cuộn*/
    p{
      padding-top: 80px;
      padding-bottom: 80px;
    }
    Kết quả:

    1.gif
    #Tích hợp thêm jQuery
    Nếu các bạn muốn Menu chỉ hiển thị khi bạn cuộn website đến một vị trí nào đó thì chúng ta sẽ tiến hành dùng jQuery để thực hiện điều đó. Quy trình hoạt động thì sẽ như vậy: Cuộn chuột đến một móc có giá trị là 150px thì menu sẽ hiển thị ra. Các bạn hãy thêm đoạn code jQuery này vào, ý nghĩa mình đã có comment phía trong.
    Mã:
    jQuery(document).ready(function($) {   
      //selector đến menu cần làm việc
      var TopFixMenu = $("#fixNav");
      // dùng sự kiện cuộn chuột để bắt thông tin đã cuộn được chiều dài là bao nhiêu.
        $(window).scroll(function(){
        // Nếu cuộn được hơn 150px rồi
            if($(this).scrollTop()>150){
          // Tiến hành show menu ra   
            TopFixMenu.show();
            }else{
          // Ngược lại, nhỏ hơn 150px thì hide menu đi.
                TopFixMenu.hide();
            }}
        )
    })
    Lưu ý: các bạn cần phải chèn thư viện jquery vào trước khi dùng.
    Tuy nhiên, bây giờ menu vẫn chưa hoạt động. Bạn hãy quay lại css và chỉnh sửa khai báo ở đoạn #fixNav với giá trị display:block thành display:none. Nguyên nhân là chúng ta muốn menu nó ẩn từ đầu, chỉ khi cuộn chuột vượt mốc giá trị nào đó nó mới hiện ra thôi.

    Kết quả:

    2.gif
    #Kết luận
    Dùng position:fixed để tạo một đối tượng cố định tại một vị trí nào đó trên website không khó. Quan trọng nhất vẫn là ý tưởng của mình để xây dựng nó là một đối tượng đặc biệt hay là một đối tượng dư thừa. Bạn có thể tham khảo một số demo bên dưới này để tạo cảm hướng cho mình.

    Hãy đăng nhập hoặc đăng ký để xem được links
    Website này dùng menu ở phía bên trái

    Hãy đăng nhập hoặc đăng ký để xem được links
    Menu top thay đổi khi cuộn đến mốc nào đó

    Hãy đăng nhập hoặc đăng ký để xem được links
    Top fixed menu sáng tạo
    Chúc các bạn thành công.


    Nguồn: izwebz.com​
     
    Bài viết mới
    Sơ lược và so sánh giữa Less và Sass
    Sơ lược và so sánh giữa Less và Sass bởi PVS, 15/06/2017 lúc 13:38:23
    Cách sử dụng CSS Shapes để tạo hình
    Cách sử dụng CSS Shapes để tạo hình bởi PVS, 15/06/2017 lúc 13:27:55
    tuna thích bài này.
  2. tuna

    tuna Thượng Đế

    Tham gia:
    30/01/2017
    Bài viết:
    641
    Đã được thích:
    244
    Điểm thành tích:
    43
    Giới tính:
    Nam
    thank bác để thử, có làm theo hướng dẫn mấy cái mà lỗi quá :(
     
  3. hoangkien

    hoangkien Thượng Đế

    Tham gia:
    03/03/2017
    Bài viết:
    30
    Đã được thích:
    18
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Bác @PVS ơi, cụ thể là thêm vào những templete nào nhỉ?
     
  4. pukaseo

    pukaseo Thượng Đế

    Tham gia:
    08/08/2018
    Bài viết:
    6
    Đã được thích:
    0
    Điểm thành tích:
    1
    Nơi ở:
    Thanh Hóa
    Làm menu kiểu này mình thấy rất khó chịu bởi nó chiếm diện tích màn hình quá
     

Chia sẻ trang này

Đang tải...