Вертыкальнае меню для сайта ў выглядзе акардэона на jQuery

Меню, як вядома - неад'емная частка сайта. Цікавая рух інтэрнэт-рэсурсу здольная зацікавіць наведвальнікаў. Акрамя таго, важная ўласцівасць любога меню - яго кампактнасць. Простае вертыкальнае меню лёгка ствараецца пры дапамозе HTML і CSS. Але мы пойдзем далей: павучымся ствараць меню- "акардэон" пры дапамозе jQuery.

Ствараем меню- "акардэон"

Што такое вертыкальнае меню ў выглядзе акардэона? Гэта такі расчыняецца спіс, які стварае зручную навігацыю і надае стыльнасць сайту. Меню, выкананае ў такім выглядзе, дазваляе ўключыць у сябе шмат падпунктаў. Доступ да іх адбываецца пры пстрычцы мышкі па неабходным элементу. Хтосьці скажа, што можна зрабіць простае меню ў такім стылі без прымянення jQuery. Ды гэта так. Але падобны аб'ект будзе не вельмі зручна выкарыстоўваць уладальнікам планшэтаў ці смартфонаў. Давайце створым вертыкальнае меню, прывабнае для ўсіх. Потым, змяняючы каляровую стылізацыю такой навігацыі, можна будзе падбудаваць дызайн пад любы сайт.

код HTML

Такім чынам, каб стварыць наша вертыкальнае меню, спачатку трэба набраць HTML-код, які будзе змяшчаць наступныя радкі:

Захавайце дадзены код у файле пад назвай Accord_menu.html.

Як бачыце, мы стварылі неўпарадкаваных спіс. Ён складаецца з 3 асноўных пунктаў:

- фатаграфіі;

- фільмы;

- кнігі.

У кожнага пункта ёсць па некалькі падпунктаў. Там дзе стаяць #, вам трэба будзе дадаць спасылкі. Цяпер важна апісаць стылі. Усё залежыць ад таго, як выглядае ваш інтэрнэт-рэсурс. Вертыкальнае меню для сайта павінна гарманічна ўпісвацца ў яго дызайн.

CSS-код

Са стылямі ў вас не павінна быць цяжкасцей. Адзначым толькі, што ў дадзеным прыкладзе выкарыстоўваецца Градыентнае заліванне. Вось як выглядае CSS-код:

У CSS-файле задаецца колер, памер, прыбіраюцца маркеры злева ад элементаў спісу. Вызначаецца, як будзе паводзіць сябе кожны пункт і падпункт меню пры навядзенні на яго курсора. Напрыклад:

# e1fee2 - гэта далікатна-салатавы колер падпунктаў.

# C4f0f7 -голубоватый адценне падпунктаў пры навядзенні на іх курсора.

Уласцівасці display задаем значэнне block, каб рэгуляваць неабходныя водступы і памеры. Колер, памер, тып шрыфта, размяшчэнне - усё гэта таксама апішыце ў файле CSS. Назавіце яго, напрыклад, accordionmenu_my1.css.

Падключэнне jQuery для ўдасканалення меню

Як вы памятаеце, наша мэта - стварыць вертыкальнае меню jQuery. Калі вы дрэнна знаёмыя з дадзенай тэхналогіяй, не хвалюйцеся. Скарыстаемся рэпазітаром Google і падключым скрыпт JQuery. Гэта зробіць меню прывабней. jQuery ўяўляе сабой бібліятэку JavaScript, заснаваную на ўзаемадзеянні гіпертэкставай разметкі HTML і JavaScript. jQuery дазваляе звяртацца да змесціва і атрыбутаў элементаў.

Такім чынам, падлучальны неабходны скрыпт у целе HTML-файла і задаем правілы па захоўванні 2 зменных, выключаючы скокі элементаў. Ўносім код, які зачыняе астатнія ўкладкі пры адкрыцці за тую, па якой адбываецца клік мышшу. Вось як гэта ўсё выглядае:

Захавайце ўсе змены, паглядзіце, як выглядае меню ў браўзэры. Вось агульны вынік працы: У выніку ў нас выйдзе прывабнае меню, якое заўсёды можна перарабіць у залежнасці ад сваіх пераваг. А набываючы новыя веды ў галіне jQuery, CSS, вы будзеце ствараць унікальныя элементы сайта, удасканальваючы свае практычныя навыкі.