CÁCH LÀM - Menu cuộn ngang
Tìm hiểu cách tạo menu có thể cuộn ngang bằng CSS.
Trang chủ
Tin tức
Tiếp xúc
Về
Hỗ trợ
Blog
Công cụ
Căn cứ
Tập quán
Hơn
Logo
Nhưng ngươi bạn
Đối tác
Mọi người
Công việc
Cách tạo menu có thể cuộn ngang
Bước 1) Thêm HTML:
Thí dụ
<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:
Mẹo để làm cho thanh điều hướng có thể cuộn là sử dụng overflow:auto
và white-space: nowrap
:
Thí dụ
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;
}
Mẹo: Đi tới Hướng dẫn CSS Navbar của chúng tôi để tìm hiểu thêm về các thanh điều hướng.