Revisi Sub menu

Melanjuti pembicaraan dari postingan saya sebelumnya yaitu bagaimana cara membuat menu horizontal. Dan pada point paling bawah pada postingan sebelumnya ada keterangan yang mana penjelasan tersebut seperti dibawah ini

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

Dan keterangan tersebut akan kita gunakan untuk sub menu horizontal ini, dan dibawah ini adalah keseluruhan dari HTML dan CSS di postingan sebelumnya

HTML

    
<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>

CSS

.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;
}

Tahap pembuatan sub menu

---

Saya akan ambil sampel menu di bagian <li><a href="#">Category</a></li> yang nantinya akan menjadi induk dari anak menu (lihat kode atas dibagian menu horizontal yang saya beri warna merah) dengan catatan pindahkan terlebih dahulu penutup </li> dan taruh di akhir anak menu nantinya, contoh sampel dibawah

<li><a href="/">Category</a> <!-- penutup li harus dipindahkan di akhir anak menu-->

 <ul>

 <li><a href='#'>Yang </a></li>

 <li><a href='#'>Baca</a></li>

 <li><a href='#'>Orang Jelek</a></li>

 </ul>

</li> <!-- letak penutup li induk yang dipindahkan pada elemen penutup anak menu-->

Lihat tag penutup <li> berwarna biru di atas yang baru saja kita pindahkan di bawah penutup anak menu, untuk warna orange adalah anak menu dari induk Category.

Untuk kode keseluruhan submenu horizontal yang baru saja kita tambahkan dapat dilihat dibawah ini ;

<div class='mental'>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href="#">Category</a>  <!--  penutup li harus dipindahkan di akhir anak menu-->
      <ul>
        <li><a href='#'>Kaya</a></li>
        <li><a href='#'>Miskin</a></li>
        <li><a href='#'>anda</a></li>
      </ul>
    </li>   <!-- letak penutup li induk yang dipindahkan pada elemen penutup anak menu-->
    <li><a href='#'>Contact</a></li>
  </ul>
</div>

Sampai disini kita baru saja membuat submenu horizontal, sehubung kita sama sekali belum mengatur selector CSS anak menu yaitu li ul, maka yang akan terjadi adalah seperti gambar dibawah ini

Struktur tampilan submenu terlihat bopenk dan sedikit bopak

Tahap perapihan tampilan sub menu

---

Dalam tahap perapihan pada anak menu <li>, yang kita butuhkan yaitu bagian CSS untuk mengatur bagian properti dan value dalam perapihan selector sub menu horizontal nantinya. Dan dibawah ini adalah CSS awal perapihan dalam penampilan sub menu horizontal ;

.mental li ul {
 position: absolute;  /* penting, karena memposisikan elemen anak submenu tidak nyata */
 width: 170px;        /* mengatur lebar ul dari anak li induk */
 left: 999em;         /* memposisikan ul dari anak li induk ke arah kiri */
}
.mental li ul a {
 width: 140px;        /* pastikan nilai ini lebih kecil dari .mental li ul */
}
.mental li li a {
 float: none;           /* menetralkan posisi anak menu yang ada di .mental li ul */
 margin: 0px;
 border-bottom: 1px solid #ccc;
 height: 30px;
}
.mental li li a:hover  {

 color: #ff0000;
}
.mental li:hover ul{
 left: auto; /* menetralkan posisi left yang berada di .mental li ul saat keadaan cursor berada di atas menu */
}

Gambar hasil akhir

Hasil akhir pembuatan sub menu horizontal

Membuat submenu atau anak menu ini sama halnya seperti kita membuat menu horizontal satu induk, namun yang mengharuskan membuat submenu ini berbeda adalah dalam mengatur posisi anak menu secara vertikal seperti pengaturan CSS yang ada di atas, contoh anak menu <ul> pada selector .mental li ul mengharuskan lebar 170px, dan nilai selector .mental li ul a harus lebih kecir dari selector .mental li ul, jika tidak elemen anak menu ini akan momposisikan kembali menjadi horizontal

Kode selengkapnya

---

HTML

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

CSS

.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;
}

Membuat sub menu horizontal finish. Sekarang anda dapat memodif kembali dengan memanfaatkan selector a dengan menggunakan :hover :focus :active dan sebagaina, contoh

.mental li ul a:hover
.mental li ul a:focus
.mental li ul a:aktive

atau

.mental li li a:hover
.mental li li a:focus
.mental li li a:aktive

Uji Kreativitas anda, semoga bermanfaat.