Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End
Code

Membuat Menu Navigasi Sisi Meluncur untuk Desain Responsif

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Anissa Anwar (you can also view the original English article)

Dalam tutorial ini, Anda akan membuat menu navigasi sisi yang bisa diperluas dengan JavaScript dan CSS. Produk akhir akan muncul seperti gambar di bawah ini:

Sliding Side Navigation Menu

Markup

Untuk mulai, mari kita menambahkan beberapa markup untuk menu sisi kita:

Di sini Anda dapat melihat kita membuat sisi menu div dengan class sidenav. Selanjutnya kita menambahkan bilah navigasi atas sebenarnya melalui <nav>tag, dan kita menggunakan SVG untuk icon menu sisi.

Atribut icon dari onclick dan tombol menutup akan memicu beberapa JavaScript, yang kita akan menambahkan berikutnya.

Ingat untuk memasukkan semua konten website Anda dalam wadah div id = "main" sehingga itu akan meluncur di sebelah kanan.

JavaScript

Selanjutnya, mari kita menambahkan JavaScript untuk membuat fungsi openNav dan closeNav.

CSS

Akhirnya, kita akan perlu untuk memberi gaya halaman kita dengan beberapa CSS menu sisi dan link kita:

Catatan: body {overflow-x: hidden;} diperlukan untuk memastikan scroll horizontal tidak muncul saat menggunakan ini dengan CSS yang ada.

Anda sekarang dapat melihat pada menu Anda dan mencobanya di browser Anda.

Menggunakan jQuery

Jika Anda ingin membuat menu sisi JavaScript menggunakan jQuery, Anda dapat melakukan ini dengan mengganti JavaScript yang saya berikan tadi sebelumnya dengan bagian berikut:

Menghapus Slide

Untuk membuat menu muncul tanpa animasi slide, cukup hanya membuat perubahan properti CSS transition, seperti ditunjukkan pada formulir singkat di bawah ini:

Ini akan membuat perubahan yang muncul seketika tanpa ada penundaan yang ditentukan dalam transition. Standar yang kita gunakan adalah 0.5s.

Kesimpulan

Membuat menu sisi hanya dibutuhkan beberapa baris kode dan tidak perlu menggunakan banyak sumber daya. Juga, jika jQuery sudah pada halaman untuk tugas-tugas lain, pekerjaan dapat dibuat dengan sedikit lebih baris kode dan disesuaikan lebih lanjut.

Membuat kode responsif untuk bekerja dengan resolusi layar perangkat yang berbeda adalah hanya hal memodifikasi CSS dengan menambahkan media query untuk kasus-kasus tertentu.

Untuk mengambil ini lebih lanjut, Anda mungkin ingin memberi menu Anda gaya dengan kerangka CSS seperti Bootstrap atau Bulma.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.