Cara Membuat menu Scroll Horizontal

Fitur scroll horizontal yang di maksud disini yaitu ketika layar tersebut kita kecilkan, karenanya fitur itu tak ikut memiliki tampilan yang dinamis tetapi muncul scrollnya, dimana ketika kita ingin melihat fitur lain, kita tinggal scroll kesamping seperti itu, cara ini kita hanya gunakan HTML dan CSS saja.

Oke cara membangun fitur horizontal ini saya dapatkan dari w3school, dimana menurut saya ini lumayan menarik bagi di bahas, bagaimana caranya seketika saja ya, silahkan teman-teman bikin file index.html dengan struktur HTML selaku berikut:

<div class=scrollmenu>
  <a href=#home>Home</a>
  <a href=#news>News</a>
  <a href=#contact>Contact</a>
  <a href=#about>About</a>
  <a href=#support>Support</a>
  <a href=#blog>Blog</a>
  <a href=#tools>Tools</a>  
  <a href=#base>Base</a>
  <a href=#modifikasi>Kembangkan</a>
  <a href=#more>More</a>
  <a href=#logo>Logo</a>
  <a href=#friends>Friends</a>
  <a href=#partners>Partners</a>
  <a href=#people>People</a>
  <a href=#work>Work</a>
</div>

<h2>Merancang Scroll Fitur di HTML CSS</h2>
<p>Slihkan teman-teman kecilkan widthnya karenanya guna fitur scroll akan berfungsi</p>

Lumayan banyak ya, karena itu memang yang kita butuhkan, walaupun jarang kita lihat fitur yang segitu banyak, kuncinya hakekatnya ada di overflow ya dan white-space: nowrap, seperti ini CSSnya.

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

Silahkan dilihat, ya, lumayan simple ya, oke seperti apa jadinya:

Seperti yang saya tulis di atas bagi menghasilkan tampilan tersebut, silahkan kecilkan web browser teman-teman, oke saya rasa lumayan hingga disini belajar kita mengenai Cara Merancang fitur Scroll Horizontal semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.

Sumber https://kursuswebsite.org