Как создать выпадающее меню с помощью html и css

Улучшения для меню с горизонтальной прокруткой

1. Выравнивание активного пункта по центру

Для того чтобы при открытии страницы пункт активного меню отображался по центру можно написать небольшой код на JavaScript:

document.addEventListener('DOMContentLoaded', () => {
  const $navItems = document.querySelector('.nav-scroller__items');
  const $navItemActive = $navItems.querySelector('.nav-scroller__item_active');
  const navItemsRect = $navItems.getBoundingClientRect();
  const navItemActiveRect = $navItemActive.getBoundingClientRect();
  const navItemsLeft = navItemActiveRect.left - navItemsRect.left + (navItemActiveRect.width - navItemsRect.width) / 2;
  $navItems.scrollLeft = navItemsLeft;
});

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

2. Прокручивания меню с помощью удерживания кнопки мыши

В этом улучшении уберём полосу прокрутки и подключим микро-библиотеку Dragscroll. Эта библиотека поможет нам очень просто добавить возможность прокрутки меню посредством удерживания кнопки мыши (стиль «перетащить и отпустить» или «щелкнуть и удерживать»).

Для этого в CSS добавим следующий код:

.nav-scroller__items::-webkit-scrollbar {
  display: none;
}

Это правило выключит отображение полосы прокрутки.

После этого на страницу подключим файл :

<script defer src="js/dragscroll.js"></script>

Добавим класс к прокручиваемому элементу:

<div class="nav-scroller">
  <nav class="nav-scroller__items dragscroll">
    <a class="nav-scroller__item" href="#">Start</a>
    <a class="nav-scroller__item" href="#">Icons</a>
    <a class="nav-scroller__item" href="#">Docs</a>
    <a class="nav-scroller__item nav-scroller__item_active" href="#">Support</a>
    <a class="nav-scroller__item" href="#">Plans</a>
    <a class="nav-scroller__item" href="#">Blog</a>
    <a class="nav-scroller__item" href="#">Sign in</a>
  </nav>
</div>

Для больших экранов

Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.

Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.

@media (min-width: 768px) {
}

В нем сначала спрячьте иконку меню.

@media (min-width: 768px) {
  .menu-icon {
     display: none;
  }
}

Обязательно увеличьте размер окна браузера до ширины, превышающей 768 пикселей, чтобы увидеть следующие изменения.

Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.

@media (min-width: 768px) {
  nav {
    position: relative;
    top:-10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
}

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

СКАЧАТЬ ИСХОДНЫЙ КОД

HTML:

Активные пункты верхнего меню имеют класс , а пункты с вложениями

<ul class=»main-menu»>
<li class=»active»><a href=»#url»>Главная</a></li>
<li class=»menu-children»>
<a href=»#url»>Услуги</a>
<ul>
<li><a href=»#url»>Продажа</a></li>
<li><a href=»#url»>Покупка</a></li>
<li class=»menu-children»>
<a href=»#url»>Обмен</a>
<ul>
<li><a href=»#url»>Шило на мыло</a></li>
<li><a href=»#url»>Мыло на шило</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=»#url»>Новости</a></li>
<li><a href=»#url»>Фотогалерея</a></li>
<li><a href=»#url»>Контакты</a></li>
</ul>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<ul class=»main-menu»> <li class=»active»><a href=»#url»>Главная</a></li> <li class=»menu-children»> <a href=»#url»>Услуги</a> <ul> <li><a href=»#url»>Продажа</a></li> <li><a href=»#url»>Покупка</a></li> <li class=»menu-children»> <a href=»#url»>Обмен</a> <ul> <li><a href=»#url»>Шило на мыло</a></li> <li><a href=»#url»>Мыло на шило</a></li> </ul> </li> </ul> </li> <li><a href=»#url»>Новости</a></li> <li><a href=»#url»>Фотогалерея</a></li> <li><a href=»#url»>Контакты</a></li> </ul>

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

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

После того как код был размечен, самое время приступить к работе со стилем. Следует заметить, что парные теги, использованные для каркаса по умолчанию, являются блочными, а значит, для создания как обычного, так и выпадающего горизонтального меню в CSS необходимо изменить тип элемента на строчный. Это можно сделать при помощи свойства display. Оно добавляется к элементу:

.menu li {

display: inline;

}

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

.menu li {

display: inline;

white-space: nowrap;

}

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

Простая анимация

Что мы будем анимировать. В данном случае, эффекты довольно простые:

• Плавное изменение цвета и фона пунктов при наведении
• Плавное появление выпадающего меню

Я не стал добавлять специальный класс для эффектов анимации, потому что, как вы ниже сами увидите, все делается очень просто путем добавление нескольких строчек кода css к уже существующим классам.

Для задержки изменения состояния при hover-эффекте (эффект перехода) используется свойство CSS3 — .

Использован упрощенный синтаксис. Также добавлены нестандартные свойства для различных типов браузеров.

Переопределение существующих стилей:

/* Оформление пункта */
.menu_color >  ul >  li >  a {
  color #999;  
  background rgba(, , , );
 
  /* добавляем код */
  -webkit-transition all .3s;
  -moz-transition all .3s;
  -o-transition all .3s;
  transition all .3s;
}
 
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
   color #555;
   background rgba(, , , );
 
  /* добавляем код */
  -webkit-transition all .3s;
  -moz-transition all .3s;
  -o-transition all .3s;
  transition all .3s;
}
 

