Меню-аккордеон на чистом CSS3 без javascript


Содержание

Элементы аккордеона на чистом CSS3 без JS

В настоящее время множество сайтов и другие проекты применяют элементы аккордеона, так как они очень удобны и несут в себе часть нужного и интересного материала или различную информацию для пользователей. И как ни странно множество таких элементов имеют часть кода написанного на JavaScript. Мы же предоставляем вам элементы аккордеона на чистом CSS3 без применения JavaScript кода. А это является огромным плюсом. Любой пользователь установивший его в своих проектах сможет без проблем отредактировать под свои требования и нужды. Изменить стиль, цветовую гамму и многое другое. Также данное решение снижает нагрузку на сервер и сайт.
Установка и настройка очень проста и тривиальна. Вам достаточно прописать html код элементов и подключить стили. А дальше, дело только вашей фантазии. Применяйте данную реализацию в своих проектах и экспериментируйте.

Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

200?’200px’:»+(this.scrollHeight+5)+’px’);»> body>div <
width: 25%;
min-width: 500px;
margin: 0 auto;
border-bottom: 2px solid #888;
>

div <
height: 1px;
overflow: hidden;
>

div>* <
opacity: 0;
transition: 0.5s;
font-size: 12px;
line-height: 1.75em;
>

input+label <
display: block;
position: relative;
padding: 50px 0;
font-weight: 700;
font-size: 14px;
>

input+label:after,
input+label:before <
position: absolute;
background: black;
content: »;
transform: rotate(0deg);
transition: 0.5s;
top: 50%;
>

input+label:after <
right: 4px;
height: 10px;
width: 2px;
margin-top: -5px;
>

input+label:before <
right: 0;
width: 10px;
height: 2px;
margin-top: -1px;
>

div <
height: auto;
margin: 0 0 50px;
>

div>* <
opacity: 1;
transition: 0.5s;
transition-delay: 0.25s;
>

input:checked+label:before <
transform: rotate(360deg);
transition: 0.5s;
>

input:checked+label:after <
transform: rotate(450deg);
transition: 0.5s;
>

label:hover <
cursor: pointer;
>

50 скриптов навигационных вкладок с поддержкой CSS

В статье приводится список скриптов навигации с помощью закладок. Каждый вариант имеет наглядный пример с доступным для загрузки исходным кодом.

bootstrap-tabs-x – расширенный плагин закладок, построенный на основе Bootstrap Tabs . Он позволяет выравнивать закладки, переворачивать заголовки, загружать контент через AJAX , а также включает в себя некоторые другие функции.

Pure CSS Tabs with Indicator – современная, но достаточно простая библиотека закладок, построенная без использования JavaScript . Это значит, что она быстрая и красивая.

Tabby – позволяет создавать простые закладки и выводить на них любой контент, включая видео. Данный скрипт предоставляет продвинутые настройки, поддерживает NPM и Bower .

Responsive Tabbed Navigation – современная удобная навигация, созданная с использованием JS и CSS , построенная с упором на мобильные устройства и поддерживающая горизонтальное и вертикальное расположение.

Toggler – плагин, написанный на чистом JavaScript , предназначен для создания элементов-переключателей, включая аккордеоны и закладки. Также он позволяет показывать/прятать любой элемент на странице.

Pure CSS Tabs – простой пример, созданный на основе CSS и JS . Несмотря на то, что он показывает « голые » закладки, вы сможете приукрасить их, изменив CSS стили.

Tabsy CSS – библиотека, написанная на CSS , предназначенная для создания простых элементов-переключателей, таких как закладки. Она не нуждается в дополнительных ресурсах и не требует использования JavaScript .

Илон Маск рекомендует:  unset в CSS

Многоуровневое аккордеон-меню

Простое аккордеон-меню средствами CSS.

Данный пример разработан исключительно средствами CSS, а именно гвоздём программы стал псевдо-класс :checked. Так же мы добавили и версию с применением jQuery в случае если вы захотите каких-то анимационных эффектов.

Структура

