ediTEMP TAB MENU DENGAN LIST STYLE HORIZONTAL

TAB MENU DENGAN LIST STYLE HORIZONTAL

Kebanyakan Tab menu yang digunakan selama ini adalah jenis tab menu dengan tampilan sub menu (list style) vertikal, yang mana kadang oleh sebagian blogger itu dianggap menakutkan.... Maksudnya bisa terjadi tanpa sengaja pengunjung meng KLIK iklan, dan konon hal itu akan berakibat memburuknya penghasilan dari iklan.
Terutama bagi blog yang menaruh format iklan banner dibawah tab itu sendiri. Dan juga masih ada kemungkinan klik tanpa sengaja terjadi pada blog yang memasang iklan di bawah judul posting.

Semacam ini lah mungkin maksudnya......




Tuh kan menutupi halaman posting....

Bagi yang menggunakan list sub menu dengan jumlah dua atau tiga saja, mungkin bisa mengabaikan keinginan untuk memasang tab menu dengan sub menu horizontal ini, namun bagi yang memasang list sub menu cukup banyak, sehingga barisan list sub menu itu panjang kebawah dan akan menutupi sebagian atau seluruh tampilan iklan, tidak ada salahnya bila mencoba tab menu jenis seperti ini.




Sepintas kelihatan menjadikan pita tab menu menjadi lebih lebar kebawah, karena ediTEMP menambah satu lembar pita tab menu kosong dibawahnya dengan ukuran panjang dan lebar yang sama persis dengan tab menu aslinya (diatasnya. Tapi relakanlah !, karena itu sengaja dibuat agar tampilan lebih statis. agar tidak wagu karena terlalu lebar, pita bayangan yang dibawah diatur dengan warna yang berbeda.

Pada query mobile device, tab horizontal ini dibuat masih bisa terbaca penuh pada layar selebar 800px ( tablet posisi landscape). itu bila tidak terlalu banyak sub menu, bila blog yang akan dipasang tab menu ini memiliki cukup banyak sub menu, untuk menghindari tidak terlihatnya sub menu urutan urutan akhir, sebaiknya diatur agar pada layar 800px sudah menampilkan tab menu mobil yang sudah bertampilan horizontal.



Demi responsivitas, maka tab horizontal ini akan hilang pada tampilan device dengan lebar layar 768px ke bawah, masa iya layar sesempit itu masih mampu menampilkan versi horizontal???. Dan untuk tampilan menu mobile masih sama dengan yang pernah ediTEMP publikasikan pada posting yang lalu.

Bagi yang berkehendak mencobanya,

ini ediTEMP sediakan HTML :

============================
<tab id='menu'>
<input type='checkbox'/>
<mobile><span>PILIH MENU</span></mobile>
<ul>
<li><a href='/'>BERANDA</a></li>
<li><a>MENU 1</a>
<ul class='menus'>
<li><a href='#'>SUB MENU 1 A</a></li>
<li><a href='#'>SUB MENU 1 B</a></li>
<li><a href='#'>SUB MENU 1 C</a></li>
</ul>
</li>
<li><a>TEMPLATE</a>
<ul class='menus'>
<li><a href='#'>FREE TEMPLATE</a></li>
<li><a href='#'>PREMIUM TEMPLATE</a></li>
<li><a href='#'>ediTEMP TEMPLATE</a></li>
</ul>
</li>
<li><a>BELAJAR TEMPLATE</a>
<ul class='menus'>
<li><a href='#'>BLOG</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>HTML</a></li>
<li><a href='#'>JS</a></li>
<li><a href='#'>META</a></li>
</ul>
</li>
</ul>
</tab>
<tab id='menul'/>
==================================================



dan ini ediTEMP sertakan juga CSS :
==================================================
#menu {margin:0 10px; background:#034; color:#eee; height:35px}
#menul {margin:0 10px; background:#444; height:35px}
#menu ul,#menu li {margin:0; padding:0; list-style:none}
#menu ul {height:35px}
#menu li {float:left; display:inline; position:relative}
#menu a {display:block; line-height:35px; padding:0 14px; text-decoration:none; color:#aaa}
#menu li:hover > a,#menu li a:hover {background:#444; color:#eee}
#menu ul.menus {height:auto; overflow:hidden; width:580px; background:#444; position:absolute; z-index:99; display:none}
#menu ul.menus li {display:block; font-size:12px}
#menu li:hover ul.menus {display:block}
#menu ul.menus a:hover {background:#034}
#menu input {display:none; margin:0; padding:0; width:200px; height:35px; opacity:0; cursor:pointer}
#menu mobile {font-weight:bold; font-size:30px; display:none; width:135px; height:36px; line-height:36px; text-align:center}
#menu mobile span {font-size:12px; position:absolute; left:35px}

@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul {background:#111; position:absolute; top:100%; right:0; left:0; z-index:3; height:auto; display:none}
#menu li{display:block;float:none;width:200px}
#menu ul.menus{position:relative;width:200px}
#menu ul.menus li{float:left;background:#054;display:block;margin:10px 0;width:100%}
#menu input,#menu mobile{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + mobile{color:white}
#menu input:checked ~ ul{display:block}
#menul{width:0;height:0;margin:0;padding:0;display:none}
}
============================================

NB :

  1. atur Margin: 0 10px; pada #menu dan #menul, agar sesuai dengan kondisi margin blog yang akan dipasang tab menu ini.
  2. ganti 768px menjadi 801px, bila sub menu bagian akhir tidak terbaca pada ukuran layar 800px (tablet posisi landscape)
  3. atau silakan sesuaikan segala sesuatu yang perlu disesuaikan

Demikian pembahasan tentang TAB MENU DENGAN LIST STYLE HORIZONTAL yang bisa ediTEMP sajikan. Ralat, saran, masukan, kritik dan/atau pertanyaan, bisa disampaikan melalui kolom Komentar.

Belum ada Komentar

Poskan Komentar

Formulir Kontak

Nama

Email *

Pesan *