В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child .
Исходный код
Демо
Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:
Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:
После применения стилей у нас должно получиться нечто вроде этого:
Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить
-
внутрь элемента
для пункта, в котором нужно скрыть выпадающий список:
Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента
, который отвечает за пункт меню WordPress . Обратите внимание на то, что мы добавили
-
после анкорного тега ( ).
Теперь добавим CSS-стили , чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:
Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):
Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый
-
между тегами .
Взгляните на приведенный ниже HTML-код , в котором мы добавляем второй уровень выпадающего списка к пункту меню « Tutorial », который находится внутри пункта « WordPress »:
Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :
Если все сделано правильно, у вас должно получиться нечто вроде этого:
Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.
Добавляем индикатор выпадающего списка
Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):
Для этого мы используем псевдоэлемент CSS3 (:only-child) . В данном случае он проверяет, имеются ли в тегах
родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials ?
Значит, вы все сделали правильно.
В завершение
Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.
А как вы сделали меню на HTML ? Пожалуйста, расскажите об этом в комментариях.
Данная публикация представляет собой перевод статьи « How to Create a Pure CSS Dropdown Menu » , подготовленной дружной командой проекта Интернет-технологии.ру
В этом уроке мы покажем вам, как создавать боковое выпадающее меню для еще более простой навигации по сайту. Такое меню — популярная тенденция в современном веб-дизайне. На многих сайтах используется этот тип меню. С его помощью можно избавиться от хаоса на страницах проекта, сделать его более читаемым, сосредотачивая внимание пользователей на основном контенте.
Это прекрасный способ добиться минимализма без отвлекающих факторов. Сегодня создадим такое меню самостоятельно.
Чтобы создать меню навигации, давайте сначала ознакомимся с настройками:
Для начала необходимо загрузить Normalize.css и настроить стили браузера по умолчанию, убедиться, что меню выглядит одинаково во всех браузерах. Для отображения стрелки перед элементами меню с подпунктами будем использовать FontAwesome. Для переключения классов в меню загружаем jQuery и перемещаем весь пользовательский jQuery код в script.js. Последняя ссылка является основной таблицей для веб-проекта.
Иконка-гамбургер
Иконка-гамбургер является общим атрибутом навигации по сайту. Часто она создается при помощи иконочного шрифта, такого как FontAwesome, но в этом уроке мы добавим некоторую анимацию, а потому будем создавать ее с нуля. Наша иконка-гамбургер представляет собой тег span, содержащий три div класса, отображающийся в виде горизонтальных полос.
Стили выглядят следующим образом:
Иконка имеет фиксированное положение и не меняет его при прокрутке страницы. Также имеет z-index 15, а это значит, что она всегда будет поверх других элементов. Состоит из трех bars, каждый из которых разделяет другие стили. Поэтому мы переместим каждый bar в класс .menu-bar. Остальные стили перемещаем в отдельные классы. Магия происходит тогда, когда мы добавляем другой класс в тег span, который является открытым. Мы добавляем его с помощью jQuery следующим образом:
Для тех, кто не знаком с jQuery — мы инициализируем переменную с $toggleButton, которая содержит нашу иконку. Сохраняем ее в переменной без необходимости использования JavaScript. Затем мы создаем event listener, который учитывает клики по иконке. Каждый раз, когда пользователь кликает по иконке-гамбургеру, event listener запускает функцию toggleClass(), которая переключает класс .button-open.
Когда добавлен класс .button-open, мы можем использовать его для изменения способов отображения элементов. Мы используем CSS3 translate() и rotate() функции, чтобы верхняя и нижняя полосы вращались на 45 градусов, а средняя полоса сдвигалась вправо и исчезала. Вот какую анимацию можно настроить:
Выпадающее меню навигации
Теперь, когда у вас есть иконка-гамбургер, давайте сделаем ее полезной и создадим выпадающее меню при нажатии на нее. Вот как выглядит разметка меню:
Сейчас не будем подробно останавливаться на каждом стиле для этого меню, вместо этого сосредоточимся на нескольких важных моментах. Прежде всего, это div и класс .menu-wrap. Посмотрите на его стили:
Положение фиксированное, поэтому при прокрутке страницы меню всегда остается в одном положении. Высота 100% позволяет меню занимать все вертикальное пространство на странице. Обратите внимание, что в поле margin-left установлено отрицательное число, равное ширине меню. Это значит, что меню будет исчезать из окна просмотра. Чтобы сделать его снова видимым, мы создаем другой класс toggler с jQuery. Наш файл JavaScript будет выглядеть так:
Добавляем другую переменную $menuWrap, которая содержит оболочку меню. Используйте тот же обработчик событий, который мы создали ранее. Только на этот раз переключаем два класса: один для кнопки и один для оболочки меню. Значение левого поля класса .menu-show равно 0, это добавит эффект тени.
Подменю и ссылки
Вы можете заметить, что в одном из элементов списка есть класс .menu-item-has-children, который содержит подменю. Кроме того, сразу под ссылкой размещен тег span с классом .sidebar-menu-arrow.
span имеет ::after pseudo-element и содержит стрелку FontAwesome. По умолчанию подменю скрыто и будет видно только при нажатии на стрелку. Вот как мы это можем сделать с jQuery:
Когда мы нажимаем на стрелку, мы вызываем функцию, которая в свою очередь нацелена на следующий элемент сразу после span (в нашем случае это подменю) и делает его видимым. Функцию, которую мы используем — slideToggle. Она заставляет элемент появляться и исчезать. Функция в нашем примере имеет один параметр — длительность анимации.
Элементы меню в примере имеют hover-эффект. Он создается с использованием ::after pseudo-element. Код выглядит так:
::after pseudo-element содержит элемент block level внизу каждой ссылки с полной шириной и высотой 0.15em. Выглядит все это как подчеркивание. Особенность заключается в том, что мы не просто применяем цвет фона к линии, мы используем функцию linear-gradient() на фоновом изображении. Хотя эта функция предназначена для создания цветовых градиентов, мы можем менять цвет, указав нужные проценты.
Половина лини здесь прозрачная, а вторая половина — желтая. Сделав размер фона 200%, мы удваиваем ширину нашего блока. Теперь прозрачная часть занимает всю ширину ссылки, а желтая часть перемещается влево и становится незаметной. Мы меняем положение фона при наведении на -100%. Теперь желтая часть становится видимой, а прозрачная — скрыта.
Вместо прозрачной части вы можете использовать любой другой цвет. Вы также можете поэкспериментировать с градиентами.
Каждый из рассмотренных нами элементов работает как единое целое. Вы можете создать такое меню, используя любой дизайн сайта из коллекции TemplateMonster. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!
Если вы попали на этот сайт случайно или искали другое выпадающее меню, советую перейти по ссылке, там собранно множество разных меню для сайта.
Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.
Навигация по странице:
В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.
У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс 🙂 ) на базе которого можно построить практически любое вертикальное выпадающее меню.
А что же делать с мобильными браузерами? — или на планшетах спросите вы.
К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.
Пара слов о преимуществе выпадающих меню:
- можно вместить очень длинные меню в ограниченное пространство;
- дизайн становится более изящным;
- частично улучшаются поведенческие факторы.
Вертикальное выпадающее меню вправо
к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.
Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.
Html для вертикального меню
Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:
Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.
Вертикальное выпадающее меню CSS
к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.
Вот эта строчка CSS
Посмотреть что у нас получилось в этом примере можно на скине:
Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:
Вот такой не сложный пример выпадающего меню у меня получился.
Это еще не конец, идем дальше.
Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.
Вертикальное выпадающее меню влево на CSS
к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)
Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.
Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:
Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:
