Tutorial Dasar 7 Menu

Selamat pagi dan apa kabar, sahabat blogger? Saya harap kamu tetap dalam keadaan sehat. Artikel kali ini tentang menu navbar. Berbaring di sofa temukan posisi yang paling nyaman untuk bersantai, ambil segelas kopi, dan mainkan musik. Lalu let's Go! Ayo kita belajar!

Menu

Menu? Apakah itu menu? Kalian sudah pasti sering mendengar menu, menu ialah daftar hidangan yang disajikan kepada pengunjung. Di dunia proggramer hidangan tersebut ialah navigasi ke sebuah halaman. Pemilihan menu sangatlah penting dikarenakan menu dapat memiliki dampak besar kepada pengunjung, kamu ingin mengarahkan pengunjung seperti apa itu tergantung menu yang kamu buat.

Baiklah, langkah pertama kita membuat daftar menu menggunakan ul. Letakkan code dibawah ini ke dalam div class menu.

<ul>
 <li><a href="#A">Home</a></li>
 <li><a href="#B">Item 1</a></li>
 <li><a href="#C">Item 2</a></li>
 <li><a href="#D">Item 3</a></li>
 </ul>

Langkah terakhir ialah mengcostum CSS untuk menu. Masukkan CSS di bawah ini ke dalam blogger kalian.

 ul{margin: 0; padding: 0;display: inline-block; width: 100%;background-color: red}
 		ul li{
 			list-style: none; float: left;
 			padding: 10px 25px; 
 		}
 		ul li:hover{
 			background-color: white;
 			cursor: pointer;
 		}
    ul li:hover a{
 			color: black
 		}
    ul li a{color: white}

Simpan dan lihat blog kamu. Kamu akan mendapati sebuah menu yang berada di atas.

Bagaimana? Sudah sedikit merasa senang?

Yosh, next tutorial kita akan mulai menyorot bintang utama kita yaitu mengcostum blogpost. Pastikan kalian ikuti tutorialnya mulai dari awal hingga akhir agar kalian dapat mendapatkan ilmu semaksimal mungkin.

Saya sudahi dulu tutorial kali ini. Jika ada pertanyaan silahkan sampaikan unek - unekmu di komentar. Kalau ada kata - kata yang menyinggung perasaanmu aku minta maaf.

Terima kasih dan sampai jumpa lagi.

Semangat belajar! Have fun day! Ganbantte Minna!!