Bagaimana membuat: menu ber滚动 horizontal

Belajar bagaimana membuat menu ber滚动 horizontal dengan CSS.

Home News Contact About Dukungan Blog Alat Dasar Kustom Lebih Logo Teman Partner Orang Pekerjaan

Coba sendiri

Bagaimana membuat menu ber滚动 horizontal

Langkah pertama - Tambahkan 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>

Langkah kedua - Tambahkan CSS:

Teknik membuat navigasi yang dapat ber滚动 adalah menggunakan overflow:auto dan 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;
}

Coba sendiri

Halaman yang relevan

Panduan:Navigasi CSS