HTML структура довольно-таки проста: аккордеон представляет собой ненумерованный список. Если у элемента есть вложенность, то мы добавляем input[type=checkbox] и название. Так же присваиваем этому элементу класс .has-children . Все “стандартные” элементы списка содержат якоря.

Добавляем стиль

Для отслеживания выборки элемента мы используем специальную технику: используя элемент checkbox, мы сможем воспользоваться псевдо-классом :checked и сменить отображение потомков с “none” на “block”.

Шаг за шагом: прежде всего мы должны убедиться, что checkbox покрывает все элементы меню. Другими словами, нам нужно настроить checkbox под себя. Во-первых, при клике по label , checkbox должен заполняться/очищаться. Для этого мы используем атрибут “for” элемента label (атрибут label “for” = атрибуты input “name” и “id”. См. html код выше). Таким образом мы можем спрятать элемент input и работать с label .

Теперь обратите внимание на HTML: input , label и ненумерованный список — соседи. При клике по checkbox (по факту клик по label ), извлекается

    элемент и меняется режим отображения с “none” на “block”:

Если вы хотите добавить анимацию, то подключите .js файл. После этого добавьте класс .animate элементу .cd-accordion-menu (смена направления стрелок).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/css-multi-level-accordion-menu/
Перевел: Станислав Протасевич
Урок создан: 28 Октября 2015
Просмотров: 29297
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

33 Accordions CSS

Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, animated, etc. Update of June 2020 collection. 3 new examples.

Table of Contents

Horizontal Accordions

Collection of free HTML and CSS horizontal accordions. (9 items).

Author

  • Daniel Subat
  • January 23, 2020

Made with

  • HTML / CSS (SCSS)

About the code


CSS responsive accordion gallery with zoom animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Ivan Bogachev
  • June 6, 2020

Made with

  • HTML (Pug) / CSS (Less)

About the code

Pure CSS Accordion

Pure CSS horizontal accordion with transform and box-shadow effects.

Author

  • Stefan C.
  • January 11, 2020

Made with

About the code

CSS accordion image gallery. Less code and great animation effect.

Author

  • fox_hover
  • November 27, 2020

Made with

  • HTML
  • CSS/SCSS

About the code

CSS3 Accordion Slider With Transitions And Flexbox

CSS3 accordion with 5 different effects.

Demo Image: Expanding Horizontal Accordion In React

Expanding Horizontal Accordion In React

A quick alternative to the standard ‘Accordion’ pattern, built completely with React.
Made by Sean
January 7, 2020

Demo Image: Pure CSS Accordion

Pure CSS Accordion

Image accordion only with CSS and color filters using the rgba() function.
Made by Eduardo Moreno
November 26, 2020

Author

  • Miles Manners
  • July 19, 2020

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Horizontal Accordion

Full page horizontal accordion.

Demo Image: Responsive Accordion

Responsive Accordion

Responsive accordion (background images).
Made by Michael Ferry
October 1, 2015

Demo Image: Accordion Navigation

Accordion Navigation

No javascript, no flexbox.
Made by Oliver Knoblich
August 25, 2015

Demo Image: Flexbox Accordion

Flexbox Accordion

Simple horizontal flexbox accordion.
Made by Arjan Jassal
December 28, 2014


Vertical Accordions

Collection of free HTML and CSS vertical accordions. (21 items).

Author

  • ZingGrid
  • December 28, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Accordion Content

Air quotes card mode grid and accordion content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Natalia
  • September 25, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Pure SCSS Accordion Tabs

Accordion tabs without JS. This tabs have responsive design.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Monica Wheeler
  • May 15, 2020

Made with

  • HTML / CSS (Post CSS)

About the code

CSS Vertical Accordion

CSS vertical accordion for frequently asked questions.

Author

  • Ryan
  • December 13, 2020

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel (Vue.js)

About the code

Accordions Pls

Vertical accordion with HTML, CSS and JS (Vue.js).

Author

  • Jorge Brunetto
  • November 7, 2020

Made with

About the code

Accordion With Input Edit


Pure CSS accordion with input edit.

