Cara - Menu Gulir Horizontal
Pelajari cara membuat menu horizontal yang dapat digulir dengan CSS.
Rumah
Berita
Kontak
Tentang
Mendukung
Blog
Peralatan
Basis
Kebiasaan
Lagi
Logo
Teman-teman
Mitra
Rakyat
Bekerja
Cara Membuat Menu yang Dapat Digulir Horizontal
Langkah 1) Tambahkan HTML:
Contoh
<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 2) Tambahkan CSS:
Trik untuk membuat navbar dapat digulir adalah dengan menggunakan overflow:auto
dan white-space: nowrap
:
Contoh
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;
}
Tip: Buka Tutorial CSS Navbar kami untuk mempelajari lebih lanjut tentang bilah navigasi.