Langsung ke konten utama

Membuat Menu Vertical Dan Menu Vertical Hide

Menu Vertical Dan Menu Vertical Hide
Sudah beberapa hari ini hujan terus mengguyur tempat tempat aku tinggal. Dan yang aneh, alasannya yaitu hujan yang terus mengguyur, koneksi internet modem aku jadi tersendat-sendat. Alhasil aktivitas ngeblog aku jadi terganggu juga...hadeueuehh...

Nah sekarang mumpung agak lancar...(karena mungkin belum hujan...), aku mencoba bagikan trik cara membuat menu vertical dan menu vertical hide.

Untuk menu vertical mampu disimpan di sidebar atau mungkin di bawah postingan dan untuk menu vertical hide akan tampak pada sisi blog baik di kanan ataupun di kiri.

A. MENU VERTICAL

Untuk membuat menu vertical ini silahkan copy kode-kode di bawah ini.

Silahkan copy aba-aba CSS di bawah ini dan simpan di atas aba-aba ]]></b:skin>

  .vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; } 
 .vertical>ul { margin:0; padding:0; } 
 .vertical ul,.vertical li { list-style:none; } 
 .vertical>ul>li { background:#292929; margin:0;text-transform:uppercase;padding:0;color:#fff;}
 .vertical>ul>li:hover {background:#4B4B4B}
 .vertical>ul>li a{color:#fff} 
 .vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; } 
 .vertical>ul>li li { background:#efefef;} 
 .vertical>ul>li li a{color:#333;text-transform:none} 
 .vertical a { display:block; text-align:center; text-decoration:none!important; } 
 .vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;} 
 .vertical>ul>li ul li a { height:0; transition:.3s ease-out} 
 .vertical>ul>li:hover ul li a { height:30px; } 
 .vertical>ul>li:hover ul { opacity:1; } 
 .vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
 .vertical > ul > li li:hover a{color:#fff }

Dan silahkan copy aba-aba HTML-nya atau pemanggilnya di bawah ini dan simpan di gadget HTML sidebar atau mungkin di bawah postingan.

  <div class='vertical'>
 <ul>
 <li><a href='/' title='Menu1'>Menu 1</a>
 <ul>
 <li><a href='/' title='Sub Menu1'>Sub1 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub2 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub3 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub4 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub5 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub6 Menu1</a></li>
 </ul>
 </li>
 </ul>
 <ul>
 <li><a href='/' title='Menu2'>Menu 2</a>
 <ul>
 <li><a href='/' title='Sub1 Menu2'>Sub1 Menu2</a></li>
 <li><a href='/' title='Sub2 Menu2'>Sub2 Menu2</a></li>
 <li><a href='/' title='Sub3 Menu2'>Sub3 Menu2</a></li>
 <li><a href='/' title='Sub4 Menu2'>Sub4 Menu2</a></li>
 <li><a href='/' title='Sub5 Menu2'>Sub5 Menu2</a></li>
 <li><a href='/' title='Sub6 Menu2'>Sub6 Menu2</a></li>
 </ul>
 </li>
 </ul>
 <ul>
 <li><a href='/' title='Menu3'>Menu 3</a>
 <ul>
 <li><a href='/' title='Sub1 Menu3'>Sub1 Menu3</a></li>
 <li><a href='/' title='Sub2 Menu3'>Sub2 Menu3</a></li>
 <li><a href='/' title='Sub3 Menu3'>Sub3 Menu3</a></li>
 <li><a href='/' title='Sub4 Menu3'>Sub4 Menu3</a></li>
 <li><a href='/' title='Sub5 Menu3'>Sub5 Menu3</a></li>
 <li><a href='/' title='Sub6 Menu3'>Sub6 Menu3</a></li>
 </ul>
 </li>
 </ul>
 </div>


B. MENU VERTICAL HIDE

Untuk menu vertical hide ini terinspirasi dengan artikel kang Beben kemarin, jadi aku gabungkan triknya sehingga menghasilkan menu vertical hide ini.

Untuk membuatnya silahkan copy kode-kode di bawah ini.

Silahkan copy aba-aba CSS di bawah ini dan simpan di atas aba-aba ]]></b:skin>

  #menu-vertical{width:19em;right:-19em;top:5.5em;height:auto;position:fixed;overflow-y:hidden;background-color:#2b2b2b;transition:right .4s ease-in-out;margin:0;padding:0}
 #menu-vertical:hover{right:0;}
 #menu-label{display:inline-block;background:#292929;position:fixed;text-align:center;right:0;top:3.2em;z-index:100;font-size:14px;line-height:30px;}
 #menu-label a{color:#FFF;display:block;text-transform:uppercase;text-decoration:none;width:5.1em;}
 #menu-label:hover{opacity:0.67;}
 .vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; } 
 .vertical>ul { margin:0; padding:0; } 
 .vertical ul,.vertical li { list-style:none; } 
 .vertical>ul>li { background:#292929; margin:0;text-transform:uppercase;padding:0;color:#fff;}
 .vertical>ul>li:hover {background:#4B4B4B}
 .vertical>ul>li a{color:#fff} 
 .vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; } 
 .vertical>ul>li li { background:#efefef;} 
 .vertical>ul>li li a{color:#333;text-transform:none} 
 .vertical a { display:block; text-align:center; text-decoration:none!important; } 
 .vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;} 
 .vertical>ul>li ul li a { height:0; transition:.3s ease-out} 
 .vertical>ul>li:hover ul li a { height:30px; } 
 .vertical>ul>li:hover ul { opacity:1; } 
 .vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
 .vertical > ul > li li:hover a{color:#fff }

Dan untuk aba-aba pemanggilnya silahkan copy aba-aba di bawah ini dan simpan di atas aba-aba </body>.

  <div id="menu-vertical">
 <h3 id="menu-label"><a href="#">Menu</a></h3>
 <div class='vertical'>
 <ul>
 <li><a href='/' title='Menu1'>Menu 1</a>
 <ul>
 <li><a href='/' title='Sub Menu1'>Sub1 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub2 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub3 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub4 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub5 Menu1</a></li>
 <li><a href='/' title='Sub Menu1'>Sub6 Menu1</a></li>
 </ul>
 </li>
 </ul>
 <ul>
 <li><a href='/' title='Menu2'>Menu 2</a>
 <ul>
 <li><a href='/' title='Sub1 Menu2'>Sub1 Menu2</a></li>
 <li><a href='/' title='Sub2 Menu2'>Sub2 Menu2</a></li>
 <li><a href='/' title='Sub3 Menu2'>Sub3 Menu2</a></li>
 <li><a href='/' title='Sub4 Menu2'>Sub4 Menu2</a></li>
 <li><a href='/' title='Sub5 Menu2'>Sub5 Menu2</a></li>
 <li><a href='/' title='Sub6 Menu2'>Sub6 Menu2</a></li>
 </ul>
 </li>
 </ul>
 <ul>
 <li><a href='/' title='Menu3'>Menu 3</a>
 <ul>
 <li><a href='/' title='Sub1 Menu3'>Sub1 Menu3</a></li>
 <li><a href='/' title='Sub2 Menu3'>Sub2 Menu3</a></li>
 <li><a href='/' title='Sub3 Menu3'>Sub3 Menu3</a></li>
 <li><a href='/' title='Sub4 Menu3'>Sub4 Menu3</a></li>
 <li><a href='/' title='Sub5 Menu3'>Sub5 Menu3</a></li>
 <li><a href='/' title='Sub6 Menu3'>Sub6 Menu3</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>


Agar penampakannya ada di sebelah kiri blog, silahkan ganti aba-aba right dengan left pada aba-aba CSS-nya.


Inspirasi: beben-koben.blogspot.com/2013/07/make-lists-toc-menu.html
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Teknik Mengolah Kata Kunci, Cara Sederhana Riset Keyword Tanpa Tools

Pada postingan kali ini saya mau bagikan lagi sebuah teknik mengolah kata kunci. Agar isi dalam artikel ini praktis dipahami jadi saya menggunakan sedikit ulasan bergambar semoga nantinya praktis dipahami. Teknik ini yaitu salah satu teknik seo yang sering digunakan oleh para internet marketing untuk mampu menggaet calon pelanggannya secara tertarget. Dan percaya saja bahwa ini kali pertama anda menemukan satu dari sekian banyaknya teknik seo yang ada yang mampu membantu anda menerima visitor yang banyak. Kabar baiknya, walaupun ini yaitu seni administrasi seo marketing tapi mampu juga diaplikasikan untuk jenis website artikel. Bahkan hal ini akan sangat bagus.. Ribuan pengunjung organik google dalam 1 bulan bukan duduk duduk masalah lagi untuk mampu didapatkan secara mudah. Oleh alasannya yaitu itu simak baik-baik, baca poin per poin semoga wawasan anda mampu ditambahkan secara menyeluruh. Berikut yang akan kita pelajari... Survey Google Auto Complete Google Sugge...
Posting Komentar
Baca selengkapnya

Cara Upload File, HTML, CSS, Javascript Di Google Drive

D ari info beberapa sumber yang saya baca, bahwa Google Code ada kemungkinan tahun depan sudah tidak mampu dipakai alasannya yakni Google akan menutupnya. Nah sebagai penggantinya Google telah menyiapkan daerah gres untuk menghosting file menyerupai file dokumen, HTML, CSS, maupun JavaScript yaitu Google Drive. Untuk itu kini saya mulai mengalihkan file JavaScript dan HTML blog Kompi Ajaib dari Google Code ke Google Drive dan ternyata sangat mudah dan script berjalan sempurna. Sekarang saya akan menguraikan cara upload file HTML, CSS, atau Javascript di Google Drive. Bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini: 1. Silahkan masuk ke Google Drive dengan link berikut https://drive.google.com/ dan login dengan akun Google Anda. 2. Kemudian klik tanda upload untuk mulai mengupload file dari komputer Anda, menyerupai pada gambar di bawah ini. 3. Silahkan pilih file yang ingin Anda upload kemudian akan muncul kotak upload, bi...
Posting Komentar
Baca selengkapnya

Daftar Pilihan Situs Penyedia Gambar Gratis Legal Bebas Di Gunakan

Daftar website/situs yang menyediakan gambar gratis. Jika anda bingung memilih gambar untuk posting blog atau melengkapi artikel dengan gambar supaya terlihat bagus dan menarik , anda bisa menggunakan situs yang menyediakan foto serta gambar yang bebas hak cipta alias gratis untuk di gunakan secara komersil. Dengan memakai gambar di daftar situs ini di jamin aman dan tidak perlu khawatir lagi ada pihak yang meng-claim.  Barangkali ada yang belum tahu bahwa setiap gambar di internet juga mempunyai hak cipta , jadi tidak semua gambar bisa di gunakan sembarangan. Penggunaan gambar yang berhak cipta bisa berbuntut panjang , jikalau yang mempunyai gambar tersebut secara sah mengadu atau melaporkan ke pihak DMCA , besar kemungkinan blog kita akan mendapat peringatan , jikalau hal ini berlanjut dan tidak ada tindakan untuk menghapus gambar tersebut maka resiko terburuk ialah artikel kita akan otomatis masuk ke dalam daftar draft. Berikut ini gua rangkum daftar...
Posting Komentar
Baca selengkapnya