Суроо менен аккордеон түрүндө сайттын Vertical меню

Силер билгендей менюсу, - сайттын ажырагыс бир бөлүгү. Кызыктуу Navigate онлайн ресурстук пайыздык коноктор алат. Мындан тышкары, ар кандай меню боюнча маанилүү бир өзгөчөлүк - анын көптүктөр. А жөнөкөй тик меню жонокой HTML жана CSS жардамы менен түзүлгөн. Бирок андан ары: Келгиле, жазганды жардамы менен menu-"Аккордеондо" түзүүгө үйрөнсөк болорун карап көрөлү.

бир menu-"Аккордеондо" түзүү

Аккордеондо түрүндө тик меню деген эмне? Бул багыт боюнча жеңил жараткан жана саркеч сайтка берген ачылуучу тизме болуп саналат. Меню, ушундай жол менен аткарылган, сен-пунктчаларында көп буруш үчүн мүмкүнчүлүк берет. Сен каалаган нерсени чычканды чыкылдатуу кийин аларга мүмкүндүк пайда болот. Кимдир бирөө бул жазганды пайдалануу бул ыкмада жөнөкөй менюну алууга болот деп айта алат. Ооба ошондой. Бирок, бул объект кыналган, же таблетка ээлерине абдан пайдалуу болмок эмес. баардык кайрылып, тик менюну түзөлү. Андан кийин, бир багыттоо стайлинг түсүн өзгөртүп, аны кайсы бир сайтка дизайнын өзгөртүүгө мүмкүн болот.

HTML коду

Ошондуктан, биздин тик менюсун түзүү үчүн, адегенде төмөнкү саптарын камтыган турган HTML-коду, терүү керек:

Accord_menu.html деген делосуна Бул кодду сактоо.

Көрүнүп тургандай, биз бул иретсиз тизмесин түзгөн. Ал 3-негизги пункттардын турат:

- сүрөттөр;

- тасмалар;

- китептер.

Ар бир нерседе бир нече пункттары бар. # Кайда, сен шилтемелерди кошуу керек болот. Азыр бул стилди сүрөттөө үчүн маанилүү болуп саналат. Бул сиздин бардык Интернет-ресурстун көз каранды. сайттын дизайны салып шайкеш киргизүү керек Vertical менюсу.

CSS-коду

стилдер менен кыйын эмес болууга тийиш. Бул, мисалы, бир градиент тойгончо колдонот гана экендигин белгилешет. Here CSS-коду:

түс CSS-делосуна көрсөтүлгөн, көлөмү маркерлер сол тизмесине заттар алынып салынат. Бул анын үстүнө курсорду кийин ар бир пункт жана суб-менюда өзүн кандай алып жүрүшү керектигин аныктаган. Мисалга:

# E1fee2 - бул боз жашыл түс Папканы.

# C4f0f7 -golubovaty көлөкө суб, алардын үстүнөн айланып жүрө берет.

Display мүлк зарыл, төшөмө жана өлчөмүн өзгөртүүгө бөгөттөөлөр баасын сурап. түсү, көлөмү, арип түрү, жер - бардыгы болуп CSS делосуна сүрөттөп турат. Мисалы, аны чакырып, accordionmenu_my1.css.

Код менюсу жакшыртуу туташуу

Эске салсак болот, биздин максат - тик меню үйрөнүп түзүү. Бул технологиялар менен тааныш эмес болсо, анда, кабатыр болбо. Биз Google репозиторийлеринен пайдалануу жана JQuery скрипттер байланыштырат. Бул жагымдуу менюсу болот. Код гипертекстти белгилөө HTML жана JavaScript өз ара негизделген JavaScript китепкана бөлүмүн ачуу болуп саналат. Код Сиз элементтеринин мазмуну жана сыпаттарын колдонууга мүмкүнчүлүк берет.

Ошентип, HTML-берилген органга зарыл арибин туташуу жана ат элементтерин эске албаганда, 2 өзгөрмөлөр сактоо эрежелерин койду. Салым кодун, кайсы бир ачылышында башка өтмөктөр жабылгандан бир чычканды чыкылдатуу бар. Бул жерде көрүнөт кантип:

, Бардык өзгөртүүлөрдү сактоо браузер менюсунда окшойт эмне экенин көрүүнү кааладым. Бул жалпы натыйжасы болуп саналат: Натыйжада, биз силер менен дайыма эле өз каалоосуна жараша өзгөртө албайт жагымдуу менюсун келдим. Ошондо жазганды, CSS жаатында жаңы билим алуу, алардын жөндөмдүүлүктөрүн жакшыртуу, сайттын уникалдуу элементтери түзөт.