0 Cara Mudah Membuat Menu Horizontal

PanduanTop - Cara membuat menu horizontal ini diharapkan sobat dapat membuatnya secara mandiri tanpa harus searching sana-sini dan pada akhirnya tidak sesuai dengan harapan. mungkin cara ini adalah cara paling sederhana sehingga bagi para pemula dapat memahami untuk mempelajari cara pembuatannya

Pertama anda buka dokumen HTML atau Notpad untuk menuliskan kerangka dibawah ini

12345678<div class="mental">
    <ul>
        <li><a href="/"​>Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Category</a></li>
        <li><a href="/">Contact</a></li>
    </ul>
</div>

Perhatikan bahwa tag div diberi class mental, class inilah yang akan kita gunakan saat menulis kode CSS nantinya. Karena struktur menu menggunakan tag <li> maka akan berbentuk daftar list pada browsr, lihat gambar dibawah.

Langkah ini kita baru saja membuat list calon horizontal

Berikutnya kita akan menambahkan CSS rule untuk tag mental, ul dan li agar tersusun horizontal

12345678910111213141516.mental {
  width:100%; /* panjang menu horizontal */
  height:25px; 
  background:orange; /* warna latar belakang menu horizontal */
}
.mental ul {
  margin: 0px;
  padding: 0px;
}
.mental li {
  color:black;
  float: left;
  list-style: none;
  margin:0; /* atur posisi margin selector li */
  padding: 0; /* atur posisi padding selector li */
}

Lihat pengaturan CSS di atas, pada selektor .mental li digunakan untuk mengatur penampilan elemen <li>, kemudian kita telah mengatur properti posisi menu ini dengan list-style: none; agar list yang menempel pada elemen <li> tidak di ikut sertakan, sedangkan penambah float-left dengan tujuan menu ini searah dengan menu induk (lihat gambar dibawah)

Hasil akhir pembuatan menjadi list menjadi horizontal
dengan bantuan CSS

Sampai disini kita telah berhasil menyusun list ini menjadi horizontal. Namun langkah ini belum selesai, bagaimana kita dapat memodif kembali menu horizontal ini agar terlihat menarik.

Untuk selanjutnya kita akan atur kembali css selector .mental li a untuk element yang memiliki link anchor yang berada pada bagian tag <li>

12345678910111213.mental li a {
  display: block;
  padding: 2px 10px 2px 10px; 
  color:black; /*mengatur warna teks menu */
  text-decoration:none; /*underline pada tag a di hilangkan */
}
.mental li a:hover {
    color:BlueViolet; 
    background:Lime;
    border-radius:5px; /* w3c */
    -moz-border-radius:5px; /* mozila */
    -webkit-border-radius:5px; /* chrome */
}

Hasil akhir dari penggunaan tag a, a:focus dan a:hover

fungsi hover adalah saat cursor berada di atas elemen yang memiliki keterangan hover, maka ia akan meresfon yang terjadi pada selector yang ditindih oleh cursor

Hasil akhir dari keseluruhan dalam membuat menu horizontal

12345678<div class='mental'>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href="#">Category</a></li>
    <li><a href='#'>Contact</a></li>
  </ul>
</div>

123456789101112131415161718192021222324252627282930.mental {
  width:100%;
  height:25px;
  background:orange;
}
.mental ul {
  margin: 0px;
  padding: 0px;
}
.mental li {
 color:black;
 float: left;
 list-style: none;
 margin:0;
 padding: 0px;
 background:orange;
}
.mental li a {
 display: block;
 color:black;
 text-decoration:none;
 padding: 2px 10px 2px 10px;
}
.mental li a:hover {
    color:BlueViolet;
    background:Lime;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Selebihnya anda dapat memvariasikannya kembali dengan border dan warna kesayangan anda. Untuk membuat Submenu horizontal kita hanya memanfaatkan tag ul dan li sebagai acuan, dan tidak lepas dari CSS untuk mengaturnya agar cara kerja submenu tersebut berjalan dengan semestinya.

Dipertemuan berikutnya saya akan share bagaimana cara membuat submenu horizontal untuk menindak lanjuti dipostingan Bagaimana cara membuat menu horizontal ini.

Semoga bermanfaat dan terimakasih.

Komentar →