ediTEMP Tab menu vertikal, cocok untuk all device

Tab menu vertikal, cocok untuk all device

Berbicara tentang tab menu, memang tidak akan pernah ada habisnya. ediTEMP sendiri sudah beberapa kali mencoba membuat berbagai jenis, dan secara kebetulan, yang kini sedang disukai ediTEMP adalah jenis Tab menu vertikal. Plus scrollbar, bisa digeser ke atas bawah demi memilih menu blog yang sedang dicari.

ediTEMP sedang percaya bila jenis ini cukup cocok pada sekian banyak device, tanpa harus menambah css query mobile, sebab tampilan list menu akan muncul sebagai pita yang memanjang ke bawah apabila pengunjung mengarahkan cursor pada tombol menu.

Tab menu jenis ini sangat cocok bila di aplikasikan pada blog yang memilih header fixed, karena dasarnya hanya menampilkan satu tombol menu saja dengan lebar sekitar 100px dan tinggi sekitar 36px.

ediTEMP memang bukan ahli coding ataupun ahli template, Tab menu ini juga hanyalah sebuah hasil uji coba yang telah dilakukan sekian kali, dan akhirnya menghasilkan tampilan bila tidak terkena cursor seperti ini saja :



dan akan muncul pita pilihan list menu bila cursor diarahkan pada tombol menu tersebut, seperti ini :



Seperti biasa, ediTEMP masih menggandrungi Tab menu non-script, hanya mengandalkan HTML dan CSS saja. Tentunya dengan tujuan agar lebih fresh sekaligus fast serta tidak mengganggu loading blog.

Bagi yang ingin mencoba, silakan copas HTML berikut :

<--PITA-->

<div class='pita' id='pita'>
<ul>
<li><span>MENU</span>
<ul>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/OTOMOTIF'>OTOMOTIF</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/KOMPUTER'>KOMPUTER</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/montirKATRO'>MONTIR</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/EMIS'>EMIS</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/SIMPATIKA'>SIMPATIKA</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/AL-MADRASAH'>MADRASAH</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/dasarMAT'>dasarMAT</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/SOSBUD'>SOSBUD</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/BTQ%20MI'>BTQ MI</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/METODA%20PEMBELAJARAN'>METODA</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/HIDUP%20SEHAT'>HIDUP SEHAT</a></li>
<li><a href='http://www.kemenag.go.id/'>KEMENAG</a></li>
<li><a href='http://www.kemdikbud.go.id/'>KEMDIKNAS</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/ASN'>A S N</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/K13-KEMENAG'>K-13 KEMENAG</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/K13-KEMDIKBUD'>K-13 KEMDIKNAS</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/bukanDUNIAKU'>BUkan Duniaku</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/p/tentang-blog-gurukatro.html'>ABOUT ME</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/p/hubungikami.html'>CONTACT ME</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/p/daftar-isi.html'>SITEMAPS</a></li>
</ul>
</li>
</ul>
</div>
<!--PITA-->

karena diatur dengan kondisi fixed, maka bisa diletakkan di bagian manapun, yang penting masih dalam area body.

NB : mohon maaf, itu HTML pita masih dengan alamat blog guruKATRO, soalnya lagi malas ambil waktu untuk menghapusnya.......

silakan ganti link link tersebut sesuai kebutuhan anda. Bila yang anda butuhkan lebih sedikit, silakan hapus sisanya, dan bila ternyata yang anda butuhkan lebih banyak dari itu, silakan tambah saja barisan link sebanyak banyaknya juga gak apa apa, toh tampilannya kebawahnya dibatasi scroll bar inih!

Untuk mengatur tampilan Tab menu vertikal tersebut, silakan ambil ini CSS :

====================================
#pita {position:fixed;top:0;right:0}
#pita ul {display:block;margin:0 auto;margin-top:37px;padding:0;margin-right:0;z-index:2}
 /* margin-top 37px silakan sesuaikan dengan tinggi header */
#pita span{
position:fixed; /* buang baris ini bila ingin menu ikut scrool blog */
top:1px;
right:1px; /* right diganti left bila ingin meletakkan tombol menu di sebelah kiri */
width:96px;
height:36px;/* sesuaikan dengan tinggi header */
text-align:center;
background:#166;
color:beige;
font-size:18px;
transition:all .1s ease-in-out;
border:1px solid beige;
line-height:36px;
}
#pita li {list-style:none;margin:0}
#pita li ul{padding:0 0 0 40px;width:100px;height:400px;background:#133;overflow:scroll;display:none;border-bottom-left-radius:40%}
#pita a{
display:block;
padding:20px 1px;
margin:2px 1px;
background:#369;
color:beige;
text-align:center;
font-size:12px;
border:1px solid beige;
transition:all .5s ease-in-out;
text-decoration:none;
}
#pita li:hover > span {background-color:transparent;color:transparent;border:transparent}
#pita li:hover > a,#pita a:hover{background-color:#133;color:gold;border:1px solid #133}
#pita li:hover > ul {position:relative;display:block;z-index:999999}

::-webkit-scrollbar {height:40px;width: .01px;background: transparent;} /* buang baris ini bila ingin chrome dan opera tetap menampilkan alur scrollbar */
====================================
 begitulah .... tidak memerluka n pengatura khusus untuk tampilam mobile.....



atau silakan atur ulang sendirilah...... tampilan tepi, background text dan lain lainnya... sesuai selera karena sesungguhnya .... dan pada dasarnya .... anda lebih bisa dari pada admin blog ini


Demikian pembahasan tentang Tab menu vertikal, cocok untuk all device 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 *