Tự Code Menu Cố Định Bằng HTML Và CSS Hoặc Tham ngang Web

HTML

<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>
    </li>
  </ul>
</nav>

CSS

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

}

#fixNav{

  width: 45%;

  height: 35px;

  background-color: #FFCC00;

  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 bottom và right*/

  bottom: 0; /*Nằm dưới cùng*/

  right: 0; /*Nằm sát bên phả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-left: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-right: 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;

}

SHARE THIS