Вертикальный аккордеон с jquery

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

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

Но в данной статье мы сделаем свое меню и поймем как оно устроено.

Для начало делаем стандартный древовидный двухуровневый список, см. ниже в коде HTML. Это и будет основой нашего меню.

Затем оборачиваем наше меню в стили, не забывая про 2 состояния .slide и .active, которые показывают, что меню раскрыто или активно в данный момент. Список меню второго уровня сразу скрываем, используя display: none, а для активного состояния display: block, все стандартно.

Далее идет скрипт, который мы активируем при нажатии на ссылку в первом уровне меню. Если подменю данного пункта не видно, тогда закрываем все другие меню

и скрываем/раскрываем выбранное подменю:

Вот и все, что нам нужно для неплохого меню в виде аккордеона на jQuery.

• Audi
  • A3
  • A4
  • A5
  • A6
  • Q3
  • Q5
  • Q7
• BMW
  • 1 Series
  • 3 Series
  • 5 Series
  • X1
  • X3
  • X5
• Mercedes-Benz
  • A
  • C
  • E
  • S
  • GLA
  • GLC
  • GLE
• Volkswagen
  • Polo
  • Golf
  • Jetta
  • Passat
  • Tiguan
  • Toureg

Нам будет приятно

Еще интересное в блоге

Определение координат курсора мыши

Фон для сайта из анимированных пузырей с bubbly-bg.js

Будем рады работать именно с вами

Политика конфиденциальности персональных данных

1. Общие положения.
   1. Настоящая Политика конфиденциальности персональных данных (далее — Политика) действует в отношении всех персональных данных, которую компания Keengo (далее – Компания), может получить от пользователя (лица, заполнившего форму обратной связи, использующего другие сервисы официального сайта keengo.ru (далее – Сайт)), в частности в ходе: отправки отзывов или вопросов, заказа услуг, участия в рекламных и/или маркетинговых кампаниях или акциях и/или ином взаимодействии (далее – Услуги).
   2. Заполняя форму обратной связи и нажимая кнопку «Согласен/на», расположенную на странице Сайта, на которой размещена форма обратной связи, а равно указывая свои персональные данные при использовании других сервисов Сайта, пользователь выражает согласие с настоящей Политикой и указанными в ней условиями обработки и передачи его персональных данных. Согласие Пользователя на предоставление, обработку и передачу его Персональных данных Компании в соответствии с Политикой является полным и безусловным.
   3. Посетителям Сайта следует воздержаться от заполнения формы и/или от использования других сервисов Сайта в случае несогласия (полного или частичного) с Политикой, а равно несогласия предоставить персональные данные.
   4. Согласие, даваемое пользователем, включает в себя согласие на сбор, систематизацию, накопление, хранение, уточнение (обновление, изменение), использование, занесение в базы данных (в том числе электронные) Компании, передачу внутри Компании другим отделам и подразделениям или поставщику услуг, обязующегося выполнять условия договора о защите персональных данных, в целях рассылки информационных материалов и/или в рекламных целях (в том числе рассылку приглашений на мероприятия, проводимые/организованные Компанией), трансграничную передачу, блокирование, обезличивание, уничтожение персональных данных.
   5. Согласие, даваемое пользователем, распространяется на следующие персональные данные: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон.
   6. Срок действия согласия пользователя является неограниченным, однако, пользователь вправе в любой момент отозвать настоящее согласие путём направления письменного уведомления на адрес электронной почты: info@keengo.ru, с пометкой «отзыв согласия на обработку персональных данных».
2. Персональные данные пользователей, которые получает и обрабатывает Компания.
   1. В рамках настоящей Политики под персональными данными пользователя понимаются персональные данные, которые пользователь предоставляет о себе самостоятельно при заполнении формы обратной связи на Сайте, при использовании других сервисов Сайта, при регистрации (создании учётной записи) на Сайте или в процессе использования услуг, предоставляемых Компанией. Соответствующая информация явно обозначена, к ней, в частности отнесены: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон. Иная информация предоставляется пользователем на его усмотрение.
   2. Компания исходит из того, что пользователь представляет достоверные персональные данные, а также, что пользователь имеет право предоставить персональные данные.
