Меню стили css: Коллекция потрясающих меню для сайта | html, css и javascript (jQuery)

Содержание

Простое и красивое горизонтальное выпадающее меню на CSS и HTML — Технический блог

Предлагаю, вашему вниманию простое и при этом красивое двухуровневое выпадающее горизонтальное меню на чистых CSS и HTML. Его код я собрал по крупицам и лично адаптировал при подготовке новой темы WordPress.

У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:

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

Код горизонтального выпадающего меню выглядит так, это реальный пример взятый с одного из моих сайтов:


<nav role="navigation">
<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="#">О блоге</a>
    <ul>
      <li><a href="/about">Об авторе</a></li>
      <li><a href="/history">История блога</a></li>
      <li><a href="/privacy-policy">Политика конфиденциальности</a></li>
      <li><a href="/disclaimer">Отказ от ответственности</a></li>
    </ul>
  </li>
  <li><a href="/sitemap">Карта сайта</a></li>
  <li><a href="/contact">Обратная связь</a></li>
</ul>
</nav>

Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.

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


/*| Navigation |*/

nav{
background: #334; /* Задаем основной фон меню */
padding: 0 3%; /* Задаем внутренние отступы */
}

nav ul {
list-style: none; /* Убираем маркер для элементов списка */
}

nav ul li {
display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */
}

nav ul li a {
display:block; /* Настраиваем оформление пунктов меню */
padding: 15px 20px;
font-size: .9em;
color: #eee;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-top: 1px solid #445;
}

nav ul li:hover {
background: #445; /* Меняем фон пункта меню при наведении указателя мыши */
}

nav ul li ul {
display: none; /* Прячем пункты выпадающего блока меню */
position:absolute;
background: #334; /* Задаем фон выпадающего блока меню */
}

nav ul li:hover ul {
display:block; /* Отображаем подменю при наведении мыши */
}

nav ul li ul li {
display:block; /* Выстраиваем по вертикали пункты выпадающего меню */
}

Выводы о реализации меню на CSS и HTML

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

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

30 горизонтальных меню для сайта

1. Темно синее CSS меню.

Меню в темно синем стиле 100% ширины.

Демо
Скачать

2. Стильное зеленое меню.

Меню в зеленом стиле подойдет для многих цветов фона.

Демо
Скачать

3. Глянцевое меню.

Чёрное меню с оранжевым эффектом при наведении и зеркальным отблеском, применяется на белом фоне.

Демо
Скачать

4. Стильное коричневое меню.

Меню в коричневом цвете, затемняющееся при наведении кусора.

Демо
Скачать

5. Черное глянцевое меню.

Черное меню с глянцевым эффектом на белом фоне.

Демо
Скачать

6. Округлое синее меню.

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

Демо
Скачать

7. Разноцветное меню

Разноцветное меню с эффектом разгибания уголка при наведении.

Демо
Скачать

8. Шоколадный стиль меню.

Меню в шоколадном стиле с эффектом выпуклости при наведении.

Демо
Скачать

9. Блейзер меню.

Блейзер меню, с интересным эффектом при наведении которое, может быть использовано на любом светлом фоне.

Демо
Скачать

10. Flasy меню.

Черное меню с зеленым эффектом свечения при наведении курсора.

Демо
Скачать

11. Orcom меню.

Меню с удивительным эффектом при наведении курсора, ширина меню установлена в 700 px.

Демо
Скачать

12. Oplaz Css меню.

Css меню с простым эффектом при наведении курсора, шириной 700 px и зеркальным эффектом.

Демо
Скачать

13. Quaza CSS меню.

Темно красное меню, длиной 700 px с простым эффектом при наведении и оранжевым активным пунктом.

Демо
Скачать

14. Flosy CSS меню.

CSS меню с эффектом рамки при наведении на пункт, меню сделано с применением одного изображения.

Демо
Скачать

15. Vonso CSS меню.
CSS меню с красивым фоном.

Демо
Скачать

16. Razer меню.

Простое меню с двумя различными эффектами при наведении и для активного пункта меню.

Демо
Скачать

17. Brány CSS меню.

Простое меню с закругленными углами.

Демо
Скачать

18. Capzl CSS меню.

Глянцевое горизонтальное меню с зеркальным отражением.

