Menu vertikal untuk sebuah situs berbentuk akordeon pada jQuery

Menu ini dikenal sebagai bagian integral dari situs ini. Navigasi menarik dari sumber internet ini mampu menarik minat pengunjung. Selain itu, properti penting dari menu apapun adalah kekompakannya. Menu vertikal sederhana mudah dibuat dengan menggunakan HTML dan CSS. Tapi kita akan melangkah lebih jauh: belajar bagaimana membuat menu akordeon dengan jQuery.

Buat menu- "akordeon"

Apa itu menu vertikal dalam bentuk akordeon? Ini adalah daftar drop-down yang menciptakan navigasi yang mudah digunakan dan memberikan tampilan yang stylish ke situs ini. Menu yang dijalankan dalam formulir ini memungkinkan Anda memasukkan banyak sub-item. Akses ke mereka terjadi saat Anda mengklik item yang diinginkan. Seseorang akan mengatakan bahwa Anda bisa membuat menu sederhana dengan gaya ini tanpa menggunakan jQuery. Ya, ini Tapi benda seperti itu tidak akan sangat nyaman bagi pemilik tablet atau smartphone. Mari buat menu vertikal, atraktif untuk semua orang. Kemudian, dengan mengubah penataan warna dari navigasi seperti itu, akan memungkinkan untuk menyesuaikan desain untuk situs manapun.

Kode HTML

Jadi, untuk membuat menu vertikal kita, pertama anda perlu mengetik kode HTML, yang akan berisi baris berikut:

Simpan kode ini di file bernama Accord_menu.html.

Seperti yang bisa Anda lihat, kami membuat daftar yang tidak berurutan. Terdiri dari 3 poin utama:

- foto;

- Film;

- buku

Setiap item memiliki beberapa sub-item. Dimana ada #, Anda perlu menambahkan link. Sekarang penting untuk menggambarkan gaya. Itu semua tergantung pada seperti apa sumber daya Internet Anda. Menu vertikal untuk situs ini harus sesuai dengan desainnya secara harmonis.

CSS

Dengan gaya, Anda seharusnya tidak mengalami kesulitan. Kami hanya mencatat bahwa dalam contoh ini, penggunaan gradien digunakan. Beginilah cara CSS terlihat:

File CSS menentukan warna, ukuran, spidol dihapus ke kiri item daftar. Ini ditentukan bagaimana setiap titik dan sub-menu akan berperilaku saat Anda mengarahkan kursor ke atasnya. Sebagai contoh:

# E1fee2 adalah warna hijau muda dari sub - titik.

# C4f0f7 adalah rona halus sub-poin saat Anda mengarahkan kursor ke atasnya.

Properti tampilan diatur untuk memblokir untuk menyesuaikan indentasi dan ukuran yang diperlukan. Warna, ukuran, jenis huruf, lokasi - semua ini juga dijelaskan dalam file CSS. Nama itu, misalnya, accordionmenu_my1.css.

Menghubungkan jQuery untuk perbaikan menu

Seperti yang Anda ingat, tujuan kami adalah membuat menu jQuery vertikal. Jika Anda baru mengenal teknologi ini, jangan berkecil hati. Gunakan repositori Google dan hubungkan skrip jQuery. Ini akan membuat menu lebih atraktif. JQuery adalah library JavaScript berdasarkan interaksi hypertext markup HTML dan JavaScript. JQuery memungkinkan Anda mengakses isi dan atribut elemen.

Jadi, kami menghubungkan skrip yang diperlukan di badan file HTML dan menetapkan aturan untuk menyimpan 2 variabel, tidak termasuk lompatan elemen. Kami membuat kode yang menutup tab lain saat Anda membuka kotak yang diklik mouse. Begini tampilannya:

Simpan semua perubahan, lihat bagaimana menu terlihat di browser. Berikut adalah hasil keseluruhan dari pekerjaan: Alhasil, kita akan memiliki menu yang menarik, yang selalu bisa diubah tergantung dari preferensi Anda. Dan dengan memperoleh pengetahuan baru di bidang jQuery, CSS, Anda akan menciptakan elemen unik dari situs ini, meningkatkan kemampuan praktis Anda.