Боковое выезжающее меню на чистом CSS

CSS меню

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню).

Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта.

Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

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

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <li> нашего списка будет содержать по одной ссылке:

<ul id=»navbar»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Контакты</a></li> <li><a href=»#»>О нас</a></li> </ul>

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

#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

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

#navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Название документа</title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; } #navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } </style> </head> <body> <ul id=»navbar»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Контакты</a></li> <li><a href=»#»>О нас</a></li> </ul> </body> </html>Попробовать »

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »

Горизонтальное меню

В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

<ul id=»navbar»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Контакты</a></li> <li><a href=»#»>О нас</a></li> </ul>

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

#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

<ul id=»navbar»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Контакты</a></li> <li><a href=»#»>О нас</a></li> </ul>

Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:

<ul id=»navbar»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Контакты</a> <ul> <li><a href=»#»>Адрес</a></li> <li><a href=»#»>Телефон</a></li> <li><a href=»#»>Email</a></li> </ul> </li> <li><a href=»#»>О нас</a></li> </ul> Попробовать »

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:

#navbar ul { display: none; } #navbar li:hover ul { display: block; }

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

#navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; } Попробовать »

Вертикальное меню с выпадающим подменю на CSS

Вертикальное меню с выпадающим подменю

Еще один распространенный тип меню — это меню с выпадающими подменю. Обычно в таких меню только два уровня, но встречаются и многоуровневые, когда из выпадающего подменю может выпадать еще одно и так далее.

Разметка таких меню простая — обычный многоуровневый список.

При создании такого меню необходимо использовать абсолютное и относительное позиционирование.

Обычно элементам списка li верхнего уровня задают относительное позиционирование, а для выпадающего меню — абсолютное.

Выглядеть оно будет следующим образом.


CSS-свойство position задает режим позиционирования элементов. Значением по умолчанию является static, которое означает «обычное позиционирование».

Значение relative обозначает «относительное позиционирование». Относительно спозиционированный элемент можно перемещать относительно его исходного положения.

Значение absolute свойства position задаёт элементу абсолютное позиционирование.

Абсолютно спозиционированные элементы обладают следующими особенностями:

  • Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
  • Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
  • Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.
  • Теперь приступим к делу!!!

    Для начала создадим шаблон нашего будущего меню.

    Готово!!!

    Теперь уберем внутренние и внешние отступы и маркеры.

    Преукрасим наше меню.

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

    В принципе меню готово но, для привлекательности добавим треугольнички показывающие, что у пункта меню есть подпункты.

    Наше меню готово можете использовать его на своем сайте.

    18.10.2017 15:20

    Адаптивное горизонтальное многоуровневое выпадающее меню для сайта css + jquery + html 5

    Адаптивные горизонтальные выпадающие меню для сайтов становятся все более востребовательными в повседневной жизни.

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


    Структура адаптивного меню строится на основе взаимосвязи html + css + jquery. За отображение меню при изменении размера окна будет отвечать jquery.

    Итак, давайте приступим к созданию адаптивного горизонтального меню. Ничего сложного нет, для начала создайте файл index.htm и вставьте в него код представленный ниже: Внешний вид формируется правилами css Создайте файл style.css и вставьте в него код представленный ниже:

    Функционал выпадающего меню формируется правилами jquery. Создайте файл menu.js и вставьте в него код представленный ниже:

    Простое многоуровневое меню, используя CSS и jQuery.

    Очень часто в наших проектах требуется простое для настройки и стилизации многоуровневое меню. В этой статье я хочу показать один из способов его реализации. HTML, CSS и немного jQuery.

    Структура меню

    Используется стандартная модель

    …а также стандартная HTML-разметка:

    Как видите, код представлен вложенным несортированным списком. Например, для этой статьи я использовал следующий код (элементы главного меню выделены жирным начертанием):

    Вы можете добавить новые пункты, просто используя html-тег <li> с тегом <ul> внутри него.

    Стиль CSS

    Теперь напишем стили. Я подготовил очень простой стиль, который вы можете изменять по своему усмотрению. Ниже представлен стиль для основного div-а.

    Далее напишем стиль для пунктов главного меню (), а также для подменю ():

    Осталось написать стиль для секции подменю:

    jQuery

    А теперь воспользуемся библиотекой jQuery, для того чтобы прятать и показывать меню второго уровня.

    Воспользуемся событиями и . Не забываем в подключить jQuery:

    А затем пишем следующий код:

    Этот код можно вынести в отдельный файл, и подгружать его. Всё, меню готово.

    В одной из следующих статей я напишу как вообще обойтись без jQuery. Мы напишем меню используя только html и css.

    Пример

    32232 просмотра

    .

    Добавить комментарий

    Закрыть меню