Author

  • Elior Tabeka
  • November 3, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Animated CSS Accordion

Animated collapse/expend component.

Author

  • Davide Cantelli
  • October 26, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Accordion In Js

Accordion in vanilla JS with CSS transition.

Author

  • Stelios Baglaridis
  • August 25, 2020

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Accordion 2.0

Vertical accordion with HTML, CSS and JS.

Author

  • Lewis Briffa
  • August 14, 2020

Made with

  • HTML
  • CSS (Ionicons.css)
  • JavaScript (jQuery.js)

About the code

Accordion

Accordion JS functionality allowing you to set the animation speed of the toggle. You also have the option of being able to have just one accordion item open at any one given time.

Author

  • Kiri Egington
  • July 13, 2020

Made with


  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js)

About the code

ARIA Accessible Accordion

A simple accordion that can be used by both mouse and keyboard-only users.

Author

  • Katherine Kato
  • July 12, 2020

Made with

  • HTML / CSS / JavaScript

About the code

FAQ Accordion

Minimal FAQ accordion made with little vanilla JavaScript.

Author

  • onepage
  • June 25, 2020

Made with

  • HTML
  • CSS/SCSS (Animate.css)
  • JavaScript (jQuery.js)

About the code

Basic Accordion

Basic accordion in HTML, CSS and JS.

Demo Image: Simple Accordion Concept

Simple Accordion Concept

HTML, CSS and JavaScript simple accordion concept.
Made by Kyle Brumm
March 24, 2020

Demo Image: Funky Pure CSS Accordion

Funky Pure CSS Accordion

Another pure CSS UI Piece here using radio buttons for the active states.
Made by Jamie Coulter
March 19, 2020

Demo Image: CSS Accordion

CSS Accordion

A simple solution for creating a pure CSS accordion with a CSS transition on the panel height, achieved by setting “max-height” of the accordion panel instead of “height”.
Made by Matthew Scott
October 28, 2020

Demo Image: 3D Accordion

3D Accordion

Simple accordion with 3D folding paper effect in HTML, CSS and JavaScript.
Made by Pawe Targoski
June 13, 2020

Адаптивный анимированный аккордеон HTML, CSS, JS

• 28-08-2020 •

Lorem ipsum dolor sit amet, consectetur Testadipiscing […]&p%5Burl%5D=https://smart >

Что если вам надо сделать аккордион, не используя при этом стороние библиотеки? Нашел на просторах интернета очень классный вариант анимированного аккордиона на чистом JS

Илон Маск рекомендует:  Что такое код swf_definerect

Анимированный аккордеон

Вот такой вот получился аккордион! Надеюсь он вам пришелся по душе! Оставляйте свои комментарии, а так же можете почитать, как сделать красивый выпадающий список без JS

Бесплатные «аккордеон»-меню с помощью HTML5 и CSS3

21 сентября 2013 | Опубликовано в Веб-дизайн | 1 Комментарий »

HTML — популярный язык, используемый для строительства веб-страниц и другой информации, которая может быть показана в web-браузере. HTML 5 является последним достижением. С другой стороны, CSS — язык, который используется для того, чтобы описать семантику представления на веб-сайтах, это язык разметки стилей; HTML и XML были наиболее используемыми языками. CSS разъединяет содержание самого документа и его представления, включая элементы расположения, цвета и шрифтов. CSS также, как и HTML, появился с различными версиями, и CSS3 является текущей. «Аккордеон»-меню на HTML 5 и CSS 3 используется, чтобы построить дизайн веб-сайтов с хорошей разметкой, комбинацией цвета и идеальной типографией. Аккордеон — многоуровневое меню с фиксированной высотой и шириной. Оно может быть использовано для создания отсека подпунктов главного меню. Вашему вниманию представляются бесплатные «аккордеон»-меню на HTML5 и CSS3, которые могут быть использованы для веб-дизайна и разработки сайтов.

Как сделать — аккордеон (разборный контент)

Узнайте, как создать аккордеон (разборный контент).

Аккордеон

Аккордеоны полезны, когда нужно переключаться между скрытием и отображением большого количества содержимого:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Как создать вертикальный аккордеон для сайта

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).

Процесс создания аккордеона

Процесс разработки вертикального аккордеона будет состоять из:

  • создания HTML разметки;
  • описания его внешнего вида с помощью CSS;
  • написания логики на JavaScript.

Дизайн аккордеона (скриншот):

HTML код аккордеона и его описание

Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).

Состояние элемента (accordion-item) в аккордеоне определяется с помощью класса show . Если данный класс присутствует, то содержимое элемента (accordion-item-content) показывается. В противном случае оно скрыто.

Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).

CSS код аккордеона

Данный код выполняет стилизацию элементов аккордеона, добавляет к ним необходимые внутренние отступы, цвет текста, цвет фона и др. Но, кроме этого, он ещё определяет видимость элементов аккордеона с классом accordion-item-content , т.е. содержимого .

По умолчанию элементы, имеющие класс accordion-item-content не отображаются (CSS свойство display равно значению none ). Включение отображения определённого элемента (accordion-item-content) осуществляется посредством класса show , который необходимо добавить к его родительскому элементу (accordion-item).

JavaScript код аккордеона

Сценарий (логика) аккордеона:

Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).

Инициализация элемента как аккордеон выполняется следующим образом:

Аккордеон, заголовки которого отделены друг от друга

Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:

CSS, добавляющий к элементам аккордеона отступы снизу ( margin-bottom ):

Аккордеон с анимацией появления

Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:

Стили аккордеона, включающие в себя анимацию (для отображения содержимого):

Вертикальное меню аккордеон

Пример настройки аккордеона в качестве вертикального меню.

Дополнительно в JavaScript сценарий добавим небольшой фрагмент кода, который будет показывать сколько подпунктов имеет каждый пункт в этом меню.

CSS и JavaScript:

Многоуровневое вертикальное меню аккордеон

Пример в котором рассмотрим как создать многоуровневое вертикальное меню аккордеон.

HTML, CSS и JavaScript код многоуровневого меню:

PROG-TIME

Как сделать аккордеон меню на чистом CSS.

Очередной аккордеон! Сегодня мы с вами рассмотри как сделать аккордеон-меню для сайта. Рассмотрим реализацию вертикального меню для боковой панели в виде аккордеона. Код представленный в записи используется для демонстрации, поэтому стили у него простые.

  • Пункт меню 1(с подпунктами)
    • Подпункт меню 1(с подпунктами)
      • Подпункт меню 2
      • Подпункт меню 3
      • Подпункт меню 4
    • Подпункт меню 2
    • Подпункт меню 3
  • Image
  • Image

И так давайте разберём html код многоуровневое аккордеон-меню. Элемент с классом – prog_time_menu это основной контейнер, в котором находится все компоненты. Внутри элемента с классом submenu находятся подпункты и другие под меню.

Вы можете создавать любое количество подпунктов и под меню, главное соблюдать данную конструкцию.

Добавочка

Теперь давайте рассмотрим как реализовать открытие меню при наведение на его пункты. Здесь тоже все очень просто…мы заменяем checked на hover и добавляем одно условие .prog_time_menu .submenu ul:hover , для того чтобы наше меню не закрывалось когда мы убираем курсор с подпункта на его “внутренние части“.

Создание вертикального меню аккордеон на jQuery

Дата публикации: 2012-08-20

От автора: в этом уроке мы познакомимся с одним из виджетов библиотеки jQuery UI под названием Accordion (Аккордеон). Чаще всего данный виджет используется для размещения в нем некой блочной связанной информации, что-то сродни с табами. Гораздо реже можно найти использование виджета в качестве меню.

Мы с Вами попытаемся создать функциональное, вертикальное меню аккордеон с помощью одноименного виджета jQuery, которое отлично будет смотреться на сайте.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Использование виджета аккордеон в качестве меню особенно подходит для интернет-магазинов, где в меню категорий практически всегда имеются дочерние категории товаров. Именно поэтому для наших целей мы возьмем готовое меню одного из проектов — интернет-магазин по продаже мобильных телефонов.