Демо
Скачать

19.

Skin CSS меню.

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

Демо
Скачать

20. Nozml меню.

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

Демо
Скачать

21. Rapak CSS меню.

Горизонтальное меню с красивым фоном и эффектом рамки при наведении курсора на пункт.

Демо
Скачать

22. Czoo CSS меню.

Простое горизонтальное меню 100%, ширины с эффектом при наведении курсора.

Демо
Скачать

23. Sapy CSS меню.

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

Демо
Скачать

24. Голубое CSS меню.

Меню с красивым фоном, имеющим изогнутый вид.

Демо
Скачать

25. Cremy CSS меню.

Меню с затемненными уголками пунктов, может быть использовано на светлых и темных фонах.

Демо
Скачать

26. Sloon CSS меню.

Светлое меню с оранжевыми активными пунктами.

Демо
Скачать

27. Artine CSS меню.

Креативное горизонтальное меню.

Демо
Скачать

28. Woody CSS меню.

Меню с необычным оформлением пунктов.

Демо
Скачать

29. Серебристое меню.

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

Демо
Скачать

30. Глянцевое меню.

Черное глянцевое меню с зеркальным отражением и синим эффектом при наведении курсора.

Демо
Скачать

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

.cd-accordion-menu {

width: 90%;

max-width: 600px;

background: #4d5158;

margin: 4em auto;

box-shadow: 0 4px 40px #70ac76;

}

.cd-accordion-menu ul {

/* by default hide all sub menus */

display: none;

}