А вот с плавным появленем подменю проблема …

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

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

/* Переопределение sub-menu*/
.my_menu .sub-menu {
  display block; /* переопределено */
  position absolute;
  top ;
  width 200px;
  z-index 9999;
 
  /* Добавить */
  opacity ;
  -webkit-transition opacity .5s, top .7s;
  -moz-transition opacity .5s, top .7s;
  -o-transition opacity .5s, top .7s;
  transition opacity .5s, top .7s;
}
/* Смещение за экран */
.my_menu .sub-menu {
  left -3000px;
}
/* Переопределяем эффект отображения при наведении*/
.my_menu .parent:hover > .sub-menu {
  display block;
  top 4px;
 
  /* Добавить */
  opacity 1;
}

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

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

Начнем. Для начала хтмл код. У нас добавится несколько списков ul li для следующих уровней сайта. Мой пример будет на 3 выпадающих подменю, по этому html код будет такой:

Будьте внимательны, только у третьего пункта меню есть многоуровневая выпадашка, у остальных я не делал, дабы не засорять хтмл и так его много.

Далее идут стили, они не сильно отличаются от предыдущих примеров, но все же:

Это стили для создания вертикального многоуровневого выпадающего меню вправо при наведении. Вариант с выпадашкой влево будет чуть далее. Смотрим ниже что у нас получилось на рисунке (скин кликабельный):

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

Скачать пример

Сейчас я приведу стиль, который нужно поменять, для создания выпадашки вправо:

Нажмите, чтобы развернуть код

На рисунке я показал где он находится:

На втором рисунке можно посмотреть как работает вертикальное многоуровневое меню влево при наведении.

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

На этом у меня все, до новых встреч.

Советую посетить родительскую страницу https://help-wp.ru/vypadayushhee-menu/ с разными вариантами меню, или же просмотреть запись горизонтальное выпадающее меню.

Фиксированное меню

Для того чтобы запечатлеть созданное в открытом виде, применяется свойство display со значением block по аналогии с выпадающим меню, но без скрытия отображения. При желании зафиксировать можно не только открытый список, но и строку меню при прокрутке страницы. Когда пользователь будет пролистывать текст вниз, меню может всегда оставаться сверху, облегчая навигацию по сайту. Подобный элемент имеет ряд особенностей. Он очень похож на абсолютный, но привязывается только к браузеру, выпадая из потока. Координировать такой элемент удобно при помощи обычных свойств top/bottom, left/right. Пример горизонтального меню с выпадающими элементами, зафиксированными в браузере:

.menu > li {

display: inline;

position: fixed;

}

.menu .second {

position: absolute;

display: none;

}

.menu > li:hover .second {

display: block;

}

Добавляется свойство position со значением fixed, после чего меню остается на месте при прокрутке. С созданием такого меню справится даже новичок. HTML-разметка списком — простая и удобная. Для корректного отображения CSS-стилей в браузере рекомендуется помнить об оформлении пунктов в блочный вид, добавлении границ и координации элементов, внутренних и внешних отступов, чтобы описанные пункты не были наложены друг на друга. Часто забывают о добавлении ширины и высоты элемента. Чтобы отобразить нужный элемент за пределами видимой части для последующего оформления, можно использовать свойство float, «прибивая» его к правой или левой стороне (float: right;).

CSS

Стили меню содержатся в отдельном файле menu.css. В файле layout.css содержатся стили для демонстрационной страницы.

menu.css

