Bagaimana cara membuat sub menu horizontal

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.

Terkait dengan ini

26 komentar:

  1. komplit banget uraianya sob,sangat membantu saya yg masih newbie :)
    makasih tutorialnya sob,salam sukses selalu.

    BalasHapus
    Balasan
    1. Banyak hal yang ingin saya sampaikan di setiap tutor agar mudah untuk dicerna sebagai media pembelajaran, karena keterbatasan kemampuan dan tidak memiliki latar belakang sekolah dibidang yang baru saya gemari ini, selalu menjadi kendala dan sering sekali saya membuat kesalahan apa yang ada dalam penyampaian dalam tutorial ini

      Blog ini baru seumur jagung bang =D , tekhnik-blog aja yang lebih lama dibanding blog ini masih bilang newbie, apalagi blog ini ^_^ .

      Hapus
  2. mantep ya penjelasannya, oy saya mau membuat sub menu koq susah bgd ya ,,trus klo saya ikutin di artikel ini,cara pemasangannya gimana?soalnya saya msih belum begituu mengerti

    BalasHapus
    Balasan
    1. Untuk keterangan CSS taruh di atas ]]></b:skin>
      dan untuk keterangan HTML/Submenu ini di taruh di atas <div id='content-wrapper'>

      Oia, untuk template yang mas angga gunakan, silahkan taruh HTMLnya dibawah </header>
      Untuk mencari kode yang saya sarankan, silahkan untuk memanfaatkan ctrl+f atau F3
      :yaya:

      Hapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. Balasan
    1. Info??
      Ini hanya media sob. intinya ini bukan untuk diterapkan dan tidak layak untuk dipasangkan didalam template blog, melainkan pintar-pintar kita untuk memodifnya kembali sehingga layak untuk dipasang didalam template blog kita.

      Hapus
  5. Alhamdulillah, setelah kebingungan nyari-nyari kode gimana biar begini begitu yang sampai saat ini hobinya cuma copy paste code buat modif blog, tapi sekarang mendapatkan keterangan kegunaan dan cara pemakaiannya. blog saya berntakan banged kang kebanyakan kodenya cuma copy paste.
    Mantap 100%, mudah-mudahan semua ilmu yang akang bagikan ini bermanfaat untuk akang khususnya dan semua yang mempelajarinya. Terimakasih Saya jadi mengerti..
    Salam Kenal Kang

    BalasHapus
  6. Kunjungna pertama gan
    mo nanya gan cara untuk nambah sub menunya gimana gan
    <!-- Navigation On Dekstop -->
    <div class='menu-nav' id='menu'>
    <ul>
    <li class='active'>
    <a href='/' title='Home'>Home</a></li>
    <li><a href='#'>Menu 1</a></li>
    <li><a href='#'>Menu 2</a></li>
    </ul>
    </div>
    <div class='clear'/>
    <!-- Navigation Closed -->

    ditunggu ya gan

    BalasHapus
    Balasan
    1. Kita hanya menambahkan anak menu pada salah satu menu tersebut..
      Misalkan kita ingin menambahkan anak menu pada
      <li><a href='#'>Menu 2</a></li>
      Pada tag </li> (penutup li) harus kita pangkas/pindahkan diakhir elemen anak menu,.
      Contoh ;
      <li><a href='#'>Menu 2</a>
      <ul>
      <li><a href='#'>Anak angkat</a></li>
      <li><a href='#'>Anak Tiri</a></li>
      <li><a href='#'>Anak Sapa Nih</a></li>
      </ul>
      </li> <!-- kita taruh li induk di akhir anak menu -->

      Sehingga menjadi

      <!-- Navigation On Dekstop -->
      <div class='menu-nav' id='menu'>
      <ul>
      <li class='active'>
      <a href='/' title='Home'>Home</a></li>
      <li><a href='#'>Menu 1</a></li>
      <li><a href='#'>Menu 2</a>
      <ul>
      <li><a href='#'>Anak angkat</a></li>
      <li><a href='#'>Anak Tiri</a></li>
      <li><a href='#'>Anak Sapa Nih</a></li>
      </ul>
      </li> <!-- kita taruh li induk di akhir anak menu -->
      </ul>
      </div>
      <div class='clear'/>
      <!-- Navigation Closed -->

      Setelah elemen menu navigasi beserta anak menunya sudah tersusun, langkah selanjutnya kita atur kembali CSS agar submenu ini tersusun sebagaimana layaknya submenu navigasi.

      Hapus
  7. Bang, itu gmna cara buat menunya beranak lagi dari anak judul?

    Contoh : Tutorial Blog >>> Tips Design Template >>> Body ( dan 4 lainnya )

    BalasHapus
    Balasan
    1. Sebetulnya triknya cukup sederhana, kita hanya menambahkan anak menu baru pada anak menu.
      Contoh ;

      <navigasi>
      <ul>
      <li><a href='#'>Menu 1</a></li>
      <li><a href='#'>Menu 2</a>
      <ul>
      <li><a href='#'>Anak angkat</a></li>
      <li><a href='#'>Anak Tiri</a></li>
      <li><a href='#'>Anak Sapa Nih</a>
      <ul>
      <li><a href='#'>Anak Tetangga</a></li>
      <li><a href='#'>Anak Sebrang</a></li>
      <li><a href='#'>Anak RT</a></li>
      </ul>
      </li> <!-- kita taruh <li> anak induk di akhir anak menu -->
      </ul>
      </li> <!-- kita taruh <li> induk di akhir anak menu -->
      <li><a href='#'>Menu 3</a></li>
      <li><a href='#'>Menu 4</a></li>
      </ul>
      </navigasi>


      Selebihnya kita hanya membutuhkan CSS untuk memanipulasi dalam segi tampilan agar menu ini terlihat layak untuk dipasang

      Atau kalo mau yang instan, silahkan kunjungi situs dibawah ini
      http://www.dte.web.id/2011/07/dua-gaya-drop-down-menu-dengan-efek.html

      Hapus
  8. Hi, Are you well?

    This is a effective website on gaptek32.blogspot.com.This is website many many everyone help for us.It is very good website.So nice,this is a nice post.I also want to show about on Click-n-earn Get Paid Website advertising and view sites, Get Paid To Enhance, Buy Cost-effective Banner Marketing PTC Marketing Email promotion, Cost-effective ad Marketing, Cost-effective PTC Marketing, Generate Cash On the internet, ways to make online, Get Paid For Website Hits work from home USA And More. Try It Out Today!

    Thanks for the great post.

    BalasHapus
  9. Follow blik ea gan thanks

    http://master7chris.blogspot.com

    BalasHapus
  10. terima kasih gan infonya. lengkp bgt skl. kalau sudah membuat sub menu bagaimana cara ngisi sub menu tersebut gann.. makasih

    BalasHapus
  11. terimakasih informasiny saya akan coba bikin di blog saya

    BalasHapus
  12. bhs apa smua itu bang yach,,,,,,,,

    BalasHapus
  13. artikelnya mantap bung, sukses terus!
    jangan lupa kunjungi artenergic.blogspot.com

    BalasHapus
  14. thank's sob sangat bermanfaat,,,

    BalasHapus
  15. akhirnya yang saya cari ketemu disini, makasih gan infonya.

    BalasHapus
  16. Makasih banget gan, detail abiezz nih penjelasannya,

    Alhamdulillah langsung ngerti saya gan ...

    BalasHapus
  17. kenapa ya pas saya taruh kode nya di notepad , tampilan nya bukan horizontal , tapi vertikal?? mohon balasan nya secepatnya ><

    BalasHapus
  18. thanks infonya sob,, sangat bermanfaat sekali bagi saya.. :)

    kunjung balik blog baru saya ya sob >> tutorialblogwiky.blogspot.com (^_^)

    terima kasihh..

    BalasHapus
  19. Blog ini sangat ISTIMEWA, setelah muter-muter akhirnya nemu juga blog berkualitas, thanks MASTER..!!

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML