JQuery-də bir akkordeon şəklində bir sayt üçün şaquli menyu

Menyunun saytın ayrılmaz hissəsi olduğu bilinir. İnternet resurslarının marşrutlu naviqasiyası qonaqlar maraqlandırır. Əlavə olaraq hər hansı bir menyunun əhəmiyyətli bir xüsusiyyəti kompaktlıqdır. Sadə bir şaquli menyu asanlıqla HTML və CSS istifadə edərək yaradılıb. Amma daha da irəliləyəcəyik: jQuery ilə akkordeon menyu yaratmağı öyrənin.

Menyu yaradın - "akkordeon"

Akkordeon şəklində şaquli bir menyu nədir? Bu, rahat bir naviqasiya yaradan və saytın şık bir görünüşünü verən bir açılan siyahıdır. Bu formada icra edilən menyu, bir çox alt elementi əlavə etməyə imkan verir. İstədiyiniz elementi tıkladığınızda onlara giriş imkanı yaranır. Biri jQuery istifadə etmədən bu üslubda sadə bir menyu edə bilərsiniz deyə bilərəm. Bəli, budur. Lakin belə bir obyekt tablet və ya smartfon sahibləri üçün çox əlverişli olmayacaq. Hər kəs üçün cazibədar bir şaquli menyu yaratsın. Sonra belə naviqasiyanın rəngini dəyişdirməyi dəyişdirərək, istənilən saytın dizaynını fərdiləşdirmək mümkün olacaq.

HTML Kodu

Beləliklə, şaquli menyu yaratmaq üçün əvvəlcə aşağıdakı xətləri olan HTML kodunu yazmalısınız:

Bu kodu Accord_menu.html adlı faylda saxla.

Gördüyünüz kimi, bir sıra siyahı yaratdıq. 3 əsas nöqtədən ibarətdir:

- fotoşəkillər;

- filmlər;

- kitablar.

Hər bir maddə bir neçə alt elementə malikdir. # Olduğu yerlərdə əlaqələr əlavə etməlisiniz. İndi üslubları təsvir etmək vacibdir. Bütün bunlar İnternet resursunuzun nə olduğuna bağlıdır. Saytın şaquli menyusu onun dizaynına uyğundur.

CSS

Üslubları ilə, heç bir çətinlik yaşamamalısınız. Yalnız bu nümunədə gradient dolğunluqun istifadə edildiyini qeyd edirik. CSS'nin necə göründüyü belədir:

CSS faylı rəng, ölçü, markerlər siyahıların sol tərəfinə çıxarılır. Hər bir nöqtənin və alt menyunun üzərinə keçdiyiniz zaman necə davranacağı müəyyən edilir. Məsələn:

# E1fee2 alt nöqtələrin yüngül-yaşıl rəngidir .

# C4f0f7, onların üstünə hoverlandığınız zaman alt pillələrin incə hündürlüyüdür.

Ekranın göstəricisi lazımi girinti və ölçüləri tənzimləmək üçün bloklanır. Rəngi, ölçüsü, font növü, yeri - bu da CSS faylında təsvir olunur. Bunun adını, məsələn, accordionmenu_my1.css.

Menyu təkmilləşdirilməsi üçün jQuery qoşulma

Xatırladığınız kimi, məqsədimiz şaquli jQuery menyu yaratmaqdır. Bu texnologiyaya yeni baxırsınızsa, cəlb olunmayın. Google qaynaqından istifadə edin və jQuery skriptini bağlayın. Bu menyu daha cəlbedici edəcək. JQuery, HTML və JavaScript hiper mətn biçimlendirme qarşılıqlı əsasında JavaScript kitabxanasıdır. JQuery elementlərin məzmunu və atributlarına daxil olmaq imkanı verir.

Beləliklə, HTML-faylının bünyəsində zəruri olan scripti birləşdiririk və elementlərin sıçramaları istisna olmaqla, 2 dəyişənlərin saxlanması qaydalarını müəyyən edirik. Siçan tıkladığınızdan birini açarkən digər sekmelerinizi bağlayan kodunu edirik. Göründüyü kimi:

Bütün dəyişiklikləri qeyd edin, brauzerdə menyunun necə göründüyünə baxın. İşin ümumi nəticəsi: Nəticədə, biz arzularımdan asılı olaraq dəyişə biləcək cazibədar bir menyu olacaq. Və jQuery, CSS sahəsində yeni məlumatlar əldə etməklə, praktiki bacarıqlarınızı artıraraq, saytın nadir elementləri yaradırsınız.