3. 1С Битрикс.
   1. Компания использует средство 1С Битрикс для сбора сведений об использовании Сайта, таких как частота посещения Сайта пользователями, посещенные страницы и сайта, на которых были пользователи до перехода на данный Сайт. 1С Битрикс собирает только IP-адреса, назначенные пользователю в день посещения данного Сайта, но не имя или другие идентификационные сведения.
   2. 1С Битрикс размещает постоянный cookie-файл в веб-браузере пользователя для идентификации в качестве уникального пользователя при следующем посещении данного Сайта. Этот cookie-файл не может использоваться никем, кроме 1С Битрикс. Сведения, собранные с помощью cookie-файла, будут храниться на серверах, находящихся в Российской Федерации.
   3. Компания использует сведения, полученные через 1С Битрикс, только для обработки и хранения персональных данных.
4. Цели обработки персональной информации пользователей.
   1. Компания обрабатывает только те персональные данные, которые необходимы для оказания услуг.
   2. Персональную информацию пользователя Компании может использовать в следующих целях:
      1. Идентификация стороны в рамках оказания услуги.
      2. Рассылка рекламных и/или маркетинговых материалов Компании, рассылка приглашений на мероприятия, конференции, выставки, проводимые и/или организуемые Компанией, проведение телемаркетинговых компаний.
      3. Проведение статистических и иных исследований, на основе обезличенных данных.
5. Передача персональных данных пользователя третьим лицам.
   1. В отношении персональных данных пользователя сохраняется ее конфиденциальность, кроме случаев обработки персональных данных, доступ неограниченного круга лиц к которым предоставлен пользователем либо по его просьбе.
   2. Компания вправе передать персональную информацию пользователя третьим лицам в следующих случаях:
      1. Пользователь предоставил свое согласие на такие действия.
      2. Передача персональных данных организациям, которые оказывают услуги Компании по рассылке рекламных и/или маркетинговых материалов, организации и проведению мероприятий, конференций, выставок, телемаркетингу, обзвону потенциальных клиентов Компании.
      3. Передача необходима для достижения целей, осуществления и выполнения функций, полномочий и обязанностей, возложенных законодательством Российской Федерации на Компанию.
6. Меры, применяемые для защиты персональных данных пользователей.
   1. Компания принимает необходимые и достаточные организационные и технические меры для защиты персональных данных пользователя от неправомерного или случайного доступа, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий с персональными данными третьих лиц.
7. Права и обязанности пользователя.
   1. Компания предпринимает разумные меры для поддержания точности и актуальности, имеющихся у Компании персональных данных, а также удаления устаревших и других недостоверных или излишних персональных данных, тем не менее, Пользователь несет ответственность за предоставление достоверных сведений, а также за обновление предоставленных данных в случае каких-либо изменений.
   2. Пользователь может в любой момент изменить (обновить, дополнить, блокировать, уничтожить) предоставленную им персональную информацию или её часть, а также параметры её конфиденциальности путем обращения в Компанию.
   3. Пользователь вправе в любой момент отозвать согласие на обработку Компанией персональных данных путём направления письменного уведомления на электронный адрес: info@keengo.ru с пометкой «отзыв согласия на обработку персональных данных», при этом отзыв пользователем согласия на обработку персональных данных влечёт за собой удаление учётной записи пользователя с Сайта и баз данных Компании, а также уничтожение записей, содержащих персональные данные, в системах обработки персональных данных Компании.
   4. Пользователь имеет право на получение информации, касающейся обработки его персональных данных Компанией.

• 
• 

Keengo · Web Design & Development
© 2010–2021 Все права защищены

Источник

w3.org.ua

уроки front-end и back-end

Рубрики

jQuery. Пишем аккордеон с применением эффектов

Итак, мы будем писать простой аккордеон на jQuery. Для этого я сделаю небольшой экскурс в теорию.

Небольшое введение в эффекты

Самые простые эффекты в jQuery это hide() — show() и slideUp() и slideDown() .

Итак, hide(time) – скрывает элемент, к которому применяется за время, указанное в качестве параметра (время указывается в миллисекундах). Как работает эффект? За указанное время начинает уменьшаться высота и ширина элемента, значения padding и margin . Когда данные значения уменьшаются до нуля – к элементу применяется свойство display: none .

Эффект show() – работает аналогично, только в обратную сторону. Также, существует эффект анимации toggle() – который либо скрывает, либо показывает элемент с учетом его текущего состояния. Смотрим пример:

Эффекты slideUp() и slideDown() работают аналогично, только изменяется высота элемента. После того, как высота становится равна нулю – применяется свойство display: none .

Время эффектов указывается в миллисекундах. Так 3000 – это три секунды.

