Cara Membuat Menu Pada Layout Web Sederhana Menggunakan CSS HTML

Menu merupakan sebuah navigasi wajib yang harus dimiliki oleh sebuah website karena dengan membarikan menu pengunjung website kita akan lebih mudah menjelajahi semua website kita. Selain bermanfaat untuk visitor fitur menu juga akan membuat tampilan kita lebih menarik.

Sebetulnya postingan sebelum ini saya sudah mencantumkan kode untuk membuat menu pada website namun saya tidak terlalu fokus, sehingga kali ini saya ingin berbagi sedikit informasi kepada teman - teman tentang bagaimana membuat menu pada layout website.

Berikut kode HTML yang kita butuhkan untuk memulai membuat menu

<!DOCTYPE html>
<html>
<head>
<title>Menu Gapunyakode</title>
</head>
<body>
<h1>Ga Punya Kode</h1>
<div class="nav-header">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a class="active" href="#home">Menu1</a></li>
<li><a class="active" href="#home">Menu2</a></li>
<li class="dropdown">
<a class="dropbutton" href="#">DropdownMenu</a>
<label class="dropdown-content">
<a href="#">Menu 1</a>
    <a href="#">Menu 2</a>
    <a href="#">Menu 3</a>
</label>
</li>
</ul>
</div>
</body>
</html> 

Langkah - langkah membuat kode menu layout html web sederhana

  • Kita meletakan kode HTML menu berada di dalam tag body
  • Selanjutnya membuat sebuah section menggunakan tag div
  • Membuat urutan list menu menggunakan tag ul, li, label
  • Di dalam tag li kita akan memberikan nama menu berikut dengan linknya menggunakan tag <a href ...> 
  • Pada tahap kita telah membuat tampilan mentah
Untuk mempercantik tampilan di atas kita memerlukan polesan sedikit lagi, dengan menambahkan kode css tampilan menu akan kita buat menu secara horizontal.

Langkah - langkah menerapkan kode css untuk menu layout html

body {
  margin: 15px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
}

.active {
  background-color: #FF0B7B;
}

li label {
color: white;
}


  • Untuk menghilangkan titik simbol kita memberikan kode css list-style-type dengan nilai none 
  • kode float : left akan memberikan efek setiap menu akan berurutan dari kiri secara horizontal. Jika kita tidak memberikan kode tersebut maka tampilan setiap menu akan melebar sesuai lebar body dan menu selanjutnya berada di bawahnya
  • kode css text-decoration nilai none akan menghilangkan garis di setiap kata menu
  • class .active berfungsi untuk memberikan efek pada menu yang aktif. karena kode class .active berisi kode css background-color maka yang akan berubah adalah warnanya
  • save dan lihat hasilnya
Terimakasih telah berkunjung, semoga informasinya bermanfaat 

0 Response to "Cara Membuat Menu Pada Layout Web Sederhana Menggunakan CSS HTML"

Post a Comment

Silahkan berkomentar Sob tapi untuk beberapa komentar yang tidak sesuai seperti link aktif dan hal-hal yang tidak baik tidak akan ditampilkan !. Terima kasih

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel