что такое раскрывающееся меню
Как с помощью CSS создать адаптивное выпадающее меню навигации
Из этого руководства вы узнаете, как с помощью CSS создать адаптивное выпадающее меню навигации. Для этого мы воспользуемся CSS flexbox и хаком с чек-боксами.
Верхняя панель навигации крайне важна для любого сайта. В этой статье описана одна из реализаций, которая адаптивна. А также не использует JavaScript для переключения выпадающего списка на мобильных устройствах.
Настройка
Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.
Создайте файл styles.css и подключите его в HTML-документе:
Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.
Добавьте следующий HTML-код в тег
Элемент header формирует темную панель навигации, содержащую все остальное. Также у нас есть div menu-wrap, который является контейнером для логотипа, ссылок навигации и иконки меню.
В файл styles.css добавим несколько стилей для всех элементов:
Затем примените эти стили к header.
Теперь темная панель навигации растягивается на всю ширину окна просмотра.
Добавьте приведенные ниже стили к классу menu-wrap:
Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.
Стилизуем каждый из этих дочерних элементов один за другим.
В результате мы получили правильно позиционированные логотип и иконку нужного размера. Теперь нужно на мобильных устройствах абсолютно позиционировать все пункты меню ниже панели. Сначала добавьте следующий код:
Теперь добавьте стили списка и ссылок:
Также добавьте для ссылок стили при наведении и фокуса:
Теперь в браузере отображается следующее:
Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:
Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.
Хак с чекбоксом
Нам нужно переключить отображение меню, используя только CSS. Лучший способ сделать это – использовать скрытый чекбокса.
Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!
В файле index.html добавьте элемент checkbox перед элементом nav:
В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.
Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:
Для больших экранов
Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.
Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.
В нем сначала спрячьте иконку меню.
Обязательно увеличьте размер окна браузера до ширины, превышающей 768 пикселей, чтобы увидеть следующие изменения.
Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.
Теперь вы знаете, как создать адаптивное выпадающее меню навигации, которое отображает пункты на навигационной панели для больших экранов. Но при этом отображает иконку гамбургера для небольших экранов.
СКАЧАТЬ ИСХОДНЫЙ КОД
Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, лайки, отклики, подписки, дизлайки огромное вам спасибо!
Динамическое выпадающее меню
Введение
Слышали ли вы когда либо такое утверждение, что «нельзя сделать динамическое выпадающее меню исключительно на CSS для IE»? Уверен, что да. И что, вы-таки верите этому? Правильно, лучше не верьте.
Цель, которой мы хотим достичь в этой статье
Цель данной статьи — сделать выпадающее меню для IE, сделанное исключительно на CSS. Начав с этой постановки, я расширил задачу до того, чтобы заставить работать такое меню в других наиболее известных браузерах (прим. пер.: из комментариев выясняется, что этими браузерами являются Opera 7.x и последние версии Firefox).
Цель, которой мы хотим достичь в этой статье, в принципе более или менее общеобразовательная, т.е. дать общее представление о некоторых «скрытых» и редко используемых особенностях браузеров.
Также особенно любопытные могут в этой статье найти некоторые ухищрения, с помощью которых можно достичь определенных нестандартных результатов. Ну и для разработчиков эта статья может стать поводом для размышления или источником новых идей.
Каким мы представляем уровень читателя.
Вообще-то я думал о том, чтобы пометить эту статью как для «углубленного изучения (advanced)». Но я уверен, что даже не самые опытные разработчики хорошо поймут то, что написано в статье. Короче, читатель просто обязан знать основы CSS и
HTML.
Чем это меню отличается от всех других?
я долго искал в сети меню, которые были бы сделаны на CSS, но не нашел ни одного решения, которое бы работало без глюков в IE. Однако же я нашел много интересных идей, которые и привели меня к тому результату, который будет здесь описан. Да, мой код тоже не совершенен, но у меня попросту нет времени, чтобы выправить все ошибки. Самое интересное альтернативное решение из всех, что я видел (которые используют CSS), основано на использовании псевдокласса hover для элементов LI. А я-то никогда и не думал, что такое возможно, впрочем, как и не думал о том, что вообще возможно сделать выпадающее меню для IE без скриптов…
Основным отличием между моим и другими меню является то, что мое работает в IE. Все решения, которые я видел, используют элемент LI как основной элемент для псевдокласса :hover, однако Microsoft решила, что этот псевдокласс может быть использован только для
элемента A. Большинство сайтов делают оговорку, что их меню работают только в браузерах Opera 7.x или Mozilla. Но ведь эти браузеры используются только пятью процентами пользователей! Да, такие меню хороши в этих браузерах, но к сожалению не могут быть видны в большинстве самых распространенных браузеров. Сейчас мы исправим это недоразумение.
Что такое меню, сделанное с помощью только CSS?
Это динамическое меню, для создания которого используется только CSS, и не используются скрипты (например, написанные на JavaScript).
Давайте рассмотрим код:
Что происходит, почему все работает?
Почему мы используем таблицу? А потому, что что она очень хорошо разделяет вложенные якоря, которые мы хотим задействовать из основного якоря. Такое решение не работает в Mozilla 0.7 и даже с помощью JavaScript я еще не нашел способа реализовать это. Прямое вложение якорей не допускается Microsoft, поэтому элемент table — это своеобразный хак для IE. И, насколько я знаю, только таблицы позволяют таким образом «провести» IE.
Итак, что у нас тут имеется? 2 таблицы с якорями внутри якорей.
Которые являются скрытыми.
Браузер показывает содержимое якоря при наведении указателя мыши и применяет в этом случае соответствующий стиль:
Для текста ссылки используется:
Для выпадающей таблицы, которую мы используем для подменю: это ключевая таблица, которая и является выпадающим списком.
Для ссылок внутри подменю:
Если мы наводим указатель на одну из ссылок в подменю, браузер применяет следующий стиль:
Для ссылок внутри подменю:
Стиль ссылок в выпадающем меню:
Возможно, вы заметили, что я испольщовал несколько свойств ‘z-index’ для некоторых элементов. Они являются хаками для некоторых проблем, которые я нашел при тестировании меню.
Полное описание того, как это сделать, я сделаю в следующий раз.
А пока что скажу, что это меню вы можете изменить так, как вам захочется, приспособить под себя. И возможностей для этого существует бесконечное множество — ограничить их может только ваша фантазия…
Переключение стилей (Скины)
Если вы хотите добавить скины для вашего меню с возможностью их смены самим пользователем, вам нужно будет добавить дополнительные таблицы стилей и дать им имена с (для IE) и с именами name=’some_name’ (для остальных браузеров). Для того, чтобы не применялись оба стиля, вам нужно заблокировать все стили, кроме стилей по умолчанию, путем добавления параметра «disabled» в стиль тэга (причем не имеет значения, связываете ли вы его или используете линейный синтаксис). Mozilla и Opera позволяют переключение поименованных стилей из браузера. Как правило, эти браузеры не применяют все стили, которые определены именем name=»…» и игнорируют Также они умеют использовать имя name=’default’ как таблицу стилей по умолчанию и name=’alternate’ в качестве альтернативной таблицы стилей. Вы можете определить имя стиля, которое пользователь будет видеть как свойство title=»…». Например, демонстрационная версия меню на этой странице включает следующие определения:
Обратите внимание на порядок присвоения имен, я настойчиво рекомендую строго ему следовать.
IE не имеет встроенного переключения стилей CSS, поэтому нам придется его сделать самим (тут уже не без использования JavaScript):
Выберите один из стилей, кликнув на соответствующий, и вернитесь вверх, чтобы увидеть
изменения :
Предупреждение! Это просто маленький пример!
Перезагрузка страницы сбросит значения по умолчанию для таблиц стилей. Поэтому для реальных целей необходимо использовать cookies или серверные скрипты для того, чтобы запоминать выбор пользователя, что опять-таки не является предметом рассмотрения данной статьи.
Добавлю только, что приведенный выше код будет работать только в
IE.
я советую всем использовать меню на основе CSS на ваших сайтах (и в веб-приложениях), потому что таким образом можно избежать многих проблем, которые появляются при использовании меню на основе JavaScript. Такие проблемы, как правило, возникают при неправильной обработке событий в IE. Более того, в некоторых браузерах имеется возможность отключения скриптов, и уж тем более многие браузеры не поддерживают JS от Microsoft.
Если же браузер не поддерживает CSS, то он по крайней мере будет отображать все ссылки.
Так называемая «проблема Mozilla-ы» — ссылки внутри подменю не работают. Т.е. невозможно открыть их в том же окне (но они работают при совместном нажатии Shift+нажатие — в новое). Описание проблемы смотрите в разделе «ошибки».
По умолчанию ссылки в подменю не работают в Mozilla. Но я нашел более-менее приемлемое решение этой ошибки. Оно основано на вставке специального меню, опять-таки без использования скриптов. Просмотрите внимательно те места кода, где упоминается Mozilla (или ‘moz’). Вы увидите, что HTML разделы не имеют вложенных якорей (последний тэг помещен туда, где он и должен находиться). В первой части CSS я использую недокументированные селекторы — это специальные селекторы для Mozilla, и добавляю селектор :hover для тех элементов div, которые поддерживаются Mozilla. И все равно после этого поведение остается не совсем корректным.
В комментариях есть замечание (от Nick Young), что меню не работает в Netscape. я уверен, что проблема там в том же, что и в Mozilla. Надо искать дополнительную информацию об этом. Решение возможно потребует некоторых изменений, потому что альтернативный код должен нормально работать и в Netscape.
Страница была протестирована в IE версий 5, 5.5, 6, в Opera 7.23 и Mozilla 0.71. Скорее всего, меню будет работать и в более ранних версиях указанных браузеров.
Создаем выпадающее меню CSS
Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:
Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:
После применения стилей у нас должно получиться нечто вроде этого:
Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):
Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :
Если все сделано правильно, у вас должно получиться нечто вроде этого:
Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.
Добавляем индикатор выпадающего списка
Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):
Значит, вы все сделали правильно.
В завершение
Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.
Узнайте, как создать раскрывающееся меню с CSS и JavaScript.
Раскрывающемся
Раскрывающееся меню представляет собой переключаемое меню, позволяющее пользователю выбрать одно значение из стандартного списка:
Создание всплывающего раскрывающегося меню
Создайте раскрывающееся меню, которое появляется при нажатии пользователем кнопки.
Шаг 1) добавить HTML:
Пример
Пример как работает
Используйте элемент контейнера (например,
Шаг 2) добавить CSS:
Пример
/* Dropdown Button */
.dropbtn <
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>
— needed to position the dropdown content */
.dropdown <
position: relative;
display: inline-block;
>
/* Dropdown Content (Hidden by Default) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Links inside the dropdown */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Change color of dropdown links on hover */
.dropdown-content a:hover
Пример как работает
We have styled the dropdown button with a background-color, padding, hover effect, etc.
Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.
Узнать, как создать выпадающее меню с помощью CSS.
Выпадающее меню
Создать выпадающее меню
Создайте выпадающее меню, которое появляется при наведении курсора мыши на элемент.
Шаг 1) Добавить HTML:
Пример
Объяснение примера
Используйте элемент контейнера (например,
Шаг 2) Добавить CSS:
Пример
/* Кнопка выпадающего списка */
.dropbtn <
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>
— необходим для размещения выпадающего содержимого */
.dropdown <
position: relative;
display: inline-block;
>
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover
Объяснение примера
Мы оформили кнопку выпадающего списка с цветом фона, отступами и т.д.
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.