Menu menegak untuk laman web ini dalam bentuk akordion dengan jQuery

Menu, seperti yang anda tahu - merupakan sebahagian daripada laman web ini. Menarik sumber dalam talian mengemudi mampu pengunjung faedah. Di samping itu, harta penting mana-mana menu - kompak itu. Menu menegak mudah mudah dibuat menggunakan HTML dan CSS. Tetapi kita pergi lebih jauh: Marilah kita belajar membuat menu- "akordion" dengan bantuan jQuery.

Buat menu- "akordion"

Apakah yang dimaksudkan dengan menu menegak dalam bentuk akordion? Ini adalah senarai drop-down, yang mewujudkan mudah untuk mengemudi dan memberikan laman web yang bergaya. Menu, yang dilakukan dengan cara ini, membolehkan anda untuk menghidupkan banyak sub-item. Akses kepada mereka berlaku apabila anda klik tetikus pada item yang dikehendaki. Seseorang mungkin mengatakan bahawa ia adalah mungkin untuk membuat menu yang mudah dengan cara ini tanpa menggunakan jQuery. Ya, ia adalah. Tetapi objek ini tidak akan menjadi sangat berguna untuk pemilik telefon pintar atau tablet. Mari buat menu menegak, merayu kepada semua. Kemudian, menukar warna menggayakan navigasi, ia akan menjadi mungkin untuk menyesuaikan reka bentuk untuk mana-mana laman.

kod HTML

Jadi, untuk membuat menu menegak, anda perlu mendail HTML-kod, yang akan mengandungi baris berikut:

Menyelamatkan kod ini dalam fail yang dipanggil Accord_menu.html.

Seperti yang anda lihat, kami telah mencipta senarai tidak tertib. Ia terdiri daripada 3 perkara utama:

- gambar;

- filem;

- buku.

Setiap perkara mempunyai beberapa perenggan. Di manakah #, anda perlu untuk menambah pautan. Sekarang adalah penting untuk menggambarkan gaya. Ia semua bergantung kepada rupa sumber Internet anda. menu menegak untuk laman web ini mesti mengintegrasikan harmoni ke dalam reka bentuk.

CSS-kod

Dengan gaya yang anda tidak sepatutnya sukar. Kita perhatikan sahaja dalam contoh ini menggunakan mengisi kecerunan. Berikut adalah CSS-code:

warna ada dinyatakan di dalam CSS fail, penanda saiz dikeluarkan dari item dalam senarai di sebelah kiri. Ia ditentukan bagaimana untuk bertindak dalam setiap perkara dan sub-menu apabila anda mengapung di atasnya. Sebagai contoh:

# E1fee2 - ini pucat hijau warna sub.

# C4f0f7 -golubovaty naungan sub apabila anda berlegar atas mereka.

harta paparan meminta nilai blok untuk menyesuaikan padding dan saiz yang diperlukan. Warna, saiz, jenis font, lokasi - segala-galanya adalah seperti menggambarkan dalam fail CSS. Memanggilnya, sebagai contoh, accordionmenu_my1.css.

Bersambung penambahbaikan menu jQuery

Seperti mana yang diketahui, matlamat kami - untuk membuat menu jQuery menegak. Jika anda tidak biasa dengan teknologi ini, jangan bimbang. Kami menggunakan repositori Google dan menyambung skrip JQuery. Ini akan menjadikan ia menu yang lebih menarik. jQuery sebuah perpustakaan JavaScript berdasarkan interaksi Hypertext Markup HTML dan JavaScript. jQuery membolehkan anda untuk mengakses kandungan dan sifat-sifat unsur-unsur.

Jadi, menyambung skrip yang diperlukan dalam tubuh HTML-fail dan menetapkan kaedah-kaedah untuk penyimpanan 2 pembolehubah, kecuali untuk unsur-unsur perlumbaan kuda. Menyumbang kod, menutup tab lain pada pembukaan satu di mana terdapat satu klik tetikus. Berikut adalah bagaimana ia kelihatan:

Simpan semua perubahan, melihat apa yang kelihatan seperti dalam menu pelayar. Itu adalah hasil biasa: Hasilnya, kita telah menu menarik yang anda sentiasa boleh mengubah, bergantung kepada pilihan mereka. Dan memperolehi pengetahuan baru dalam bidang jQuery, CSS, anda akan mewujudkan elemen-elemen unik dari laman web, meningkatkan kemahiran mereka.