. cd-accordion-menu li {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.cd-accordion-menu input[type=checkbox] {

/* hide native checkbox */

position: absolute;

opacity: 0;

}

.cd-accordion-menu label, .cd-accordion-menu a {

position: relative;

display: block;

padding: 18px 18px 18px 64px;

background: #4d5158;

box-shadow: inset 0 -1px #555960;

color: #ffffff;

font-size: 1.6rem;

}

.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {

background: #52565d;

}

.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {

/* icons */

content: »;

display: inline-block;

width: 16px;

height: 16px;

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

}

. cd-accordion-menu label {

cursor: pointer;

}

.cd-accordion-menu label::before, .cd-accordion-menu label::after {

background-image: url(../img/cd-icons.svg);

background-repeat: no-repeat;

}

.cd-accordion-menu label::before {

/* arrow icon */

left: 18px;

background-position: 0 0;

-webkit-transform: translateY(-50%) rotate(-90deg);

-moz-transform: translateY(-50%) rotate(-90deg);

-ms-transform: translateY(-50%) rotate(-90deg);

-o-transform: translateY(-50%) rotate(-90deg);

transform: translateY(-50%) rotate(-90deg);

}

.cd-accordion-menu label::after {

/* folder icons */

left: 41px;

background-position: -16px 0;

}

.cd-accordion-menu a::after {

/* image icon */

left: 36px;

background: url(../img/cd-icons.svg) no-repeat -48px 0;

}

.cd-accordion-menu input[type=checkbox]:checked + label::before {

/* rotate arrow */

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

}

. cd-accordion-menu input[type=checkbox]:checked + label::after {

/* show open folder icon if item is checked */

background-position: -32px 0;

}

.cd-accordion-menu input[type=checkbox]:checked + label + ul,

.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {

/* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/

/* show children when item is checked */

display: block;

}

.cd-accordion-menu ul label,

.cd-accordion-menu ul a {

background: #35383d;

box-shadow: inset 0 -1px #41444a;

padding-left: 82px;

}

.no-touch .cd-accordion-menu ul label:hover, .no-touch

.cd-accordion-menu ul a:hover {

background: #3c3f45;

}

.cd-accordion-menu > li:last-of-type > label,

.cd-accordion-menu > li:last-of-type > a,

.cd-accordion-menu > li > ul > li:last-of-type label,

. cd-accordion-menu > li > ul > li:last-of-type a {

box-shadow: none;

}

.cd-accordion-menu ul label::before {

left: 36px;

}

.cd-accordion-menu ul label::after,

.cd-accordion-menu ul a::after {

left: 59px;

}

.cd-accordion-menu ul ul label,

.cd-accordion-menu ul ul a {

padding-left: 100px;

}

.cd-accordion-menu ul ul label::before {

left: 54px;

}

.cd-accordion-menu ul ul label::after,

.cd-accordion-menu ul ul a::after {

left: 77px;

}

.cd-accordion-menu ul ul ul label,

.cd-accordion-menu ul ul ul a {

padding-left: 118px;

}

.cd-accordion-menu ul ul ul label::before {

left: 72px;

}

.cd-accordion-menu ul ul ul label::after,

.cd-accordion-menu ul ul ul a::after {

left: 95px;

}

@media only screen and (min-width: 600px) {

.cd-accordion-menu label, .cd-accordion-menu a {

padding: 24px 24px 24px 82px;

font-size: 1. 9rem;

}

.cd-accordion-menu label::before {

left: 24px;

}

.cd-accordion-menu label::after {

меню » Скрипты для сайтов

19.08.2018 4 030 Codepen

Боковое выезжающее меню

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

19.02.2018 6 832 Скрипты / Menu & Nav

Эффект зачеркивания при наведении в меню

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

21.12.2017 15 112 Скрипты / Menu & Nav

Slinky — адаптивное многоуровневое меню

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

11.

09.2016 4 783 Скрипты / Menu & Nav

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

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.

19.04.2016 8 120 Скрипты / Menu & Nav

Slide out sidebar меню

Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.

24.12.2015 6 188 Скрипты / Menu & Nav

Mega dropdown меню

Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.

31.07.2014 11 748 Скрипты / Accordion

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

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

30.07.2014 4 168 Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

25.06.2014 5 089 Скрипты / Menu & Nav

Диагональное меню на CSS

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

23.01.2014 3 442 Скрипты / Menu & Nav

Lavalamp меню на CSS3

Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.

03.01.2014 3 963 Скрипты / Menu & Nav

Анимированный border с меню

Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.

03.07.2013 13 379 Скрипты / Menu & Nav

Адаптивное много-уровневое меню

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css

Фиксированное боковое меню на чистом CSS

В этом посте мы сделаем фиксированное боковое информационное меню. Для реализации иконок подключим шрифт FontAwesome.

Шаг 1. Подключаем шрифт с иконками, создаем пустой документ

Подробную инфу о работе со шрифтом FontAwesome и ссылку на сам проект вы можете найти в моем посте – вот ссылка.

Вот код странички с подключенными файлами:


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Фиксированное боковое меню</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>

</body>
</html>

Шаг 2. Добавляем HTML разметку фиксированного меню

Вот и сам код разметки нашего фиксированного меню:


  <nav>
    <ul>
      <li>
        <i></i>
      </li>
      <li>
        <i></i>
      </li>
      <li>
        <i></i>
      </li>
    </ul>
  </nav>

Как вы заметили я применил тег <nav> – это элемент разметки html5, если вы используете html4, то можете заменить этот тег на обычный <div> или вовсе его убрать, а идентификатор перенести к списку, вот так:


  <ul>
    . ..
  </nav>

Шаг 3. Добавляем HTML разметку подменю


<b></b>
<ul>
  <li><a href="">Текст вашей ссылки</a></li>
  <li><a href="">Текст вашей ссылки</a></li>
  <li><a href="">Текст вашей ссылки</a></li>
</ul>

Подменю как представляет собой такой же список как и основное меню, плюс тег <b class=”fa fa-caret-left”></b>, который выводит иконку “каретки слева”, выполняет функцию некого “хвостика”, более подробнее на картинке ниже 🙂

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

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

Шаг 4. Прописываем стили для фиксированного бокового меню

Код стилей я постарался прокомментировать в местах где это имеет значение. В целом все не прокомментированные моменты относятся к банальной стилизации фона, цвета и т. д.


#sidebar-menu {
	position: fixed; /* фиксируем наше меню */
	top: 200px; /* положение меню относительно верхнего края браузера */
	left: 0; /* прилипили меню к левому краю */
	padding: 10px;
	background: #323A45;
	color: #FFF;
	border-radius: 0 8px 8px 0;
}
#sidebar-menu li {
	position: relative;
	cursor: pointer;
}
#sidebar-menu li i {
	/* Задаем иконкам фиксированный размер, height и line-height должны быть одинаковыми */
	width: 27px;
	height: 27px;
	line-height: 27px;
	border-radius: 4px;
	background: #3CB7E7;
	text-align: center;
}