Прежде всего определимся с версткой и стилями. Такой будет разметка меню:

Такими будут стили меню:

В итоге мы получим приблизительно следующую картину:

Дочерние категории не скрыты и меню выглядит чересчур громоздко. Вот в этом и заключается идея использования виджета — подпункты должны быть изначально скрыты и открываться должны только при клике на родительской категории. Это первая из задач урока.

Для ее решения подключим виджет. С библиотекой jQuery UI мы уже работали с Вами в ряде предыдущих уроков, а потому далее лишь несколько слов без детальных пояснений. На сайте виджета идем в меню Download, выбираем для скачивания только необходимый нам виджет Accordion, при необходимости выбираем из списка тему оформления виджета или конструируем собственную тему (поскольку оформление меню у нас есть, то я выберу пункт No Theme). После этого жмем кнопку Download и получаем в архиве запрошенное.

В полученном архиве из папки js скопируем 2 файла со скриптами в каталог нашего проекта (у нас это также каталог js). Подключим эти скрипты к документу:

Илон Маск рекомендует:  Что такое код matherr

Итак, мы подключили библиотеку jQuery и скрипт виджета. Теперь заставим работать все это. В документации к виджету Вы можете найти описание необходимой разметки, она должна быть следующей: родительские пункты должны быть по умолчанию заголовками H3, дочерние пункты должны быть размещены в блоке и все это вместе также должно быть заключено в блок.

В нашем случае текущая разметка меню также подойдет, у нас: родительские пункты являются заголовками H3, дочерние пункты помещены в список ul, который является блочным элементом, и все меню заключено также в список ul с идентификатором accordion.

