JavaScript плагин адаптивных вкладок с липким меню

веб разработка, javascript, plugins, ui-elements

Responsive Sticky Menu Tabs Plugin – вкладки с плавающим (липким) меню в левой колонке (сайдбаре). Такой блок интерфейса позволит разместить большие объемы текста и изображений, разделив их по темам, и иметь навигационное меню по вкладкам постоянно на виду при скролле страницы.

Ниже на этой странице смотрите демо 2-х блоков с такими вкладками.

Описание плагина

Sticky Menu Tabs имеют определенную Html разметку, которую нужно вставить в код страницы. Каждому блоку потребуется присвоить уникальный класс для активации плагина.

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

В Sticky Menu Tabs плагине реализованы:

• адаптивность: при экранах шириной меньше 600 пикселей контентная часть расширяется на всю ширину, меню сайдбара скрывается, и добавляется кнопка Меню, при клике на которую можно развернуть и свернуть все пункты меню;
• разворачивание вкладок: есть возможность раскрыть все вкладки на малых экранах и выстроить их колонкой;
• ресайз вкладок: при ресайзе экрана внешний вид вкладок принимает адекватный предопределенный дизайн;
• проверка загрузки изображений: для точного определения высоты контейнера для плавающего блока (меню в сайдбаре) с целью правильной работы технологии sticky позиционирования осуществляется проверка загрузки документа и всех изображений первой вкладки перед активацией плагина;
• прокрутка страницы к верху блока с вкладками: после клика на любой из пунктов меню осуществляется плавная прокрутка к верху целевой вкладки для ее обозрения. Благодаря такому механизму и фиксированному меню слева на экране не надо прокручивать страницу вверх, чтобы переключиться на другие вкладки.

HTML

<div class="sticky-tabs my-stickytabs">
  <div class="floating sticky-tabs__aside">
    <ul class="tabs">
      <li class="tab">Tab 1</li>
      <li class="tab">Tab 2</li>
      <li class="tab">Tab 3</li>
    </ul>
  </div>
  <div class="tab-content sticky-tabs__article">
    <div class="tab-item">
      <h3>Tab 1 Content</h3>
      <p>Some text and images.</p>
    </div>
    <div class="tab-item">
      <h3>Tab 2 Content</h3>
      <p>Some text and images.</p>
    </div>
    <div class="tab-item">
      <h3>Tab 3 Content</h3>
      <p>Some text and images.</p>
    </div>
  </div>
</div>
        

JavaScript код Sticky Menu Tabs плагина

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

Создание экземпляров

var firstStickyTabsNode = document.querySelector('.first-stickytabs'),
    secondStickyTabsNode = document.querySelector('.second-stickytabs');

firstStickyTabsNode.stabs = new StickyMenuTabs({
  tabsNode: firstStickyTabsNode,
  menuName: 'Страницы сайта'
});

secondStickyTabsNode.stabs = new StickyMenuTabs({
  tabsNode: secondStickyTabsNode,
  menuName: 'Список услуг',
  mobileTabsOpen: true
});
      

CSS

В стилях определены: 2-х колоночная структура, отступы, бордеры в меню, sticky позиционирование для блока меню, внешний вид кнопки Меню и самого меню для малых экранов. Заданы некоторые медиа стили.

Разработка лендинга Косметологические курсы Подобные вкладки с плавающим (липким) меню в левой колонке (сайдбаре) я реализовывал в этом проекте.

Responsive Sticky Menu Tabs Demo

• Базовый (для новичков)
• Без мед. образования
• С мед. образованием
• Семинары

Косметик – эстетист, базовый курс (новичок)

Ждем загрузки всех изображений 1-й вкладки и затем инициализируем вкладки StickyMenuTabs.

Категория слушателей: лица, имеющие среднее общее образование. Стартовый курс включает в себя все основные процедуры классической косметологии.

Программы для специалистов без медицинского образования

Для отработки предоставляются модели-волонтеры. Авторские семинары по отдельным методикам и препаратам (Radiesse, Profhilo, Neauvia).

• Ботулинотерапия, история возникновения методики.
• Происхождение и механизм действия ботулинического токсина.
• Мифы и реальность о ботулинотерапии.
• План приема пациента, особенности общения с пациентом, определение ожиданий, запросов и реальных показаний.
• Факторы, влияющие на эффективность процедуры.
• Показания и противопоказания к проведению процедуры.
• Нежелательные явления и возможные осложнения.
• Обзор и характеристики препаратов на рынке России.
• Методы разведения препарата: стандартный, концентрированный, мезотерапевтический. Понятие о диффузии и распределении препарата.
• Коррекция зоны межбровья, определение мышечной массы и динамики, разметка, дозы, возможные осложнения.
• Коррекция зоны лба, определение формы, размера, мышечной динамики m. Frontalis. Расстановка точек введения в зависимости от типа паттерна, дозы. Как поднять брови и избежать птоза. Запретные зоны.
• Коррекция параорбитальных морщин, и морщин носа, точки введения, дозы.
• Техника мезоботокс, правильные локации для применения методики.
• Отработка практических навыков.

