Dasar Pembuatan Menu Horizontal

Diposting ini OB akan sedikit berbagi dengan teman-teman tentang bagaimana membuat menu horizontal menggunakan CSS. Mengapa trik blogger ini OB angkat kembali? Karena banyak minat para blogger mania untuk menghiasi blognya dengan menu-horizontal sesuai dengan keinginan dan karakter blognya masing-masing. Ketika kamu blog walking tentu banyak sekali bertemu trik membuat menu horizontal dengan sistem kode yang berbeda pula, dan sangat dimungkinkan pula kode yang akan OB tampilkan berbeda dengan lainnya (atau bisa pula sama). Nah, agar tak titik air ludah karena membaca paragraf pembuka. Yuk, kita bedah triknya.

Kode CSS (Cascading Style Sheets adalah sebagai berikut :

#menu-navigation {
border-bottom: 1px solid #e3e3e3;
border-top: 1px solid #e3e3e3;
clear: both;
display: block;
float: left;
margin: 0 auto;
width: 100%;
}
#menu-navigation ul {
list-style: none;
margin-bottom: 0;
padding: 0 15px;
}
#menu-navigation li {
float: left;
position: relative;
}
#menu-navigation li.alignright {
float: right;
margin: 0;
}
#menu-navigation a {
color: #666;
display: block;
line-height: 3.1428em;
padding: 0 1.5714em;
text-decoration: none;
}
#menu-navigation ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2);
box-shadow: 0 3px 3px rgba(0,0,0,.2);
display: none;
float: left;
margin: 0;
padding: 0;
position: absolute;
top: 3.1428em;
left: 0;
z-index: 99999;
}
#menu-navigation ul ul ul {
left: 100%;
top: 0;
}
#menu-navigation ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
font-weight: normal;
height: auto;
line-height: 1.5714em;
padding: .39285em  .39285em  .39285em 1.5714em;
width: 152px;
}
#menu-navigation ul li:hover > ul {
display: block;
}
#menu-navigation li:hover > a,
#menu-navigation ul ul :hover > a,
#menu-navigation a:focus,
#menu-navigation .selected  > a {
background-color: #f5f5f5;
color: #111;
}

.selected digunakan untuk mengindikasikan jika URL halaman blog sama dengan URL pada menu navigasi, maka berlaku pengkodean .selected. Sedangkan untuk HTML (HyperText Markup Language) adalah sebagai berikut:

<nav id="menu-navigation">
 <ul>
  <li><a href="#">Beranda</a></li>
  <li><a href="#"></a>Tentang</li>
  <li><a href="#"></a>Sitemap</li>
  <li><a href="#"></a>Kontak</li>
 </ul>
</nav>

Dengan menggunakan HTML di atas, berarti kita meniadakan fungsi .selected. Pada kasus Blogger.com fungsi .selected dapat diakomodasi dengan menambahkan tag kondisional tiap menu, contoh untuk beranda (home):

 <b:if cond='data:blog.url != data:blog.homepageUrl'>
  <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
 <b:else/>
  <li class='selected'><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
 </b:if>

Sedangkan pada menu lain dapat disimak pada kode di bawah ini.

 <b:if cond='data:blog.url != "#"'>
  <li><a href='#'>Tentang</a></li>
 <b:else/>
  <li class='selected'><a href='#'>Tentang</a></li>
 </b:if>

Dimana URL (Uniform Resource Locator) pada kode yang berwarna merah adalah sama, contoh: h**p://namablog.blogspot.com/p/tentang.html. Selanjutnya dengan pengkodean CSS di atas, kita dapat pula membuat menu navigasinya menjadi lebih kompleks (drop down)

 <li><a href='#'>Drop Down</a>
  <ul class='submenu'>
   <li><a href='#'>Item1.1</a></li>
   <li><a href='#'>Item1.2</a></li>
   <li><a href='#'>Item1.3</a>
   <ul>
    <li><a href='#'>Item3.1</a></li>
    <li><a href='#'>Item3.2</a></li>
    <li><a href='#'>Item3.3</a></li>
   </ul>
   </li>
  </ul>
 </li>

Lho…, dimana tag kondisionalnya. Jika dalam menu berlaku drop down, maka tag kondisional tidak berlaku. Oleh karena masing-masing URL (warna biru) akan diisi dengan berbeda, sedangkan URL yang diberi warna merah tidak perlu dimasukkan — biarkan seperti itu — karena berfungsi sebagai alat bantu. Sekarang kamu pasti sudah bisa membuat menu horizontal sesuai keinginan dan kebutuhan di dalam blog kamu...