#nav,#nav ul {
    background-color: #8899AA;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    display: block;
    padding: 5px;
    position: relative;
    width: 112px;

    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -webkit-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
}
#nav ul {
    left: -9999px;
    opacity:0;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    top: -9999px;

    -moz-transform: rotateY(70deg);
    -ms-transform: rotateY(70deg);
    -o-transform: rotateY(70deg);
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
    -o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
    transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav li {
    background-color: #FFFFFF;
    position: relative;
}
#nav > li {
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#nav li a {
    background-color: #AABBCC;
    border-color: #DDDDDD #555555 #555555 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    display: block;
    font-size: 15px;
    padding: 8px 10px 8px 5px;
    text-decoration: none;
    width:95px;

    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
    color: #FFFFFF;
}
#nav li:hover ul.subs {
    left: 114px;
    opacity:1;
    top: 0;

    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;

    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#nav ul li {
    width: 100%;
}

/* Цвета */
.colorScheme {
    list-style: none outside none;
    overflow: hidden;
    width: 120px;
}
.colorScheme a {
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0 5px 5px;
    width: 30px;
}
.colorScheme .clr1 {
    background-color: #8899AA;
}
.colorScheme .clr2 {
    background-color: #aa889e;
}
.colorScheme .clr3 {
    background-color: #8f88aa;
}
.colorScheme .clr4 {
    background-color: #88aaaa;
}
.colorScheme .clr5 {
    background-color: #88aa8a;
}
.colorScheme .clr6 {
    background-color: #aaa188;
}

#clr1:target ~ #nav, #clr1:target ~ #nav ul {
    background-color: #8899AA;
}
#clr2:target ~ #nav, #clr2:target ~ #nav ul {
    background-color: #aa889e;
}
#clr3:target ~ #nav, #clr3:target ~ #nav ul {
    background-color: #8f88aa;
}
#clr4:target ~ #nav, #clr4:target ~ #nav ul {
    background-color: #88aaaa;
}
#clr5:target ~ #nav, #clr5:target ~ #nav ul {
    background-color: #88aa8a;
}
#clr6:target ~ #nav, #clr6:target ~ #nav ul {
    background-color: #aaa188;
}

#clr1:target ~ #nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
}
#clr2:target ~ #nav li:hover > a {
    background-color: #aa889e;
    border-color: #aa889e;
}
#clr3:target ~ #nav li:hover > a {
    background-color: #8f88aa;
    border-color: #8f88aa;
}
#clr4:target ~ #nav li:hover > a {
    background-color: #88aaaa;
    border-color: #88aaaa;
}
#clr5:target ~ #nav li:hover > a {
    background-color: #88aa8a;
    border-color: #88aa8a;
}
#clr6:target ~ #nav li:hover > a {
    background-color: #aaa188;
    border-color: #aaa188;
}

Хак с чекбоксом

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

Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!

HTML

В файле index.html добавьте элемент checkbox перед элементом nav:

<input type="checkbox" id="checkbox">

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

CSS

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

#checkbox {
   display: none;
}

Это сердце кода:

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
   transition: all 0.5s;
}