Программы для специалистов с медицинским образованием

Авторские семинары по отдельным методикам и препаратам (Radiesse, Profhilo, Neauvia). Стартовый курс включает в себя все основные процедуры классической косметологии.

• Контурная пластика. Исторические предпосылки.
• Возможности КП и основные показания к применению. Противопоказания.
• Анатомия лица. SMAS система. Сосудистые магистрали и нервные сплетения лица.
• Опасные зоны и возможные осложнения. Методы коррекции.
• Разбор морфологических типов лица и принципы их коррекции.
• Осмотр пациента, сбор анамнеза и определение возможностей коррекции.
• Филлеры, требования к ним. Классификация.
• Биодеградируемые филлеры, преимущества и недостатки: коллаген, полимолочная кислота, поликапролактон, гидроксиапатит кальция.
• Филлеры на основе гиалуроновой кислоты: способы стабилизации, виды плотности препаратов, физико-химические свойства.
• Техники введения, игла или канюля, рекомендации после процедуры.
• Коррекция отдельных зон: лоб, виски, брови, межбровье, скулы, параорбитальная и параоральная зоны, носо-губная складка, морщины марионетки, ментальная борозда, подбородок, углы нижней челюсти, мочка уха, кисти рук.
• Коррекция губ, различные методики. Понятие о «сложных» губах.
• Отработка практических навыков: тело, лицо, шея и декольте.

Авторские семинары

Авторские семинары по отдельным методикам и препаратам (Radiesse, Profhilo, Neauvia). Необходимо наличие халата и сменной обуви.

• Мезотерапия, определение. История возникновения методики.
• Золотое правило мезотерапии.
• Физиологические и биологические факторы воздействия метода.
• Обзор аппаратов для мезотерапии.
• Обзор препаратов, используемых в мезотерапии, коктейли.
• Методы инъецирования, классификация.
• Показания и противопоказания к проведению процедуры.
• Нежелательные явления и возможные осложнения.
• Помощь при развитии осложнений и неотложных состояний.
• Эстетическая диагностика пациента, выбор назначения, как составляющая успешной процедуры.
• План приема пациента, о чем говорить и о чем молчать!
• Протокол проведения процедуры, документы.
• Виды мезотерапии при различных патологиях и состояниях.
• Понятие о липолитиках, коррекция ЛЖО и терапия целюлита.
• Отработка практических навыков: тело, лицо, шея и декольте.

One more list

1. Введение в косметологию. Санитарные нормы, гигиена, понятия асептики и антисептики.
2. Оборудование косметологического кабинета, инструментарий. Основные требования к внешнему виду косметолога.
3. Правовые нормативы в профессии «Косметика – эстетиста».
4. Правила оказания первой медицинской помощи в кабинете косметолога.
5. Психология общения с клиентом, разрешение конфликтных ситуаций. Профессиональный этикет.
6. Дерматология: анатомия, физиология кожи. Диагностика состояния и определение типа кожи. Составление диагностической карты. Показания и противопоказания к проведению косметических процедур.
7. Основные принципы подбора косметических средств по типу кожи.
8. Понятие геронтологии, определение фототипа и морфотипа лица. Шкала Фицпатрика. Шкала Глогау. Основные маркеры старения.
9. Классификация косметических препаратов. Формы и состав. Биологически активные компоненты косметических продуктов.
10. Классификация лекарственных растений и эфирных масел.
11. Основные этапы повседневного косметического ухода за кожей лица.
12. Профессиональные методики очищения, демакияж.
13. Виды глубокого щадящего очищения: пилинги, скрабы, гоммажи. Мануальная чистка лица.
14. Химические пилинги, азбука кислот. Механизм действия. Правила работы с поверхностными пилингами. Показания и противопоказания. Предпилинговая подготовка и постпилинговый уход. Обзор препаратов.
15. Аппаратные методики очищения: ультразвуковая, вакуумная чистка, дезинкрустация, брашинг, газожидкостный пилинг. Техника безопасности при работе с электроприборами.
16. Основные протоколы уходовых процедур для нормальной, сухой, жирной, комбинированной кожи.
17. Виды масок, приготовление, основные компоненты масок, подбор по типу кожи. Биологическое воздействие масок на кожу.
18. Комплексные программы по уходу за кожей с акне, куперозом, нарушениями пигментации, гиперкератозом.
19. Массажные техники (массаж по технике Ахабадзе, Лимфодренажный, пластический массаж по Жаке)
20. Макияж. Основные виды макияжа. Формы и пропорции черт лица и методы их коррекции макияжем.
21. Окраска бровей и ресниц.
22. Ламинирование и наращивание ресниц.
23. Депиляция горячим и теплым воском.
24. Шугаринг
25. Уход за телом, антицеллюлитные программы. Обертывания.
26. Итоговая аттестация. Самостоятельная работа с моделью (п\п).

