Bagaimana cara membuat menu horizontal


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

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

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


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

Terkait dengan ini

20 komentar:

  1. terima kasih masih memasang link SHARE4RT :)

    BalasHapus
  2. gan, mari tukar link dengan blogku info-mini.blogspot.com pr 3

    BalasHapus
  3. artikel yang sangat bermanfaat sob

    thanks atas infonya soob :D

    ditunggu kunjungan baliknya yaa :D

    BalasHapus
  4. sangat membantu sekali, salam kenal aja gan.

    BalasHapus
  5. thanks infonya gan smoga manfaat

    BalasHapus
  6. @share4rt : sama-sama
    @Rian : Ok, link sudah saya pasang gan
    @koran-informasi : sama-sama :) , siap gan..
    @Hendi Nuraen : Salam kenal juga sob :D
    @agusaji8 : AMIIIN

    Untuk sobat semua saya mohon maaf baru bisa respon komentar, karena kesibukan offline saya yang sangat padat.. terimakasih kunjungannya.

    BalasHapus
  7. udah saya taruh di tukar link

    BalasHapus
  8. Bang, itu gmna cara buat menunya beranak lagi dari anak judul?

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

    BalasHapus
  9. wah, keren artikelnya gan.
    jangan lupa komen backnya di http://adeputra-pkp.blogspot.com
    #SALAM BLGGER

    BalasHapus
  10. http://reader-download.googlecode.com/svn/trunk/images/emo/haha.gif mantab

    BalasHapus
  11. Mas , Mau Tanya Ni , Itu Menunya Kalau Diklik Ada Tandanya Gk ?
    Maksud Saya Seperti Ini Mas , Kalau Diklik Menu "Contac" Ada Backroundnya Tersendiri..
    Ada Kagak Tu Ya Mas , Saya Mau Buat Menu Seperti Itu.
    Tolong Balas Ya Mas.

    BalasHapus
  12. Komentar ini telah dihapus oleh penulis.

    BalasHapus
  13. mantabssss info yang menarik bro, salam kenal n kunjungan dari blogger surabaya :
    http://www.aanggunaifi26.blogspot.com

    BalasHapus
  14. thx, mau tau berita teknologi
    http://www.aedos16.blogspot.com/

    BalasHapus
  15. MaturThangkyu sudah berbagi Gan...
    Salam sukses

    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