Символ ~ является общим селектором следующего смежного элемента, который отделяет два селектора (#checkbox:checked и nav ul). А также соответствует второму элементу, только если он следует за первым. Когда чекбокс установлен, меню сдвигается вниз, потому что значение свойства max-height изменяется от 0 до большого числа.

Больше

Полноэкранное видеоМодальные боксыЛента новостейИндикатор прокруткиПрогресс-барыСкил-барПолзунки ДиапазонаВсплывающие подсказкиPop-апыСкладывающийся барКалендарьHTML вставкиСписок делЗагрузкаЗвездный рейтингРейтинг пользователяЭффект наложенияКонтактные фишкиКарточкиFlip-карточкиКарточка профиляКарточка продуктаОповещенияВызовПримечанияЛейблыКругиСтиль HRКупонСписок группыАдаптивный текстВырезанный текстСветящийся текстФиксированный FooterЛипкий элементРавная высотаClearfix (Чистый Float)Адаптивный FloatСнэк-барПолноэкранное окноРисование при прокруткеГладкая прокруткаФоновый градиент при прокруткеЛипкий заголовокСжатие заголовка при прокруткеТаблица ценПаралаксСоотношение сторонПереключатель Лайк/ДизлайкПереключатель Скрыть/ПоказатьПереключатель текстаПереключатель классаДобавить классУдалить классАктивный классВ виде дереваУдалить свойствоОффлайн обнаружениеНайти скрытый элементПеренаправить веб-страницуZoom при наведении мышиФлип боксЦентрировать по вертикалиПереход при наведении мышиСтрелкиФормы (фигуры)Ссылка для скачиванияЭлемент на всю высоту страницыОкно браузераПользовательский скроллбарВнешний вид устройстваЦвет заполнителяЦвет выделения текстаЦвет маркераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПечатная машинкаОсталось времени до определённой датыСообщения чатаPopup-окно чатаРазделенный экранОтзывыРаздел счётчиковСлайдшоу цитатЗакрываемые элементы спискаТипичные точки остановки устройстваПеретаскиваемый HTML элементJS медиа-запросыПодсветка синтаксиса кодаJS АнимацияПолучить элементы iframe

Как сделать меню в html

Рейтинг: 4.8/5 Оценили: 39

Для удобной навигации по сайту на всех страницах используют меню, чтобы пользователю было понятно, что и где у вас находится. Практически всегда в верхней части страницы (в шапке) располагают горизонтальное меню по разделам (категориям) сайта, а вертикальное меню прописывают в сайтбаре (в колонке) и используют для навигации по статьям.

Из статьи вы поймёте как сделать меню для сайта html, что для этого потребуется прописать, чтобы получилось горизонтальное и вертикальное меню на css, либо меню с выпадающим списком.

Как сделать меню на html

Для того, чтобы сделать меню (любое) мы будем использовать маркированный список, которому придадим непосредственно свой class и пропишем для этого класса свои параметры с необходимыми значениями.

К примеру, для создания меню мы используем список с классом class=»menu» (название класса любое, только латинские буквы), и код html будет выглядеть так:

Обязательные параметры и значения CSS

• margin: 0; — убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px;
• list-style-type: none; — убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.

Как сделать горизонтальное меню на CSS

И выглядеть это будет так:

Горизонтальное меню у нас готово, осталось придать ему красивый внешний вид.

Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color ( добавим фон для пункта меню ), и изменим вид ссылки.

Отображаться горизонтальное меню уже будет таким образом:

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

И для наглядности сделал пункты меню по центру, применив свойство text-align: center; , которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.

Кстати вы можете так же воспользоваться готовое меню на css и jQuery, которые вы можете там воочию посмотреть и бесплатно скачать.

Как сделать вертикальное меню на CSS

Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li <. параметр со значением display: block; (указывает на блочный элемент), что придаёт ему вертикальное отображение пунктов меню.

И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.

Давайте рассмотрим вертикальное меню CSS на примере:

Вот так вертикальное меню отобразится на странице:

• Первый пункт меню
• Второй пункт меню
• Третий пункт меню
• Четвёртый пункт меню

Как сделать выпадающее меню на CSS

Сделать выпадающее меню с помощью CSS довольно просто. Мы всего лишь добавим к существующему коду от вертикального меню несколько параметров, которые и будут отвечать за выпадающий список пунктов меню.

Обязательно запомните! Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li , где находится эта ссылка, прописать position: relative; , а для выпадающего меню position: absolute;

Давайте напишем html код для выпадающего меню на CSS.

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

• Первый пункт меню
• Второй пункт меню ⇒

• Первый подпункт
• Второй подпункт
• Третий подпункт ⇒

• Первая ссылка
• Вторая ссылка
• Третья ссылка
• Четвёртая ссылка

Четвёртый подпункт
Третий пункт меню ⇒

Первая ссылка
Вторая ссылка
Третья ссылка
Четвёртая ссылка
Четвёртый пункт меню

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

Посмотрите! Как сделав всего 3 изменения в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега <title>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

Создайте файл styles.css и подключите его в HTML-документе:

<link rel="stylesheet" href="styles.css">

Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.

Создание горизонтального выпадающего меню:

Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<header> <nav> <ul> <li><a href=»#»>Главная</a></li> <li>Галерея <ul> <li><a href=»#»>Машины</a></li> <li><a href=»#»>Горы</a></li> <li><a href=»#»>Компьютеры</a></li> </ul> </li> <li>О себе <ul> <li><a href=»#»>Имя</a></li> <li><a href=»#»>Аватарка</a></li> </ul> </li> </ul> </nav> </header>

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

Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.

CSS

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 27 28 29 30 31 32 33 34 35 36 37

html, body { margin; padding; }   nav > ul { displayflex; margin; width100%; background-colorgreen; }   nav > ul > li { margin-right20px; }   li { colorwhite; list-stylenone; font-size20px; }   li a { colorwhite; text-decorationnone; }   li > ul{ displaynone; positionabsolute; background-colortomato; padding; }   li:hover > ul{ displayblock; }

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

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

Последнее важное изменение, это при наведении мышкой на , внутри которого есть , он появлялся, вот что получилось

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

Примечание:

Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

nav > ul { displayflex; margin; width100%; height25px; background-colorgreen; }   li > ul{ positionabsolute; top40px; visibilityhidden; opacity; background-colortomato; padding; transition400ms; }   li:hover > ul{ visibilityvisible; top25px; opacity1; }

В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем и добавляем , для показа элемента, равный 25 пикселям и , для полной не прозрачности.

Также появилось свойство , для плавных переходов, мы задаём ему время перехода 400 миллисекунды.

Горизонтальное выпадающее меню на всю ширину

Большинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.

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

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

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

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

Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство «white-space:nowrap;» у селектора #menu1 ul li ul, и удалить его.

Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:

Скачать пример

Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.

Далее я покажу вам как можно добавить разделители в меню.

Как сделать вертикальное меню:

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

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<header> <h3>Header</h3> </header> <main> <nav> <ul class=»menu»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Игры</a></li> <li><a href=»#»>Продукты</a></li> </ul> </nav> <div class=»content»> <h1>Content</h1> </div> </main>

Тут всё понятно, единственное, что смущает, это тег , он нужен для обозначения, что внутри него будет меню навигации.

Примечание:

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

Теперь добавим в тег список , что бы сделать меню.

XHTML

1 2 3 4 5 6

<ul class=»menu»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Игры</a></li> <li><a href=»#»>Продукты</a></li> </ul>

Здесь не чего интересного нет, единственно, вместо решётки в атрибуте href, надо использовать ссылку на страницу, вот результат.

Как видите всё работает не так как нам надо, теперь с помощью CSS сделаем так, что бы меню стало с левого бока от контента.

CSS

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 27

header { borderblack2pxsolid; }   main nav { displayinline-block; width200px; borderblack2pxsolid; margin-right10px; padding10px20px; floatleft; }   main nav ul { padding; }   main nav ul li { list-style-typenone; }   main .content { displayinline-block; width500px; borderblack2pxsolid; floatleft; }

Как можете заметить для тега и с классом «content», используем свойство со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.

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

Примечание:

В современных проектах не используется блочно строчные элементы и , сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.

Вот результат.

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

Как сделать горизонтальное меню:

Теперь перейдём к самому интересном, это то как сделать горизонтальное меню в HTML и CSS,  суть примерно такая же, как и с первым случаем, но тут буду уже использовать FlexBox.

Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<header> <h3>Header</h3> <nav> <ul class=»menu»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Игры</a></li> <li><a href=»#»>Продукты</a></li> </ul> </nav> </header> <main> <div class=»content»> <h1>Content</h1> </div> </main>

Просто перенесли всё навигацию на верх, теперь изменим CSS.

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

header { borderblack2pxsolid; }   header nav { width600px; borderblack2pxsolid; margin-right10px; padding10px20px; }   header nav ul { displayflex; justify-contentspace-around; padding; }   header nav ul li { list-style-typenone; }   main .content { borderblack2pxsolid; }

Тут самое важное, это то, что для работы с FlexBox, нужно сделать значение свойства , «flex», что и сделали для тега. Дальше, после этого идёт свойство , которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат

Дальше, после этого идёт свойство , которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат.

Как видите всё работает так как надо, единственное, выглядит не очень, но суть этой статье была в том, чтобы показать как со всем этим работать, а красивый дизайн, вы уже и сами сделаете.

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

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

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

<ul class=»menu»>

<li><a href=»#html»>1</a></li>

<ul class=»second»>

<li><a href=»basic»>1.1</a></li>

<li><a href=»intensive»>1.2</a></li>

</ul>

<li><a href=»#menu»>2</a></li>

<li><a href=»#sub-menu»>3</a></li>

<li><a href=»#fixed»>4</a></li>

</ul>

В css .menu li заменяется на «.menu > li», чтобы внутренние элементы стали вертикальными. К родительскому селектору добавляют относительное позиционирование, при котором элемент сдвигается от границ родительского блока, а к дочернему — абсолютное (полностью убирается из потока и координируется от ближайшего элемента, а если таких нет, то от границ браузера). Элементы с относительным позиционированием могут содержать внутри себя дочерние элементы с абсолютным позиционированием. Это значит, что при движении блока с position: relative закрепленные части останутся на своих местах внутри него.

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

.menu > li {

display: inline;

position: relative;

}

.menu .second {

position: absolute; (привязка подменю к родительскому блоку)

display: none; (скрыть отображение)

}

.menu > li:hover .second { (применяется псевдокласс hover для появления списка по наведению)

display: block;

}

Результатом будет небольшое, аккуратное меню.