show hide vertical menu jquery

: 22.24 23 comments

vertical menu
Assalamulaikum.....Bismillah ...Alhamdulillah .. Mumpung ada waktu dan ide kali ini admin Fullblogdesign akan membuat sebuah tutorial tentang cara membuat show hide vertical menu dengan menggunakan jquery,untuk contoh dan demonya silahkan Review ke http://jsfiddle.net/Mx2bX/3/embedded/result/
Untuk lebih jelasnya silahkan sobat ikuti tutorialnya secara lengkap:
  1. karena hidden menu ini menggunakan Jquery silahkan pasang jquery di bawah ini tepat di atas kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
    Jika pada template sobat sudah ada jquerynya abaikan perintah di atas karena dalam sebuah template hanya boleh ada 1 jquery
  2. selanjutnya pasang kode css nya diatas kode ]]></b:skin> atau </style>
    #hidden-menu{width:300px;height:100%;background:#BFFFFE;font:normal 20px arial;position:fixed;top:0;right:-300px;transition:all 0.5s ease-in-out}
    #hidden-menu:before{content:" Menu ";position:absolute;background:#80FE80;width:100%;padding:2%;text-align:center}
    .tombol:before{content:"\f045 ";font-family:fontAwesome;position:absolute;top:0;left:-30px;background:#000;color:#fff;padding:5px}
    .tombol:hover:before{color:#000;background:#006B6B}
    #hidden-menu a{color:#333;text-decoration:none;display:block;padding:5px}
    #hidden-menu a:hover{color:red;border-right:3px solid red;background:#BFFEBF}
    #hidden-menu li{list-style:none;line-height:60px;border-bottom:1px dotted #aaa}
    #hidden-menu.active {
    	right:0;
    }
  3. karena menu ini menggunakan fontAwesome sobat harus pasang dulu Style Awesome berikut tepat di bawah kode <head>
    <link href='https://simple-cursor.googlecode.com/svn/trunk/awesome.css' rel='stylesheet'/>
  4. Cari kode </body> lalu pasang script berikut tepat di atas kode </body>
    <script type="text/javascript">   
    $('.tombol').on('click', function(e) {
    
            e.preventDefault();
    
            $('#hidden-menu').toggleClass('active');
    
        });
    </script>
  5. Lalu Save template
  6. Nah yang terakhir cara pemanggilan kode html nya silahkan menuju ke tata letak >> tambah Gadget >> Html Javascript lalu masukkan kode html berikut
    <div id="hidden-menu">     <ul><li><a href="/" title="home"><i class="icon-home"></i>Home</a></li>         <li><a href="#" title="Contack"><i class="icon-envelope"></i>Contack</a></li>         <li><a href="#" title="Abouth"><i class="icon-user"></i>Abouth</a></li>         <li><a href="#" title="Color-Piker"><i class="icon-th"></i>Color-Piker</a></li>         <li><a href="#" title="more"><i class="icon-file"></i>More</a></li>         <a class="tombol" href="#" title="open/close"></a>     </ul> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <div class="g-person" data-layout="landscape" data-href="https://plus.google.com/109648847911535372958"></div>     <div style="text-align:center;background:#000;color:#fff">Thank you for visiting</div> </div>
  7. coba perhatikan kode yang saya seleksi (kode berwarna biru)silahkan sobat ganti dengan id google plus sobat
  8. Save

photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang show hide vertical menu jquery Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih

23 komentar

fadila a delete 15 Januari 2014 02.35

nyimak dulu mas,, blm paham bener tentang cara nya...
coba saya baca-baca dulu tutorialnya untuk lebih memahami...

Ruly Jenar Nakula delete 15 Januari 2014 20.48

bisa bisa aja nih si mas bikin triknya .. mantapzzzz

Achmad Fazri delete 16 Januari 2014 09.43

Keren mas, menunya ke Hide ya :\

Beranda Kata delete 17 Januari 2014 09.30

thanks mas, dicoba dan diutak atik nanti

Muhammad Iqbal Azhari delete 19 Januari 2014 10.17

Keren banget mass
oh ya mass bisa share ga gmna cara buat kotak script ini http://prntscr.com/2kl1mw

Mahfid Mayanto delete 19 Januari 2014 20.01

pasang kode di bawah ini tepat di atas kode <head>
<link href='https://karina-imuet.googlecode.com/svn/trunk/sintack.css' rel='stylesheet'/> kemudian untuk penulisan kodenya gunakan kode di bawah ini
<pre><code>..taruh kodenya disini...</code></pre>

Muhammad Iqbal Azhari delete 21 Januari 2014 18.11

thanks :D

gegares delete 27 Januari 2014 00.52

keren nih tutorialnya mas... bisa dicoba mangstaap

Ahmad Suyadi delete 31 Januari 2014 21.15

Keren kang Cara SHOW HIDE VERTICAL MENU JQUERY nya .....
ijin nyimak dan praktekan :)

EKA IKHSANUDIN delete 7 Februari 2014 18.59

owwh, jadi pada satu Template itu gak boleh lebih dari 1 Jquery ya kang, pantes Blog aku pernah dipasang lebih, gak fungsi kode nya ..... makasih kang atas petunjuknya... kapan2 aku praktekin deh hehe ... :)

Mawan Cradlez delete 20 Februari 2014 22.57

dicoba dulukang 7:(

Leony Li delete 7 Maret 2014 15.04

wkwkwkw.. ternyata yang digumpetin disamping itu, hampir tidak ketermu tuh :-bd keren kang

Munawir Alfikri delete 19 Maret 2014 22.54

Manttappp mas ..
langsug saya cobain deh :gitar

Robi Hidayat delete 21 Maret 2014 19.49

kang kalo buat menu seperti itu tapi ditaruh di kiri dan melayang caranya gimana? Terima Kasih

binkbenk delete 7 April 2014 21.11

mau coba tapi takut,,, gak ada demonya :D

fandi ahmad delete 20 April 2014 00.14

bapak/mas admin kalo saya pingin buat nya di offline pake notepad caranya sama atau tidak ? mohon bantuannya (:

yanto cungkup delete 7 Mei 2014 10.03

makasih tutornya mas mahfid.oya kemana ajanih koq jarang banget oll

Nur Kholis Mansur delete 12 Mei 2014 12.40

keren bang... saya jadikan referensi neh.. :\

Rama Banten RB delete 9 Februari 2015 06.04

mantap kang... mksh tlh berbgi

Ary Suryanto delete 2 Maret 2016 03.29
Komentar ini telah dihapus oleh pengarang.
Ary Suryanto delete 2 Maret 2016 03.32

Assalamu'alaikum...! Kang, show-hide ini aq pasang kok posisinya ketimpa halaman blognya ya, gimana ini solusinya kang? Mohon bantuanya sangat kang...
http://arysuryanto.blogspot.com

Ary Suryanto delete 2 Maret 2016 04.52

Assalamu'alaikum...! Kang, show-hide ini aq pasang kok posisinya ketimpa halaman blognya ya, gimana ini solusinya kang? Mohon bantuanya sangat kang...
http://arysuryanto.blogspot.com

Ary Suryanto delete 2 Maret 2016 04.53

Assalamu'alaikum...! Kang, show-hide ini aq pasang kok posisinya ketimpa halaman blognya ya, gimana ini solusinya kang? Mohon bantuanya sangat kang...

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>