Menu scroll horizontal yang di maksud disini adalah ketika layar tersebut kita kecilkan, maka menu itu tidak ikut responsive tetapi muncul scrollnya, dimana ketika kita ingin melihat menu lain, kita tinggal scroll kesamping seperti itu, cara ini kita hanya gunakan HTML dan CSS saja.

Oke cara membuat menu horizontal ini saya dapatkan dari w3school, dimana menurut saya ini cukup menarik untuk di bahas, bagaimana caranya langsung saja ya, silahkan teman-teman buat file index.html dengan struktur HTML sebagai 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="#custom">Custom</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>Membuat Scroll Menu di HTML CSS</h2>
<p>Slihkan teman-teman kecilkan widthnya maka fungsi menu scroll akan berfungsi</p>

Cukup banyak ya, karena itu memang yang kita butuhkan, walaupun jarang kita lihat menu yang segitu banyak, kuncinya sebenarnya 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, cukup simple ya, oke seperti apa jadinya:

cara-membuat-menu-horizontal-scroll

Seperti yang saya tulis di atas untuk menghasilkan tampilan tersebut, silahkan kecilkan web browser teman-teman, oke saya rasa cukup sampai disini belajar kita tentang Cara Membuat menu Scroll Horizontal semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

WhatsApp chat