Tự Code Menu Cố Định Bằng HTML Và CSS

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.