Как сделать меню toggle
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Документация и примеры для мощного и отзывчивого навигационного заголовка Bootstrap и навигационной панели. Включает поддержку брендинга, навигации и прочего, включая поддержку нашего плагина для сворачивания.
Как это работает
Вот что вам надо знать перед использованием навбара:
В этом примере использованы классы цвета bg-light и спейсинга my-2 , my-lg-0 , mr-sm-0 , my-sm-0 .
Бренд
.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.
Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.
Навбар
Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link , как в примере ниже.
Формы
Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline .
Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.
Работают и формы ввода, также:
Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.
Текст
Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.
Цветовые схемы
Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color . Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-* .
Контейнеры
Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.
Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand <-sm|-md|-lg|-xl>. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.
Размещение
Также обратите внимание, что .sticky-top использует position: sticky , которая не поддерживается полностью в каждом браузере.
В своей предыдущей статье я рассказал, как адаптировать шаблон wordpress, где были адаптированы основные блоки шаблона. А теперь пришло время меню. Для создания адаптивного меню нужно приложить также немало усилий. Сделать элементы меню достаточно крупными и удобными для мобильных пользователей.
В чем сложность адаптации меню
Пожалуй, адаптировать меню в некоторых случаях сложнее чем адаптировать весь дизайн сайта.
И сложность не в том чтобы уменьшить размер меню или переместить его, для удобства мобильных пользователей. Всё это можно реализовать при помощи css стилей и это будет прекрасно работать на компьютере. Но, не на мобильных устройствах.
Вся сложность в том, что меню на мобильных устройствах должно быть компактным и в то же время удобным для пользователя. Как правило, меню, в зависимости от размера экрана мобильного устройства, адаптируется вместе с шаблоном. Меняется размер, положение, а для совсем маленьких экранов — делается в виде одной большой кнопки, по которой легко нажать пальцем. А пункты меню открывается в виде списка с крупными шрифтами, что удобно для мобильных пользователей.
Вот именно это открытие меню по щелчку вызывает некоторые трудности. Реализовать открытие меню при наведении курсора можно через css стиль hover – это хорошо работает на компьютере, но вы попробуйте сделать это на сенсорном экране. Так что такой вариант отпадает.
Также можно организовать открытие меню по щелчку с помощью хитрого css стиля (focus), но эффект не будет работать на некоторых браузерах мобильных устройств. Что тоже нехорошо.
И поэтому для решения этой задачи потребуется использовать небольшой скриптик. Который всего лишь будет подставлять нужный стиль в момент нажатия по кнопке.
2 простых решения для адаптации меню
Первый, и наиболее распространённый способ – это подстраивать меню (уменьшать размер и положение) до определённых точек излома, а на самых маленьких экранах преобразовывать в кнопку с выпадающим списком при нажатии.
Этот способ удобен, да и кнопку можно оформить под любой дизайн сайта. Можно также использовать псевдоэлементы before и after и сделать кнопку в виде иконки. Получится стильно и современно.
Этот способ подразумевает под собой построение меню с определёнными классами, присвоение стилей к этим классам и привязка небольшого скрипта. Звучит сложно, но на деле всё гораздо проще.
Второй способ – меню, реализованное при помощи тега селект (select). Вся реализация проходит в три действие. Достаточно добавить небольшой скрипт и меню само будет преобразовано в список. Вид самого списка меню вы можете оформить в соответствии с дизайном вашего сайта. А выбор самих пунктов меню будет осуществляться как в мобильных приложениях.
Такой подход удобен тем, что пункты меню достаточно крупные и мобильным пользователям удобно осуществлять свой выбор. Этот способ очень хорош, когда в меню достаточно много пунктов. Список пунктов будет занимать определённое место, а для просмотра всех пунктов меню появится вертикальная прокрутка. В первом же случае, такое удобство придётся делать самостоятельно через стили css.
Первый способ — адаптивное меню с помощью CSS и JS
Шаг 1. Анализ.
Первым делом нужно провести анализ и выяснить, как выводится меню на вашем сайте. В большинстве шаблонов WordPress, да и других системах CMS, — меню выводится с помощью php. В шаблоне фрагмент кода, отвечающий за вывод меню, будет выглядеть примерно так:
Ваша задача найти это фрагмент кода и обратить внимание на идентификаторы и классы. Через эти классы нужно будет настраивать адаптивный стиль меню.
Также для анализа и определения классов следует использовать панель разработчика в браузере.
Шаг 2. Определение точек излома.
Хотя вы можете делать это и в Chrome, вызвав панель разработчика и уменьшая окно браузера по горизонтали.
Ваша задача найти точки, при которых меню плохо просматривается, или исчезает с экрана, либо ломается.
На скриншоте выше показано, как определить такие точки.
Шаг 3. Решить, как будет адаптироваться ваше меню.
Это очень важный шаг. Нужно продумать механизм адаптации. На примере шаблона, который я адаптировал в прошлой статье, видно, что меню расположено в сайтбаре. В этом шаблоне изначально можно выводить меню только так. До определённой точки 480рх, меню будет ужиматься, и адаптироваться вместе с сайтбаром. А после срабатывания медиазапроса, сместится вниз под блок с контентом, вместе с сайтбаром. И выровняется во всю ширину.
Таким образом, мобильный пользователь может и не увидеть меню сайта.
В этом случае целесообразно меню в сайтбаре скрыть, а под заголовком вывести кнопку с вертикальным меню, которое будет открываться при нажатии.
Другой вариант, когда меню расположено горизонтально в шапке или под ней. В таком случае меню до определённой точки может перестраиваться, уменьшаться. А для смартфонов заменяться кнопкой или списком.
В общем, ваша задача продумать, как более удобно преподать меню сайта для пользователей. От этого и будет зависеть адаптация меню. В некоторых случая может потребоваться даже перестроить всё адаптивное меню.
Шаг 4. Создание мобильного меню.
В этом примере, я хочу показать вам, как меню из сайтбара будет скрыто от глаз посетителя, а на видимом месте появится меню, созданное для мобильных устройств.
Меню создано с помощью html, что уменьшает нагрузку на сервер, нет обращений к базе данных.
Но, в таком виде, меню без стилей будет выглядеть убого.
Поэтому дальше нужно подключить медиазапрос и присвоить стили для меню. Ну а чтобы меню не было видно до выполнения медиазапроса, — следует в таблицу стилей добавить вот такой стиль:
Этим стилем мы скрываем меню с глаз пользователей компьютеров, ноутбуков, планшетов, в общем всех. А для мобильных устройств мы покажем это меню, применив соответствующий стиль в медиазапросе.
Шаг 5. Подключение медиазапросов.
О том, какими способами можно подключать медиазапросы, и как лучше это сделать в конкретных случаях, вы можете прочитать здесь.
В данном случае, я буду подключать медиазапросы в основном файле стилей (style.css).
Как вы помните, точкой, при которой меню ломалось в шаблоне – была ширина 480px. Именно на эту точку и будет ориентирован медиазапрос. То есть, как только ширина экрана мобильного устройства будет меньше этой точки, вступят в действие стили, указанные в медиазапросе.
Итак, в конце файла style.css добавляем вот это код:
Шаг 6. Стили для мобильного меню.
Для того чтобы меню приобрело достойный вид, я применяю вот эти стили:
Как вы уже поняли, стили эти вставляем в медиазапрос. Разумеется, я применил эти стили к конкретному шаблону и к меню. Вы же можете взять их за основу и создать стили под дизайн вашего сайта.
Шаг 7. Подключение скрипта.
Всё уже почти готово, осталось подключить скрипт, который будет добавлять к классу .menu-toggle ещё и класс .toggled-on . Без него ваша кнопка не будет раскрывать меню при нажатии.
Для начала скачайте файл-скрипт. Он расположен на моём Яндекс.Диске – здесь.
После этого если вы используете меню как у меня, и не меняли классы и идентификаторы, то в файле редактировать ничего не надо. Если классы в меню меняли, то подправьте их и в скрипте.
Файл-скрипт нужно скопировать в папку js в вашей теме. Если такой папки там нет, — создайте её.
В этой строчке вам нужно изменить название темы default на название вашей темы. Название должно в точности совпадать с названием вашей темы.
Сохраняете и всё готово. Можно проверять.
На примере первого способа можно создать горизонтальное адаптивное меню. Тоже очень солидно смотрится и его можно установить на любой сайт.
Второй способ — адаптивное меню с помощью тега select и jquery
Здесь всё достаточно просто, в сравнении с предыдущим примером.
Шаг 1. Подключение библиотеки jquery.
Как правило, в вашем шаблоне уже подключена эта библиотека. Если же нет, то открываете файл header.php и перед закрытием тега вставляете вот этот код:
Шаг 2. Подключение скрипта обработчика.
Итак, данный скрипт нужно разместить в заголовок вашего шаблона. Или можете сохранить в отдельный файл и подключить, как в предыдущем примере.
Шаг 3. Стили для медиазапроса.
И в завершение нужно в медиазапрос добавить стили. Эти стили позволят скрыть меню в виде списка и показать обычное меню и наоборот.
Для медиазапроса на точке 760px я использую вот эти стили:
Таким образом, до следующего медиазапроса в 480рх – будет отображаться обычное меню, а после появится адаптированное.
Стилей для красоты я не добавлял, вы же сможете это сделать в соответствии с дизайном вашего сайта.
Повторная проверка сайта на удобство для мобильных пользователей, показала улучшение показателя на 2 пункта, с 94 до 96.
На этом адаптация меню закончена. Но, я предлагаю вам посмотреть видео урок, в нём я наглядно показываю шаг за шагом, как создаю эти два адаптированных меню.
Друзья, всем желаю успешной адаптации ваших меню. Если будут вопросы, всегда готов помочь. До встречи в новых статьях.
В этом уроке мы расскажем, как создать боковое меню, такое, как у приложений для смартфона, но для веб-сайта. Мы опишем, как шаг за шагом создать меню, пригодное как для компьютеров, так и для смартфонов, начиная от структуры разметки и заканчивая добавлением эффекта вытягивания при открытии и закрытии меню.
Заметьте: для этого урока Вам потребуется библиотека jQuery, так что убедитесь, что последняя библиотека jQuery подключена на Вашей странице.
1. Структура
HTML:
CSS:
Для начала мы создадим структуру для левого бокового меню, которую мы в результате спрячем влево. Мы добавили несколько основных стилей в пример, так что не стесняйтесь изменять вид Вашего бокового меню. Мы также добавили пустой блок под названием main-content . Этот блок будет содержать все элементы, которые Вы хотите показать на этой странице. Мы заполним его в следующем шаге.
2. Создание простого бокового меню
HTML:
CSS:
JS:
Теперь мы спрячем боковое меню влево с помощью свойств position:relative и left: -240px, это значение равняется ширине бокового меню. Мы добавили кнопку и скрипт jQuery, что позволит нам вызвать боковое меню по нажатию, переключая класс open-sidebar для контейнера, в котором находятся боковое меню и блок main-content.
После этого мы просто передвигаем весь контейнер влево на 240px, и это заставит появиться левое боковое меню. Если пользователь снова нажмет на кнопку, скрипт jQuery удалит класс у контейнера, и боковое меню исчезнет. Чтобы анимировать боковое меню так, как будто оно приезжает из левого края экрана, мы добавили переход стиля, чтобы создать такую же функциональность, как у приложений для смартфонов.
Теперь у нас есть простое боковое меню, которое вызывается нажатием кнопки мыши.
3. Делаем меню вытягиваемым
HTML:
CSS:
JS:
Самая сложная часть этого урока — сделать боковое меню вытягиваемым как на браузерах для смартфонов, так и на веб-браузерах для настольных компьютеров. На этом этапе нам нужно подключить хороший плагин, под названием TouchSwipe, созданный Matt Bryson для управления процессом вытягивания меню. Убедитесь, что этот плагин подключен в Вашем HTML файле.
Теперь, когда у нас есть возможность обнаружить жесты вытягивания и перетаскивания на смартфоне, мы воспользуемся этим, чтобы вызвать боковое меню. Ранее мы столкнулись с проблемой, так как мы применили обнаружение действия вытягивания для страницы целиком, то на смартфонах стало невозможно прокручивать страницу при увеличении, потому что открывалось боковое меню.
Так как это неприемлемо, мы добавили пустой блок класса swipe-area, чтобы определить область обнаружения жеста вытягивания. Область определения вытягивания расположена у левого края страницы, так что пользователь сможет вызвать боковое меню вытягиванием направо у левого края экрана. Это решает проблему случайного открытия меню при прокрутке страницы.
В нашем скрипте JS мы определяем действие вытягивания, использую функцию swipe(), выполняемую плагином TouchSwipe. Мы обнаруживаем две части действия вытягивания: движение и направление. Мы просто добавляем класс open-sidebar, чтобы вызвать меню, когда курсор мыши или палец пользователя движется вправо. Мы удаляем этот класс, если курсор мыши или палец пользователя движется в противоположном направлении.
В нашем эксперименте эта функция отлично работает на смартфонах, но не очень хорошо работает в браузерах на настольных компьютерах, так как когда мы двигаем мышку с зажатой кнопкой, браузеры запускают инструмент по выделению текста, который перебивает наше действие по определению вытягивания. Нам это не нужно, поэтому мы возвращаем false после того, как мы добавляем или удаляем класс open-sidebar. И это предотвращает запуск инструмента по выделению текста по умолчанию.
Заключение
И это все! У нас теперь есть вытягиваемое боковое меню, которое работает как в браузерах на настольных компьютерах, так и на смартфонах. Надеемся, что Вам понравился этот урок.
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.
Содержание
Примеры
Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown , или другой элемент, который заявляет, position: relative; . Раскрывающиеся списки могут быть вызваны из или элементы, чтобы лучше соответствовать вашим потенциальным потребностям.
Одиночная кнопка выпадающего меню
Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с элементы:
Самое приятное, что вы можете сделать это с любым вариантом кнопки:
Split кнопка с выпадающим меню
Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением .dropdown-toggle-split для правильного шрифта выпадающего каре.
Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left , который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.
Изменение размера
Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.
Вариант списка сверху
Вызвать выпадающее меню над элементами, добавив .dropup для родительского элемента.
Пункты меню
Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать элементы в раскрывающихся списках, а не просто ы.
Выравнивание меню
По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.
Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.
Заголовки меню
Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.
Dropdown header
Делители меню
Отдельные группы связанных элементов меню с делителем.
Заблокированы части меню
Добавить .disabled для пунктов в раскрывающемся меню стиль их как отключенные.
Использование
Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.
На мобильных устройствах, открывая выпадающий добавляет .dropdown-backdrop как площадь нажатия для закрытия выпадающего меню При нажатии за меню требование для правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.
Примечание: data-toggle="dropdown" атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.
С помощью данных атрибутов
Добавить data-toggle="dropdown" на ссылку или кнопку для переключения в меню.
Через JavaScript
Вызвать меню через JavaScript:
data-toggle="dropdown" еще требуется
Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle="dropdown" всегда должно присутствовать на спусковом элементе раскрывающегося меню.
Варианты
Методы
| Способ | Описание |
|---|---|
| $().dropdown('toggle') | Переключает меню данной панели навигации и вкладок навигации. |
События
Все выпадающие события обстреляли .dropdown-menu ’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.
| Событие | Описание |
|---|---|
| show.bs.dropdown | Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется. |
| shown.bs.dropdown | Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения). |
| hide.bs.dropdown | Это событие немедленно уволили, когда скрывать метод экземпляра называется. |
| hidden.bs.dropdown | Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения). |
Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.
Читайте также: