> > > show hide vertical menu jquery

show hide vertical menu jquery

Unknown

: 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

Judul Artikel :show hide vertical menu jquery
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
Label: ,

23 komentar

avatar
Balas
Iqfadhilah delete 15 Januari 2014 pukul 02.35

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

avatar
Balas
Sopala Multapa delete 15 Januari 2014 pukul 20.48

bisa bisa aja nih si mas bikin triknya .. mantapzzzz

avatar
Balas
Fazri delete 16 Januari 2014 pukul 09.43

Keren mas, menunya ke Hide ya :\

avatar
Balas
Unknown delete 17 Januari 2014 pukul 09.30

thanks mas, dicoba dan diutak atik nanti

avatar
Balas
Anonim delete 19 Januari 2014 pukul 10.17

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

avatar
Balas
Unknown delete 19 Januari 2014 pukul 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>

avatar
Balas
Anonim delete 21 Januari 2014 pukul 18.11

thanks :D

avatar
Balas
Akmal delete 27 Januari 2014 pukul 00.52

keren nih tutorialnya mas... bisa dicoba mangstaap

avatar
Balas
Unknown delete 31 Januari 2014 pukul 21.15

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

avatar
Balas
Eka Ikhsanudin delete 7 Februari 2014 pukul 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 ... :)

avatar
Balas
Rz Bot delete 20 Februari 2014 pukul 22.57

dicoba dulukang 7:(

avatar
Balas
Admin delete 7 Maret 2014 pukul 15.04

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

avatar
Balas
Unknown delete 19 Maret 2014 pukul 22.54

Manttappp mas ..
langsug saya cobain deh :gitar

avatar
Balas
Unknown delete 21 Maret 2014 pukul 19.49

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

avatar
Balas
binkbenk delete 7 April 2014 pukul 21.11

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

avatar
Balas
Unknown delete 20 April 2014 pukul 00.14

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

avatar
Balas
Yanto cungkup delete 7 Mei 2014 pukul 10.03

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

avatar
Balas
Nur Kholis Mansur delete 12 Mei 2014 pukul 12.40

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

avatar
Balas
Unknown delete 9 Februari 2015 pukul 06.04

mantap kang... mksh tlh berbgi

avatar
Balas
Ary Media delete 2 Maret 2016 pukul 03.29
Komentar ini telah dihapus oleh pengarang.
avatar
Balas
Ary Media delete 2 Maret 2016 pukul 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

avatar
Balas
Ary Media delete 2 Maret 2016 pukul 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

avatar
Balas
Ary Media delete 2 Maret 2016 pukul 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>

Konversi