Также существует эффект slideToggle() , который переключает состояние элемента.

Смотрим примеры и код:

Строим аккордеон

Теперь строим аккордеон. Пусть у нас будет общий блок #accordeon внутри которого и будет размещаться наш код. Внутри данный блок будет содержать блок с заголовком ( .acc-head ) и блок с текстом( .acc-body ), который в начальном состоянии скрыт.

Источник

Адаптивный вертикальный аккордеон

В данном уроке мы создадим простой адаптивный аккордеон, который будет открывать разделы вниз по вертикали с плавным появлением содержания в них. Идея заключается в том, чтобы скомпоновать содержание с минимальной необходимостью для вертикальной прокрутки. Также мы будем использовать трансформации CSS3 для формирования стрелки рядом с разделом, которая будет появляться при наведении курсора мыши на название раздела и переворачиваться при открытии/закрытии. Аккордеон будет изменять размер вместе с окном браузера.

Разметка HTML

Структура HTML состоит из контейнера с идентификатором и классом st-accordion, в котором располагается неупорядоченный список. Пункты списка имеют ссылки, работающие как название пункта, и область содержания, которая изначально скрыта. Элемент span с классом st-arrow будет работать как индикатор с правой стороны от названия раздела. Он будет появляться при наведении курсора мыши на родительский элемент, то есть на ссылку.

Зададим стили для контейнера. Установим для него ширину 100%, чтобы она изменялась при изменении внешнего элемента. Вы можете использовать здесь то значение, которое нужно. Внешний элемент в демонстрации имеет ширину 90% при ограниченном максимуме 800 px. Элемент st-accordion будет иметь минимальную ширину 270 px:

Предположим, что мы используем сброс CSS, который удаляет отступы и поля у неупорядоченного списка. И в таких условиях определим стили для каждого элемента списка. Установим начальную высоту равную 100 px и скроем все что выходит за границу элемента. Таким образом мы не будем видеть содержание пункта. Когда пункт открывается, изменение высоты будет анимироваться для вывода содержания. Для разделения пунктов используется верхняя и нижняя части рамки.

У первого пункта не должно быть верхней разделительной линии.

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

Элемент span для стрелки позиционируется абсолютно и скрывается за счет установки вне элемента ссылки и полной прозрачности. Трансформация передвинет стрелку в область видимости и плавно проявит её:

Когда открывается пункт, мы устанавливаем ему класс st-open, а элемент ссылки будет иметь такой же цвет, как и при наведении курсора мыши. Элемент span будет повернут, чтобы стрелка указывала вверх:

Стили для элементов содержания:

С помощью медиа запроса мы изменяем размер шрифта на более мелкий при уменьшении ширины экрана:

JavaScript

Рассмотрим важные части плагина. Начнем с определения опций и их значений по умолчанию:

Плагин инициализируется вызовом функции _init:

Функция _saveDimValues сохраняет оригинальные значения высоты и координаты пункта, так что мы знаем куда нужно прокручивать содержание, когда пункт открывается.

Если есть пункт, который должен быть открыт по умолчанию, то вызываем функцию _toggleItem. А затем инициализируем события.

Функция _toggleItem обрабатывает два варианта при нажатии кнопки мыши на пункте. Либо пункт уже открыт, то есть имеет класс st-open, либо он закрыт. Если он открыт, присваиваем переменной current значение -1 и скрываем содержание, изменяя высоту пункта до оригинального значения. Если пункт закрыт, то мы присваиваем переменной currrent индекс пункта, анимируем изменение высоты и прозрачности содержания для вывода на экран. Затем мы прокручиваем окно вниз с помощью функции _scroll, чтобы открытый пункт оказался вверху:

Функция _initEvents инициализирует два события — нажатие кнопки мыши на пункте и изменение размеров окна.

При нажатии кнопки мыши на пункте, он открывается или закрывается с помощью функции _toggleItem. Если опция oneOpenedItem имеет значение true , то сначала закрывается другой открытый пункт.

Когда окно изменяет размеры, нужно сбросить оригинальные значения положения пункта и высоты его содержания. Также нужно прокрутить окно, чтобы пункт находился вверху.

Выше описаны самые важные функции кода. Полностью текст JavaScript плагина вы можете посмотреть в исходниках.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
Перевел: Сергей Фастунов
Урок создан: 18 Октября 2011
Просмотров: 66589
Правила перепечатки

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

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Источник