#sidebar-menu li+li {margin-top: 4px;}
#sidebar-menu b {
	display: none;
	position: absolute;
	/* позиция относительно левого края равна ширине эл-та li */
	left: 27px;
	top: 0;
	height: 27px;
	/* ширина равна зазору между блоком меню и подменю */
	width: 16px;
	line-height: 27px;
	background: transparent;
	color: #323A45;
	/* саму иконку позиционируем вправо, чтобы визуально она смотрелась вместе с блоком подменю */
	text-align: right;
}

#sidebar-menu li > ul {
	display: none;
	position: absolute;
	top: -10px;
	left: 42px;
	width: 120px;
	padding: 10px;
	background: #323A45;
	border-radius: 8px;
}
#sidebar-menu li:hover b,
#sidebar-menu li:hover ul {display: block;}
#sidebar-menu li a {
	display: block;
	padding: 4px 8px;
	border-radius: 4px;
	color: #FFF;
	-webkit-transition: all . 2s;
	   -moz-transition: all .2s;
	    -ms-transition: all .2s;
	     -o-transition: all .2s;
	        transition: all .2s;
}
#sidebar-menu li a:hover {
	display: block;
	background: #3CB7E7;
}

Если по стилизации у вас есть вопросы пишите в комментарии к этому посту, с удовольствием отвечу.
Вот и все! Фиксированное боковое меню готово 🙂

Подменю на CSS

Вы здесь: Главная — CSS — CSS Основы — Подменю на CSS

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

Привожу сразу CSS-код:

* html ul li {

  float: left;

}

* html ul li a {

  height: 1%;

}

ul {

  border-bottom: 1px solid #000;

  list-style: none;

  margin: 0;

  padding: 0;

  width: 100px;

}

ul li {

  position: relative;

}

ul li a {

  display: block;

  border: 1px solid #000;

  border-bottom: 1px;

  padding: 5px;

  text-decoration: none;

}

li ul {

  display: none;

  left: 99px;

  position: absolute;

  top: 0;

}

li:hover ul {

  display: block;

}

Самое главное здесь — это селектор «li:hover ul«. Фактически, он и показывает содержимое меню. По умолчанию, оно «display: none«, а при наведении курсора на пункт меню, подменю становится: «display: block«, то есть видимым. Это самое главное. Также в первых двух селекторах (которые со *) идёт CSS-хак для IE, иначе без него в этом браузере ничего работать не будет. Всё остальное — это внешний вид, который, безусловно, можно менять.

Привожу и HTML-код:

<ul>

  <li>

    <a href="#">Главная</a>
  </li>

  <li>

    <a href="#">Меню 1</a>

    <ul>

      <li>

        <a href="#">Подменю 1</a>

      </li>

      <li>

        <a href="#">Подменю 2</a>

      </li>

      <li>

        <a href="#">Подменю 3</a>

      </li>

    </ul>

  </li>

  <li>

    <a href="#">Меню 2</a>

    <ul>

      <li>

        <a href="#">Подменю4</a>

      </li>

      <li>

        <a href="#">Подменю 5</a>

      </li>

      <li>

        <a href="#">Подменю 6</a>

      </li>

      <li>

        <a href="#">Подменю7</a>

      </li>

      <li>

        <a href="#">Подменю 8</a>

      </li>

    </ul>

  </li>

</ul>

Если внимательно вдуматься в эту структуру, то становится всё очень понятно. Тег ul — создаёт меню. Если ul находится внутри другого ul, то это уже подменю. А тег li отвечает за конкретный пункт меню.

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

Создано 22.06.2011 14:18:07
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

16 CSS Mobile Menus

Коллекция специально подобранных бесплатных HTML и CSS мобильных меню примеров кода. Обновление коллекции за октябрь 2018 г. 1 новый предмет.

Меню CSS
Круговое меню CSS
Выпадающие меню CSS
Боковые меню CSS
Горизонтальные меню CSS
Полноэкранные меню CSS
Скользящие меню CSS
CSS Переключить меню
Меню CSS вне холста

Автор

Джеффри Крофте
3 августа 2018 г.