Для подключения аккордеона достаточно обратиться к необходимому элементу (у нас это >

В итоге мы получим следующее:

Теперь все подпункты скрыты и меню стало компактным. Уже лучше. По клику на родительскую категорию дочерний блок красиво выезжает. По клику на любой другой пункт меню, кроме дочернего, раскрытый дочерний блок также красиво скрывается.

Но здесь есть несколько нюансов, которые необходимо учесть, чтобы получить действительно качественное меню:

При клике на раскрытую родительскую категорию дочерний блок не сворачивается… а хотелось бы.

При обновлении страницы не запоминается состояние меню, т.е. если мы имели открытый блок, к примеру, LG, то при обновлении страницы (при переходе на новую страницу) он вновь будет скрыт… это совсем нехорошо.

Итак, давайте их исправлять. Для этого обратимся к документации виджета и воспользуемся двумя свойствами метода accordion — active и collapsible. Второе свойство решит как раз первую проблему, заставив сворачиваться дочерний блок при клике по родителю. Ну а первое свойство отвечает за то, какой блок будет открыт при инициализации аккордеона:

Итак, указав значение свойства collapsible TRUE, мы решили первую проблему. Теперь ко второй. Здесь значением свойства active мы указали 2. Это значение является индексом элемента меню, который необходимо сделать активным (раскрыть). Нумерация начинается с нулевого индекса, и участвуют в ней все недочерние элементы меню. В нашем случае Alcatel имеет индекс 0, Ericsson — 1, LG — 2 и т.д. Таким образом, при инициализации открывается пункт меню LG.

Уже неплохо, но опять же, нет запоминания состояния меню. Если теперь мы раскроем другой пункт меню, то при обновлении опять будет открыт пункт меню LG. Логично, что нам необходимо реализовать следующий алгоритм для решения вопроса:

По клику на родительский (имеющий дочерние) пункт меню мы должны получить и запомнить его индекс.

При инициализации необходимо проверить есть ли значение запомненного нами ранее индекса и, если есть, то сделать такой пункт меню активным, т.е. записать этот индекс значением свойства active.

Как записать индекс значением свойства active, мы уже знаем. Как получить индекс, мы можем найти в документации. Логично, что основная проблема заключается в том, чтобы запомнить этот индекс и не потерять его при обновлении страницы.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Здесь нам помогут куки. Для решения задачи воспользуемся плагином jquery.cookie, который Вы можете найти в сети или в дополнительных материалах к уроку. Подключаем плагин:

Использование плагина в работе крайне просто. Фактически оно включает в себя всего 3 возможных действия:

Итак, давайте создадим куку с именем, к примеру, openItem, и запишем ее значением индекс родительского пункта меню при клике по нему:

Как видите, ничего сложного. Первым параметром метода cookie является имя создаваемой куки, вторым — ее значение. Итак, мы создали куку openItem при клике на родительский пункт меню. В браузерах Chrome или Opera Вы легко можете наблюдать это, кликая по родительским пунктам меню и обновляя страницу. Замечание! В браузере Chrome скрипт будет работать только на сервере.

Кука у нас есть, но пока что она не используется нами… исправим это:

Мы проверяем перед инициализацией меню есть ли что-то в куке openItem. Если условие выполняется, то значение куки мы получаем в одноименную переменную, при этом обязательно приводя значение к числовому типу (по умолчанию тип строковый). Дело в том, что значение опции active обязательно должно быть числового типа.

Отлично! Теперь состояние меню запоминается. При обновлении страницы открытый пункт меню остается открытым. Но если теперь кликнуть по пункту без дочерних элементов — открытый пункт свернется, так и должно быть… но при обновлении он опять разворачивается. Это потому, что кука есть и никуда не пропадает. Исправим сей нюанс, удаляя куку по клику на самостоятельный пункт меню:

Вот теперь все отлично и работает практически так, как нам и хотелось… почему практически? Сейчас в меню первым пунктом идет самостоятельный пункт. Давайте сделаем первым пунктом родительский пункт, например LG.

И что мы видим? После обновления страницы пункт LG стал активным. Это при том, что значением куки мы видим false:

Как же так? Если в условие приходит false, то оно не должно выполняться. На самом деле это не булево FALSE, а строка. Поэтому, чтобы все работало, немного допишем условие и заодно создадим изначально переменную openItem с каким-либо значением, отличным от натурального числа и нуля:

Теперь осталось решить несколько последних нюансов. Попробуйте сейчас кликнуть по дочернему элементу. После клика по нему кука удаляется, соответственно, состояние меню не запоминается. Происходит так потому, что дочерние элементы являются также элементами списка, как и самостоятельные пункты меню. Давайте немного изменим отбор элементов, для которых будем отслеживать событие клика. Выберем только прямых потомков блока с идентификатором accordion:

Вот теперь кука удаляется только при клике по самостоятельным пунктам меню.
Следующим своеобразным багом, который необходимо исправить, является то, что при клике по самостоятельному пункту меню не происходит переход по его ссылке. Это потому, что скрипт виджета блокирует дефолтное поведение ссылки.

Решить эту проблему можно следующим образом – получим ссылку элемента, по которому был клик, и воспользуемся объектом window.location для перехода по этой ссылке:

И, наконец, добавим еще пару опций в метод accordion():

Опция header позволяет явно указать на элемент, который будет заголовком секций. Эту опцию мы указали для решения возможных проблем с IE, в 7-ой версии которого я наблюдал проблемы с аккордеоном. После указания этой опции, проблемы решились.

Вторая опция – autoHeigth со значением false – позволяет решить проблему с высотой открывающихся блоков. По умолчанию значение этой опции выставлено в true, что задает одинаковую высоту для всех скрытых блоков. Значение высоты берется из расчета максимальной высоты блока, т.е. если у одного блока, к примеру, будет 5 пунктов и высота 100 пикселей, то второй блок со всего 1 пунктом будет также иметь высоту 100 пикселей. Появится пустое место у второго блока, что не очень хорошо.

Вот теперь действительно все. Наше вертикальное меню аккордеон, работает так, как и было задумано. В итоге мы получили меню, которое идеально подойдет для категорий интернет-магазина или просто для сайта, где есть разделы с подкатегориями. При этом наше меню еще и «умеет» запоминать свое состояние.

На этом урок закончен. Удачи Вам и до новых встреч!

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL