Cách tạo: Menu cuộn ngang

Học cách sử dụng CSS để tạo menu cuộn ngang.

Home News Contact About Support Blog Tools Base Custom More Logo Friends Partners People Work

Thử ngay

Cách tạo menu cuộn ngang

Bước 1 - Thêm HTML:

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  ...
</div>

Bước 2 - Thêm CSS:

Cách làm cho thanh menu điều hướng có thể cuộn là sử dụng overflow:auto và white-space:nowrap:

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}
div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
div.scrollmenu a:hover {
  background-color: #777;
}

Thử ngay

Trang liên quan

Giáo trình:Thanh điều hướng CSS