Tạo menu cố định khi scroll chuột

1. Trước hết, tạo một menu có dạng như sau:

<nav id="fixNav">

  <ul>

    <li><a href="#">Trang chủ</a></li>

    <li><a href="#">Izwebz Store</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>




2. Tiếp theo, tiến hành CSS cho menu

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

}

Chúc các bạn thành công !!!