membuat slidemenu dengan css dan jquery

Cara Membuat Sliding Menu Dengan CSS3 dan JQuery


Cara Membuat Sliding Menu Dengan CSS3 dan jQuery – Halo web designer. selamat datang di tutorial cara membuat slide menu di www.malasngoding.com. pada tutorial ini akan di jelaskan cara yang sangat mudah membuat sliding menu hanya dengan CSS dan JQuery. penasaran ? yuk kita simak sama-sama.

Cara Membuat Sliding Menu Dengan CSS3 dan JQuery

kalau ada teman-teman di sini yang belum tau apa itu sliding menu atau slide menu, akan saya jelaskan dulu nih tentang apa itu sliding menu.

Slide menu adalah menu navigasi pada website yang akan muncul dengan efek slide dari samping atau dari posisi lainnya setelah tombol menu di klik oleh user. saat ini tahun 2017, menu navigasi model seperti ini sedang sangat di sukai. dan banyak di terapkan oleh para web developer.

Kelebihan Slide Menu

Bukan tanpa alasan banyak yang menggunakan slide menu pada website nya nih teman-teman. ada beberapa faktor yang di perhitungkan untuk menggunakan slide menu sebagai model menu navigasi pada website. yuk simak kelebihan dari menggunakan slide menu berikut :

  • Membuat tampilan website menjadi lebih bersih
    maksud bersih di sini maksudnya tampilan website tidak akan di semakkan oleh tampilan atau urutan menu di bagian header. banyak pecinta template website berpenampilan bersih. bagian header nya kosong. hanya ada 1 tombol saja yang berfungsi untuk menampilkan menu. jadi tentu akan membuat tampilan header menjadi lebih bersih atau kosong(tidak semak).
  • Responsive
    Responsive adalah salah satu yang paling di utamakan dalam mendesign sebuah website. karena merupakan kemajuan di bidang web design. kenapa responsive di kelompokkan ke dalam manfaat dari slide menu? karena slide menu tidak akan mengganggu ukuran dari layar.
    mau di tampilkan dari browser pc, laptop, maupun smartphone, ukuran nya tidak akan berpengaruh. ukuran nya tetap sehingga bisa di buka dari ukuran layar berapa saja. contoh nya jika di akses dari layar smartphone, persis seperti kita membuka menu pada app smartphone. menunya akan tampil dari samping.
  • Modern
    gak kalah pentingnya, slide menu membuat tampilan website lebih modern. tapi kembali lagi ke kesukaan dari si web designer nya sendiri.
  • Terserah kamu
    Selebihnya terserah kepada teman-teman sendiri untuk menyimpulkan kelebihan dan kekurangan dari slide menu.

Cara Membuat Sliding Menu Dengan CSS dan JQuery

Perhatikan penggalan syntax di bawah.

kita akan membuat header dan bentuk dari menu nya terlebih dahulu. di sini tidak di jelaskan lagi tentang css atau html dasar. teman-teman bisa melihat tutorial sebelumnya tentang html dan css dasar di www.malasngoding.com.

karena di sini kita menggunakan jquery, maka jangan lupa kita hubungkan dulu dengan jquery.

HTML

CSS

Javascript / JQuery

Penjelasan

See the Pen Sliding menu CSS & jQuery by Malas Ngoding (@malasngoding) on CodePen.0

Perhatikan, akan kita jelaskan tentang cara kerja dari sliding menu yg kita buat dengan css dan jquery ini.

teman-teman bisa perhatikan pada syntax di atas. pertama kita membuat header dan bentuk vertikal menu. dan kita tetapkan posisi awal nya itu di luar dari halaman website kita dengan syntax :

jadi sebenarnya pada awal, menu tidak tersembunyi, menu nya ada. tapi kita posisikan di luar dari halaman website kita.

kemudian kita buat sebuah class untuk menetapkan kembali posisi menu dengan posisi left = 0. agar posisi menu terletak di paling pinggir kiri.

nah. class “slide-menu-tampil” ini lah yang aka kita berikan event toggleClass nya jQuery. baca di sini tutorial toggle class jquery di www.malasngoding.com. Cara Membuat Sliding Menu Dengan CSS3 dan jquery

saat tombol di klik, maka akan di tambahkan class slide-menu-tampil. dan saat tombol di klik lagi, maka akan di hilangkan class slide-menu-tampil.

maka hasilnya

membuat slide menu dengan css dan jquery

membuat slide menu dengan css dan jquery

cara membuat slidemenu dengan css.

membuat sliding menu dengan css

membuat sliding menu dengan css

dan jika di buka dengan ukuran layar smarphone.

Cara Membuat Sliding Menu Dengan CSS3 dan jquery

Cara Membuat Sliding Menu Dengan CSS3 dan jquery

FULL SOURCE CODE

sekian dulu tutorial Cara Membuat Sliding Menu Dengan CSS3 dan jquery. semoga dapat bermanfaat.

DEMO

 

Incoming search terms:

  • cara bikin menu sliding di php
  • cara buat menu navigasi jadi responsif lihat demo
  • kenapa menu sidebar tidak muncul ketika di click pada web design
  • cara buat navigasi di vinggir dengan jquery
  • cara membuat slide nav
  • cara membuat menu slide dengan jquery
  • cara membuat slider menu
  • cara membuat navigasi slide html
  • vertical sliding navigasi menu dengan jQuery
  • cara membuat menu toggle




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]