30 komentar untuk “Dasar Pembuatan Menu Horizontal”

  1. ini dia yg sya cri,mksih mas OB...

    BalasHapus
  2. hikxzzz makin banyak triknya cuman lum sempet diaplikasiin lagi ^_^

    BalasHapus
  3. mas OB,bkin posting tntang cara pmindahan sidebar yg kya pnya blog kang rohman dnk. yg tiba2 klo jdul postingnya diklik mka dari sidebar yng disebelah knan jd pndah ke sbelah kiri gtu..

    BalasHapus
  4. wah,,sangat bermanfaat..
    Tapi masih bingung...

    BalasHapus
  5. makasih ya,exchange lonk donk, onepiecekamu.blogspot.com

    BalasHapus
  6. salam sob...
    Walaupun kodenya panjang lebar tetapi tipnya bisa digunakan oleh blogger lain. terima kasih sob.

    BalasHapus
  7. Terima kasih Gan ilmunya... semoga makin sukses

    BalasHapus
  8. mau nanya gan..
    bagaimana caranya suapaya footer menjadi 3 colom ?
    tengs gan

    BalasHapus
  9. rumit amat kodenya ya bos. perlu belajar dari awal nih...

    BalasHapus
  10. thanx ya mas...masih newbie..
    mau nanya dong:D???
    mas kalau mau nambah sub sub menunya gimana y mas,,,??
    soalnya sana sini udah search gk ada yg jelas,,,,,
    makasih

    BalasHapus
  11. wah g faham saya boz.............naruhnya dimana itu bbozz kode css nya....?

    BalasHapus
  12. @KRISMAN EL NATALIS GULO: Kalau kk mau nambah sub menu cukup dengan menambah pula kode CSS dan HTMLnya seperti dibawah ini :
    Tambah kode CSS, letakkan di atas kode #search { ... }
    ul.menu-nav li ul {display:none;margin:0;padding:0;}
    ul.menu-nav li:hover ul{position: absolute; max-width:100px;
    display: block; background:#000000; margin:2px; float:left; margin-top:30px;}
    ul.menu-nav li:hover ul li {width:100px; float: left;display: block;}
    ul.menu-nav li:hover ul li a {border-top:1px dotted #FFFFFF; border-right:none; background:#000000; width:100px;}
    ul.menu-nav li:hover ul li a:hover{background:#FFFFFF;color:#000000;}

    Sedangkan kode HTML-nya, misal kita ambil "item 1", maka kodenya akan seperti ini
    <li><a href='http://#'>item 1</a>
    <ul>
    <li><a href='http://#'>item 1.1</a></li>
    <li><a href='http://#'>item 1.2</a></li>
    </ul></li>

    Perhatikan peng-kode-an "item 1.1" dan "item 1.2"

    BalasHapus
  13. @arif rohman : kk, untuk meletakkan kode CSS, bisa kk lakukan di antara kode berikut :
    <b:skin><![CDATA[
    ...
    ]]></b:skin>

    atau untuk yang mudahnya, letakkan CSS menu horizontal di atas kode ]]></b:skin>

    BalasHapus
  14. heyy
    gimana sech caranya membuat tab view???|

    kok aku gagal terus sech
    bantuin ea

    thank before

    BalasHapus
  15. @Musik Only : Maksud kk, tab view atau menu horizontal??? Maaf, OB kurang jelas maksud kk.
    kk bisa download template lengkap blog, kemudian kirimkan ke email ariamsi.4215@gmail.com. Mudah-mudahan OB bisa membantu...

    BalasHapus
  16. bikin image separator antar menu gmana ya ?
    sebelumnya:

    home product contact

    menjadi:

    home l product l contact

    thanks sebelumnya..

    BalasHapus
  17. bagus juga gan tutorialnya...boleh dicoba gan... ada gak ya yg lebih sederhana Gan, tks

    BalasHapus
  18. cara untuk membuat sub menu pada sub menu gmna gan?mash awam ne,, :)

    BalasHapus
  19. bos klau gak ketemu kode nya walaupun dah pakek f3 gmana...????

    BalasHapus
  20. @Anonim : Buang aja karakternya satu-persatu,gan. Karakter di depan satu, kemudian karakter di belakang satu.

    BalasHapus
  21. keren nih tutorialnya sangat membantu. terimakasih

    BalasHapus
  22. trus gimana masukin postingan kita ke halaman yg dah kita buat, misal menunya ada home, about, tips, kontak.. nah mau masukin postingn kita ke menu tips gimana? trims..

    BalasHapus
  23. @kang farid:
    Misalnya agan sudah membuat posting “About”. Agan buka dulu postingnya. Di alamat bar browser pasti kelihatan url posting tersebut (ex: http://url blog agan/tahun/bulan/About).
    Sekarang tinggal masukkan alamat posting ke dalam menu horizontal (ex: <li><a href='http://url blog agan/tahun/bulan/About'>About</a></li>).

    BalasHapus
  24. kalo mau buat posting banyak gmana... itu kan satu postingan untuk 1 menu... jadi ingin byk postingn dalam 1 halamn..

    BalasHapus
  25. @kang farid:
    Biasanya jika ingin membuka banyak posting dalam 1 halaman, ada 2 pendekatan, gan.
    Pertama, posting yang dibuka akan berurutan mulai dari yang terbaru sampai ke batas maksimal pencarian. Coba pakai url ini (http://url blog agan/search?max-results=200).
    Kedua, posting yang dibuka berdasarkan label yang sama (ex: http://url blog agan/search/label/nama label).
    Ganti tulisan yang tercetak tebal, gan.

    BalasHapus
  26. Mas OB, kenapa ya, sub menu yang saya buat tidak bisa terklik, padahal ketika hover ke menu utamanya, sub menu muncul, tapi tidak bisa di klik, keburu menghilang lg, mohon bantuannya.

    BalasHapus
  27. Contohnya ada di blog saya , http://ceukbeja.blogspot.com

    BalasHapus
  28. makasi gan info nya,,,

    BalasHapus