Belajar Membuat Menu Website / Blog (Sederhana Menyamping / Melintang) - Part 1

Pada kesempatan kali ini Saya membagikan tutorial atau belajar membuat menu Website / Blog dari menu yang standar / biasa-biasa saja terlebih dahulu, hingga menu responsive. Pada artikel ini lebih tepatnya akan membahas tentang pembuatan menu sederhana menyamping atau melintang (Horizontal).

Memodifikasi menu atau navigasi ini tentunya merupakan minat pertama kebanyakan orang yang ingin mendesain web atau blognya, termasuk Saya sendiri pada awalnya mempelajari web design.

Baiklah langsung saja kita coba mempraktikkannya.

• Pertama-tama sediakan peralatan / tool yang diperlukan, seperti text editor untuk memodifikasi kode nya dan web browser (Contoh : Firefox, Chrome, Opera) untuk melihat hasil dari menu yang kita buat.
• Untuk text editor bisa menggunakan Notepad++, bisa di download secara gratis disini 
• Setelah tool yang diperlukan sudah terinstal sekarang kita akan membuat file HTML dan CSS nya, buka Notepad++ > klik file > new, lebih lengkapnya baca Pengenalan HTML & CSS.
• Jika ingin mudah gunakan tool HTML & CSS Editor blog ini.
• Kemudian copy kode dibawah ini kedalam file html atau kolom html editor.

 




<ul class='menusederhana'>


 <li>


  <a href='http://alamatyangdituju/'>


  Home


  </a>


 </li>


 <li>


  <a href='http://alamatyangdituju/'>


  Artikel


  </a>


 </li>


 <li>


  <a href='http://alamatyangdituju/'>


  Hubungi Kami


  </a>


 </li>


</ul>

• Save, kemudian coba buka file html tersebut, maka tampilannya akan seperti dibawah ini

• Selanjutnya kita tambahkan CSS untuk memperindah tampilan menu dan membuat daftarnya menyamping/ memanjang. Salin CSS dibawah ini ke file CSS atau kolom CSS kode editor.

 


.menusederhana{




width: 100%;/* Agar lebar menu penuh mengikuti elemen pembungkusnya */


margin:0;padding:0; /* Mengatur margin dan padding ke 0, karena UL memiliki margin dan padding bawaan(Default) */ 


background:#2af;


padding: 5px 0;/* Mengatur padding atas dan bawah 5px, padding kiri dan kanan 0 */


}




.menusederhana li{


display: inline;/* Mengatur daftar / li dari menu melintang atau menyamping */


}




.menusederhana a{


color: #fff;


padding: 5px; /* Mengatur padding semua sisi 5px */


border:1px solid #000;


transition: 0.2s ease;/* Membuat efek perubahan hover dan kembali selama 0.2 detik */


}




.menusederhana a:hover{ /* Efek hover atau perubahan <a> atau alamat yang dituju apabila kursor mouse diarahkan ke <a> */


background: #000;/* Perubahan warna background */


color: red;/* Perubahan warna tulisan <a> */


}

• Save CSS maka tampilannya akan seperti dibawah ini

• Home
• Artikel
• Hubungi Kami

Nah, Saya pikir sekian dulu pada artikel ini, untuk tutorial membuat menu selanjutnya klik disini, semoga tutorial ini dapat bermanfaat, lebih dan kurangnya Saya mohon maaf, Terima Kasih.