Code Menu Cố Định bằng HTML Và CSS

Code Menu Cố Định hay còn gọi là Menu Sticky. Kiểu Menu này được sử dụng rất nhiều và gần như trên hầu hết các website hiện đại. Ngay trên Blog Lại Văn Đức bạn cũng thấy Menu được fix cứng trên cùng khi bạn kéo xuống dưới.

Sử dụng dạng Menu này giúp người dùng dễ dàng thao tác với website hơn. Người dùng có thể nhanh chóng tìm và chuyển đến các đường dẫn bạn đặt trên Menu hơn.

Trước đó, mình cũng có chia sẻ một bộ Code Menu Sidebar Responsive. Bạn có thể tham khảo và sử dụng cho các dự án khác nhau của mình.

Code Menu Cố Định cho Website

Mỗi website có một phong cách thiết kế khác nhau, vì vậy thiết kế menu cũng cần phải phù hợp với phong cách của cả website. Có như vậy website mới thực sự hài hoà. Bộ code menu cố định trong bài viết này được thiết kế theo cách cơ bản nhất: Không hiệu ứng, không màu mè, không gì cả. Mời bạn xem demo bên dưới.

Mục tiêu của bộ code này là giữ cho Menu luôn nằm cố định trên cùng khi chúng ta thao tác trên website.

Code Menu Cố Định bằng HTML Và CSS

Để bắt đầu, chúng ta sẽ cần đến code HTML cho Menu.

<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>

Tiếp theo là CSS cho bộ Code Menu Cố Định này.

#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;
} 

Hoàn thành, chúng ta chỉ cần HTML và CSS để sử dụng cho mẫu Menu được demo bên trên.

Download Code Menu Cố Định

Để bạn dễ dàng hơn khi sử dụng và tham khảo. Bạn có thể download bộ code này về trong link bên dưới.

Như thường lệ, bạn hãy mở thư mục dist ra và mở file index.html trên trình duyệt để xem kết quả nhé.

Thế Thôi

Bài viết chia sẻ đến bạn những dòng Code Menu cố định cơ bản để bạn sử dụng cho các dự án của mình. Bạn có thể tham khảo và tuỳ chỉnh thêm cho phù hợp với nhu cầu. Chúc bạn thành công.