Middle content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni deleniti pariatur similique corporis vel illo ab blanditiis quasi amet temporibus, placeat quas. In sunt expedita, facere quaerat quas consequatur reiciendis molestiae non accusamus, dolore ipsa error earum officia porro alias! Nesciunt consequatur reiciendis dignissimos ducimus perferendis ipsum neque provident mollitia aspernatur iure explicabo excepturi iusto, odit quis, animi suscipit beatae dolorum temporibus omnis incidunt aliquid. Tempore nobis numquam magnam consequatur reiciendis, suscipit nulla? Ab animi eos soluta blanditiis! Quam ipsam eum dolore, impedit ex, explicabo amet fugiat.

Eligendi nemo rem voluptatibus non libero eius eveniet, mollitia ducimus maiores reiciendis minus, nam vitae doloremque a explicabo facere animi odit fugit quasi debitis quidem. Tempore quae necessitatibus ipsam, dolor veniam doloribus voluptates deleniti laborum ipsum fugiat aliquid cumque alias non facilis vel accusantium vero recusandae quaerat distinctio corporis soluta. Incidunt earum eum veniam itaque ullam rem libero, doloremque sapiente adipisci, quam, assumenda repudiandae consequatur excepturi praesentium dolores ab doloribus quasi voluptatum et necessitatibus dolorum est suscipit temporibus. Omnis cupiditate, quae ducimus laboriosam ex? Suscipit accusamus quis cum ducimus ipsa deleniti, est tempore saepe harum exercitationem doloribus dolorem accusantium repudiandae, ipsam laudantium repellendus quasi earum eaque reprehenderit, voluptatibus consequuntur et doloremque reiciendis dolores.

Second Sticky Tabs

MobileTabsOpen: true – при экранах меньше 600 пикселей все вкладки раскрываются и выстраиваются в колонку.

Bottom content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni deleniti pariatur similique corporis vel illo ab blanditiis quasi amet temporibus, placeat quas. In sunt expedita, facere quaerat quas consequatur reiciendis molestiae non accusamus, dolore ipsa error earum officia porro alias! Nesciunt consequatur reiciendis dignissimos ducimus perferendis ipsum neque provident mollitia aspernatur iure explicabo excepturi iusto, odit quis, animi suscipit beatae dolorum temporibus omnis incidunt aliquid. Tempore nobis numquam magnam consequatur reiciendis, suscipit nulla? Ab animi eos soluta blanditiis! Quam ipsam eum dolore, impedit ex, explicabo amet fugiat. Eligendi nemo rem voluptatibus non libero eius eveniet, mollitia ducimus maiores reiciendis minus, nam vitae doloremque a explicabo facere animi odit fugit quasi debitis quidem. Tempore quae necessitatibus ipsam, dolor veniam doloribus voluptates deleniti laborum ipsum fugiat aliquid cumque alias non facilis vel accusantium vero recusandae quaerat distinctio corporis soluta. Incidunt earum eum veniam itaque ullam rem libero, doloremque sapiente adipisci, quam, assumenda repudiandae consequatur excepturi praesentium dolores ab doloribus quasi voluptatum et necessitatibus dolorum est suscipit temporibus. Omnis cupiditate, quae ducimus laboriosam ex? Suscipit accusamus quis cum ducimus ipsa deleniti, est tempore saepe harum exercitationem doloribus dolorem accusantium repudiandae, ipsam laudantium repellendus quasi earum eaque reprehenderit, voluptatibus consequuntur et doloremque reiciendis dolores.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni deleniti pariatur similique corporis vel illo ab blanditiis quasi amet temporibus, placeat quas. In sunt expedita, facere quaerat quas consequatur reiciendis molestiae non accusamus, dolore ipsa error earum officia porro alias! Nesciunt consequatur reiciendis dignissimos ducimus perferendis ipsum neque provident mollitia aspernatur iure explicabo excepturi iusto, odit quis, animi suscipit beatae dolorum temporibus omnis incidunt aliquid. Tempore nobis numquam magnam consequatur reiciendis, suscipit nulla? Ab animi eos soluta blanditiis! Quam ipsam eum dolore, impedit ex, explicabo amet fugiat. Eligendi nemo rem voluptatibus non libero eius eveniet, mollitia ducimus maiores reiciendis minus, nam vitae doloremque a explicabo facere animi odit fugit quasi debitis quidem. Tempore quae necessitatibus ipsam, dolor veniam doloribus voluptates deleniti laborum ipsum fugiat aliquid cumque alias non facilis vel accusantium vero recusandae quaerat distinctio corporis soluta. Incidunt earum eum veniam itaque ullam rem libero, doloremque sapiente adipisci, quam, assumenda repudiandae consequatur excepturi praesentium dolores ab doloribus quasi voluptatum et necessitatibus dolorum est suscipit temporibus. Omnis cupiditate, quae ducimus laboriosam ex? Suscipit accusamus quis cum ducimus ipsa deleniti, est tempore saepe harum exercitationem doloribus dolorem accusantium repudiandae, ipsam laudantium repellendus quasi earum eaque reprehenderit, voluptatibus consequuntur et doloremque reiciendis dolores.