Tự Code Menu cố định bằng HTML và CSS

12

Trong một bài viết trước chúng ta đã tự code một Menu Sidebar Responsive khá ấn tượng. Và cũng trong bài viết đó tôi đã nói sơ qua về tầm quan trọng của Menu trên website. Trong bài viết này chúng ta cũng tạo một Menu nhưng sẽ thêm tính năng cố định khi người dùng scroll chuột. Cụ thể chúng ta chỉ sử dụng HTML và CSS mà thôi.

Đầu tiên chúng ta sẽ tạo một cấu trúc menu với HTML như sau:

<nav id="fixNav">
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li>
      <a href="#">Khác</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>

Bây giờ chúng ta sẽ tiến hành CSS cho menu với Code sau:

#fixNav{
  width: 100%;
  height: 35px;
  background-color: #265325;
  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;
}

Trong toàn bộ đoạn Code bên trên các bạn chỉ cần lưu ý đến giá trị fixNav.  Nếu như đối tượng nào được gán giá trị fixed, thì sẽ luôn luôn 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 tùy vào các bạn gán thuộc tính như thế nào. Trong đoạn Code bên trên tôi đã khai báo top và left đều bằng 0 để nó luôn nằm trên cùng, bên trái. Bên trên tôi để width:100% nên menu sẽ kéo dài toàn màn hình.

Xong rồi đấy, giờ là lúc chúng ta hưởng thành quả của đoạn Code bên trên. Mời các bạn cùng Demo.

See the Pen Self-fixed menu with HTML and CSS by Lại Văn Đức (@laivanduc) on CodePen.16775

12 Comments
  1. hoàng nói

    hay ông anh 😀

    1. Lại Văn Đức nói

      Sao trên Header site của em nó hiện dòng chữ kỳ lạ vậy. 🙂

      1. Đôi Guốc Mộc nói

        cái này chắc là định chèn keyword đây mà

        1. Hoàng Tuyến nói

          Lại gặp bác rồi bác Mộc ơi chỉ em cố định menu với. Template em thêm menu bằng bố cục nên vào chỉnh sửa HTML nó không có phần menu thì em k tìm được id mà thêm css cho nó -_-

          1. Star Trường nói

            Bác ib e giúp

  2. Sơn nói

    Cảm ơn bạn. Mình download theme tren mạng về dùng đã có menu cố định giờ mình muốn bỏ cố định thì vào đâu?

    1. Lại Văn Đức nói

      Nếu theme có phần cấu hình bạn hãy vào và tìm phần nào có chữ Stick menu và tắt đi. nếu không có thì tìm trong CSS thuộc tính Stick và xóa đi nhé.

  3. phavaphu nói

    Hình như kiểu menu này nó khác menu ẩn hiện trên trang laivanduc.com
    – Có code để làm giống như menu trang bạn không, share mình với!

  4. Kimmes nói

    A ơi. thế còn cái Menu như kiểu của web a đây là làm thế nào ạ? Bởi sau khi kéo cái logo với quảng cáo thì menu nó mới cố định lại

  5. Thắng nói

    làm giống mà mne không cố định TOP là sao add

  6. Khánh Nguyễn nói

    cảm ơn rất nhiều ạ

  7. demons nói

    làm sao tạo cái menu từ absolute sang fixed vậy ad.
    Giống như menu trang web hiện tại đây ạ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.