Sobat Muda Beda sekalian, di artikel kali ini kita
akan membahas cara membuat menu navigasi di HTML dengan CSS.
Pengertian menu navigasi atau navbar. Navigasi
merupakan bagian dari situs yang berfungsi untuk berpindah dari halaman satu ke
halaman lainnya, navigasi merupakan bagian yang penting dan harus ada. Menu
Navigasi paling umum diletakan pada bagian atas halaman yang diposisikan pada
kiri, tengah atau kanan web. Namun ada juga yang meletakan menu navigasi
ditempat lain misalnya di bawah header, dalam footer dan masih banyak lagi
lainya sesuai keinginan.
Langsung saja kita masuk ke tutornya. Kenapa harus
membuat Navigasi pake CSS sih ? karena dengan CSS tampilan web yang kita buat
bisa menjadi atraktif dan terlihat indah. Terus bagaimana cara membuatnya ?
bisanya untuk file CSS membuat kembali file dan di pisah dengan file HTML, Tapi
bisa juga di satukan dalam filenya. Kita langsung intip saja cara nya.
Buat file dengan format index.html, terus masukan coding di bawah ini :
Hasilnya akan seperti ini jika di Run.<html><head><style>body {font-size: 28px;}ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;position: -webkit-sticky; /* Safari */position: sticky;top: 0;}li {float: left;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover {background-color: #111;}.active {background-color: #4CAF50;}</style></head><body><div class="header"><h2>Scroll Down</h2><p>Scroll down to see the sticky effect.</p></div><ul><li><a class="active" href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li></ul><h3>Sticky Navigation Bar Example</h3></body></html>
Sekian artikel dari kami, semoga bermanfaat dan dapat di aplikasikan. jangan lupa untuk meliat artikel kami lainnya.
