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

Содержание

Тег | htmlbook.ru

	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
HTML4	3.0+	1.0+	3.5+	1.0+	1.0+	1.1+	1.0+
HTML5

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.

В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

Синтаксис

HTML	`<menu> <li>пункт меню</li> <li>пункт меню</li> </menu>`
HTML5	`<menu> ... </menu>`

Атрибуты

label: Устанавливает видимую метку для меню.
type: Задает тип меню.

Закрывающий тег

Обязателен.

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 применение тега <menu> корректно.

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MENU</title>
 </head>
 <body>
  <p><strong>В этом выпуске:</strong></p>
  <menu>
   <li>Русская кухня. Уха бурлацкая</li>
   <li>Украинская кухня. Вареники</li>
   <li>Молдавская кухня. Паприкаш</li>
   <li>Кавказская кухня. Суп-харчо</li>
   <li>Прибалтийская кухня. Вертиняй</li>
  </menu>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид списка, созданного с помощью тега <menu>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег MENU</title>
 </head>
 <body>
  <menu type="toolbar">
   <li>
    <menu label="Файл">
      <button type="button">Новый...</button>
      <button type="button">Открыть...</button>
      <button type="button">Сохранить</button>
    </menu>
   </li>
   <li>
     <menu label="Правка">
      <button type="button">Копировать</button>
      <button type="button">Вырезать</button>
      <button type="button">Вставить</button>
     </menu>
    </li>
  </menu>
 </body>
</html>

Создание меню html / css

Основы верстки

Чаще всего меню создается на основе не упорядоченных списков ul. В каждый пункт li вкладывается гиперссылка a

Можно создавать меню и на основе блоков div, таблиц table или списков определений dl.
Но традиционной является конструкция ul.

Код простейшего меню будет выглядеть так:

<ul>
  <li><a href="#/">пункт 1</a></li>
  <li><a href="#/">пункт 2</a></li>
  <li><a href="#/">пункт 3</a></li>
  <li><a href="#/">пункт 4</a></li>
  <li><a href="#/">пункт 5</a></li>
</ul>

Примечание

В процессе разработки удобно указывать адрес гиперссылки — #/. Во-первых, она никуда не ведет, а во-вторых — не происходит перехода к началу страницы.

Целью гиперссылки будет соответствующая страница вашего сайта или внешняя ссылка. Адрес внутренней страницы может быть как абсолютным, так и относительным. Внешней ссылки — только абсолютный. (Если забыли — смотрите Абсобютные и относительные ссылки).

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

Поэтому предварительно нужно создать файл, например my-menu.css, и подключить его.

<!-- Подключение таблицы стилей -->
 
<!DOCTYPE html>
<html>
<head>
     ...
     <title>Создание меню</title>
     <link rel="stylesheet" href="css/MAIN.css" type="text/css" />
     <link rel="stylesheet" href="css/my-menu.css" type="text/css" />
     ...
</head>
<body>
...
</body>
</html>

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

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

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

/* Не желательно! */
ul li a {color: #f00;}

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

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

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

Каким тегам нужно присваивать классы

Хороший вопрос. Для начала, неплохо создать дополнительный контейнер-обертку и присвоить класс ему.

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

div, а nav, то верстка будет более семантической (осмысленной) и удобной для поисковых систем (ПС), что является несомненным плюсом. Второй класс присваиваем тегу ul.

<nav>
  <ul>
    <li><a href="#/">пункт 1</a></li>
    <li><a href="#/">пункт 2</a></li>
    <li><a href="#/">пункт 3</a></li>
    <li><a href="#/">пункт 4</a></li>
    <li><a href="#/">пункт 5</a></li>
  </ul>
</nav>

Почему именно так?

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

ul, а класс .my_menu отвечает только за разметку меню и никакого отношения к содержащему контейнеру иметь не должен.

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

Какие имена должны быть у классов

Осмысленные. В идеале, любое имя класса должно давать представление об объекте и назначении. В приведенном выше примере используются классы nav.menu_color и

ul.my_menu.

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

Внимание!

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

Имеено по-этому я выбрал класс .my_menu, так как на сайте уже есть класс .menu со своими стилями.

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

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

Например, за цветовое оформление у нас отвечает класс .menu_color

/* === Группа цветового оформления === */
 
/* Цвет фона менд */
.menu_color {
  background: gray;
}
/* Оформление пункта меню */
.menu_color > ul > li > a {
  background: transparent;
  color: #f5f5f5;
}
...
/* === Группа разметки основного меню === */ 
 
/* Сброс и установка стилей по умолчанию */
.my_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Разметка для пункта меню */
.my_menu li a {
  display: block;
  margin: 0;
  padding: 12px 20px;
  text-decoration: none;  
}

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

При необходимости, для тега nav также можно добавить дополнительный класс, чтобы не залезать на территорию «цветового оформления» …

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

Простое вертикальное меню

Исходный html-код меню будет выглядеть так:

<nav>
  <ul>
    <li><a href="#/">пункт 1</a></li>
    <li><a href="#/">пунтк 2</a></li>
    <li><a href="#/">пункт 3</a></li>
    <li><a href="#/">пункт 4</a></li>
    <li><a href="#/">пункт 5</a></li>
  </ul>
</nav>

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Файл my-menu.css

/* Убираем маркеры и отступы */
.my_menu {
  list-style:none;
  margin:0;
  padding:0;
}
.my_menu li {
  margin:0;
  padding:0;
  position:relative;
}
/* Общие правила для пунктов меню */
.my_menu li a {
  display:block;
  margin:0;
  padding:12px 20px;
  text-decoration: none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
  cursor: default;
}

Цветовое оформление

Примечание

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

/* === Цветовое оформление menu_color === */
.menu_color {
  background:#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
  color:#999;
  background: rgba(0, 0, 0, 0);
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
  color:#fff;
  background:rgba(0, 0, 0, 0.4);
}

Пояснения:

Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция .menu_color > ul > li > a позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
Использование прозрачности при задании цвета фона — background: rgba(0, 0, 0, 0.1). Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно.

Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.

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

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

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.

HTML-код 2-х уровневого меню:

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul>
                <li><a href="#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

Добавлены классы li.parent — родительский тег, содержащий подменю, и ul.sub-menu — вложенный список выпадающего меню.

Цветовое оформление

/* Оформление sub-menu */
.menu_color .sub-menu {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
  color: #555;
  background: rgba(0, 0, 0, 0);
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
  color: #fff;
  background: #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #ddd;
  padding-left: 40px  /* Добавляем отступ для подпунктов */
}

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

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского li.parent. (Именно для этого при сбросе и установке для него было задано position: relative;)

/*Общие*/
.my_menu .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  min-width: 200px;
  z-index: 9999;
}

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока .sidebar_left (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет).

/* Вывод */
.my_menu .parent:hover .sub-menu {
  display: block;
  top: 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left: 100%;
  margin-left: -10px;
}

Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу nav.menu_color.sidebar_left.

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

/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right: 100%;
  left: auto;
  margin-right: -5px;
}

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

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

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

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

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

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

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

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

/* Переопределение sub-menu*/
.my_menu .sub-menu {
  display: block; /* переопределено */
  position: absolute;
  top: 0;
  width: 200px;
  z-index: 9999;
 
  /* Добавить */
  opacity: 0;
  -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;
}

Раздвижное меню-аккордеон

Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по hover.

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

Аккордеон должен раскрываться по click, а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS…

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

Добавлен класс my_accordion к классу родительского контейнера, а класс .sub-menu заменен на .sub-accordion-menu. Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

/* === Группировка классов === */
 
/* Убираем маркеры и отступы */
.my_menu, .sub-menu, 
.sub-accordion-menu {
  list-style:none;
  margin:0;
  padding:0;
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

После этого добавим стили, для закрытого и раскрытого аккордеона:

/* === Закрытый ===*/
.sub-accordion-menu {
  display: block;
  position: static;
  width: auto;
  overflow: hidden;
  border: none;
  margin: 0!important; 
  max-height: 0;   /* Скрываем выпадающее подменю */
  transition: max-height 1s;  /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
  max-height: 1000px;
}
.sub-accordion-menu > li > a {
  padding-left: 40px;  /* Добавляем отступ для подпунктов */
}

Примечание.
Почему было использовано свойство max-height, а не height? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения height: auto — анимация не срабатывает.

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

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

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

В итоге наше меню будет выглядеть так:

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

<nav>
  <ul>
    <li><a href="#/">punkt 1</a></li>
    <li><a href="#/">dropdown</a>
      <div>
        <ul>
          <li><a href="#/">sub punkt 1</a></li>
          <li><a href="#/">sub punkt 2</a></li>
        </ul>
      <div>
    </li>
    <li><a href="#/">punkt 3</a></li>
    <li><a href="#/">active</a></li>
    <li><a href="#/">punkt 5</a></li>
  </ul>
</nav>

Разметка

/* === Разметка основного меню === */
.hz-bar ul {
 list-style: none;
 margin:0;
 padding:0;
}
.hz_menu > li {
 float: left;
 margin:0;
 padding:0;
 position:relative;
}
.hz_menu li a {
 display:block;
 margin:0;
 padding:15px 20px;
 text-decoration: none;
}

Что было сделано:

Сброс стилей по умолчанию для тега ul
Создание горизонтального меню, путем присвоения тегам li, содержащим пунткы основного меню, свойства float: left
Установка отступов для пунктов меню

Пояснения:

Конструкция .hz_menu > li распространяется только на пункты основного меню и не затрагивает выпадающее, в то время как .hz_menu li a задается для всех пунктов. Некоторые свойства, специфичные для подменю, будут переопределены в дальнейшем.

Разметка выпадающего меню

/* === Разметка выпадающего подменю === */
.dropdown_menu {
 display: block;
 position: absolute;
 left: -3000px;
 top: 100%;
}
.dropdown_menu > ul {
 border: 1px solid;
 margin-top: 10px;  /* отступ от основного меню */
 padding: 10px 1px;
 min-width: 140px;
 opacity: 0;
 transition: opacity .5s; /* анимация прозрачности */
}
.dropdown_menu li a {
 white-space: nowrap; /* если не очень длинные заголовки */
 z-index: 9999;
 padding: 10px 20px;
}
.parent_dropdown:hover .dropdown_menu {
 left: 0px;
}
.parent_dropdown:hover .dropdown_menu ul {
 opacity: 1;
}

Рассмотрим некоторые особенности:

Как было видно из html-кода, выпадающее меню обернуто в дополнительный контейнер div.dropdown_menu. Для чего? В принципе, можно вполне обойтись и без него, но эта обертка дает некоторые дополнительные возможности оформления. В частности, возможность задать отступ от основного меню.
Если задать отступ непосредственно для тега ul без обертки, при перемещении курсора от основного пункта к подпункту hover-эффект прервется и подменю пропадет … Дополнительный контейнер обеспечивает, в данном случае, отсутствие разрыва.
Для подпункт определено правило white-space: nowrap. Дело в том что абсолютно позиционированное подменю имеет максимальную ширину родительского пункта, и, соответственно, текст подпунктов будет переноситься на новую строку. Это не очень удобно при коротких названиях основных пунктов.
Данное правило предотвращает перенос. Как альтернатива (дополнение), минимальная ширина подменю была задана явно.

Оформление

Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.

Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:

Теги li, которым присвоено float: left, выпадают из основного потока, их для основного контейнера как-бы не существует, поэтому он «схлопывается» и имеет высоту 0. Соответственно, никакого цветового оформления мы не увидим.

Решение

/* Предотвращаем схлопывание */
.hz-bar:after {
 content: '';
 display: table;
 clear: both;
}

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

/* === Оформление меню === */
.menu_bordo {
 background: #7D0000;
}
.menu_bordo .hz_menu > li > a {
 color: #DBE6B7;
}
.menu_bordo .hz_menu > li > a:hover {
 color: #fff;
}
.menu_bordo .hz_menu .active a{
 box-shadow: inset 0 15px 15px rgba(0, 0, 0, 0.2);
 color: #fff;
 cursor: default;
}

Здесь все достаточно очевидно. Единственное, cursor: default, следовало бы перенести в разметку, чтобы не привязывать к классу цветового оформления.

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

/* === Оформление выпадающего подменю === */
.menu_bordo .dropdown_menu > ul {
 background: #fff;
 border-color: #ddd;
}
.menu_bordo .dropdown_menu > ul > li > a {
 color: #555;
}
.menu_bordo .dropdown_menu > ul > li > a:hover {
 background: #7D0000;
 color: #fff;
}

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

Дополнительно

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

/* Дополнительно. Разделители пунктов + маркер */
.hz_menu > li + li > a {
 border-left: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15);
}
.parent_dropdown > a:after {
 display: inline-block;
 padding: 1px 0 0 3px;
 content: "\25BC ";
 font-size: 10px;
 vertical-align: top;
}

Здесь вы можете скачать Код примера горизонтального меню

CSS меню для начинающих / Хабр

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

Фон для меню

Для начала создадим background, я конечно не мастер PhotoShop’a, но вот что у меня получилось за пару минут:

Графические кнопочки

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

HTML код

Закончили строить из себя дизайнеров, пора начинать кодить — создадим не нумерованный список — :

элементу <ul> присвоеим id=«menu»
каждой ссылке <a> присвоим уникальное имя класса
Внутрь тэга <a> закинем пустой тэг <span> (понадобиться для реализации подсказок к ссылкам)

<ul id=«menu»>
<li><a href=»#» class=«home»>Home <span></span></a></li>
<li><a href=»#» class=«about»>About <span></span></a></li>
<li><a href=»#» class=«rss»>RSS <span></span></a></li>
</ul>

CSS код

#menu
Для начала убираем padding и margin у меню, list-style выставляем в none, position указываем как relative. Указываем высоту и ширину меню (см. размеры menu-bg.jpg). Добавляем фоновое изображение.

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}

#menu span

Для элементов span параметр display выставляем в none (по умолчанию не будут отображаться). Так же выставляем position как absolute.

#menu span {
display: none;
position: absolute;
}

#menu a

Для ссылок нам необходимо спрятать текст, для этого параметру text-indent присваиваем негативное значение (-900%), и текст будет скрыт.

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

#menu a:hover

Теперь мы хотим сдвинуть картинку на линке по событию mouseover, для этого добавим в CSS следующий код:

#menu a:hover {
background-position: left bottom;
}

#menu a:hover span

Так же по событию mouseover необходимо отобразить подсказку

#menu a:hover span {
display: block;
}

#menu .home

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

#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 96px;
}

#menu .home span

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

#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}

#menu .about

Копируем всё что мы сделали для элемента .home и переименовываем в .about. Подгоняем размер и расположение, так же заменяем фон.

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}

#menu .rss

Повторим для .rss

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

Всё в одном

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}

#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

Это всё, протестировать меню можете тут, а скачать пример тут.

Вольный перевод: http://www.webdesignerwall.com/tutorials/advanced-css-menu/

Кросспост: CSS меню в стиле Web 2.0

Создание меню на CSS – руководство для новичков

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

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

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

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

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

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

Разновидности меню в CSS

Существует сразу несколько видов и типов CSS меню:

Главное меню. Это список определённых ссылок на ключевые разделы веб-сайта.
Дополнительное меню. Такое меню имеет иерархическую структуру и бывает трёх типов:
- Выпадающее меню. Раскрывается при наведении курсора мыши на пункт;
- Всплывающее меню сайта. Раскрывается при клике на определённом пункте;
- Статическое дополнительное меню для CSS. Древовидная структура, представленная в уже раскрытом виде.

Как создать меню в CSS?

Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.

Код горизонтального меню прописывается следующим образом:

<head>
<title>Горизонтальное меню сайта</title>

<style type="text/css">
.navigation {
   list-style: none; /* Отключение отображения маркеров. */
}
.navigation li {
   float: left; /* Выстраивание элементов списка в один ряд. */
   margin-right: 1px; /* создание отступов для того, чтобы не сливались пункты меню. */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Указание типа шрифта. */
   font-size: 14px; /* Размер текста в ссылках. */
}
.navigation li a {
   display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   padding: 15px 20px;  /* Внутри блочные отступы. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Цвет блока при наведении курсора. */
   color: #6b6b6b;  /* Цвет текста при наведении курсора. */
}
</style>
</head>
<body>
<ul> 
   <!-- Описание ссылок в меню и сами ссылки. -->
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Шаблоны</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Скрипты</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Видео</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Форум</a></li>
</ul>
<body>
</body>
</html>

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

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

<head>
<title>Вертикальное меню сайта</title>
<style type="text/css">
.navigation {
   list-style: none; /* Отключение отображения маркеров. */
   width: 120px;  /* Ширина меню. */
}
.navigation li {
   margin-top: 5px; /* Отступ между блоками по высоте, необходимый для того чтобы пункты меню не сливались */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Тип шрифта пунктов меню */
   font-size: 14px; /* Размер текста меню */
}
.navigation li a {
   display: block; /* Изменение отображения на блочное для того, чтобы иметь возможность задать внутренние отступы.  */
   padding: 4px 15px;  /* Отступы внутри блоков. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Цвет фона при наведении курсора мыши */
   color: #6b6b6b;  /* Цвет текста при наведении курсора мыши */
}
</style>
</head>
<body>
<!-- Описание ссылок в меню и сами ссылки. -->
<ul> 
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Шаблоны</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Скрипты</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Видео</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Форум</a></li>
</ul>
<body>
</body>
</html>

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

Руководствуясь всеми вышеперечисленными принципами, приведём код для простого выпадающего меню:

<ul>
  <li><a href="https://www.internet-technologies.ru/news">Новости</a></li>
  <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</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="https://www.internet-technologies.ru/templates/">Шаблоны</a>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
    </ul>
  </li>
  <li><a href="https://www.internet-technologies.ru/books">Книги</a></li>
  <li><a href="https://www.internet-technologies.ru/scripts">Скрипты</a></li>
  <li><a href="https://www.internet-technologies.ru/lessons">Видео</a></li>
  <li><a href="http://talk.internet-technologies.ru">Форум</a></li>
</ul>

<style type="text/css">	

#menu {
  background: #0db5b5;
  width: 60%;
  padding:1;
  text-align: center;
  float:left;
  font-family: Verdana, Arial, Helvetica, sans-serif; 
}
#menu a {
  color: #3f3f3f;
  text-decoration: none;
}
#menu a:hover {
  color: #6b6b6b;
}
#menu ul {
  padding:0;
  margin:0;
}
#menu li {
  list-style: none;
  padding: 0 15px 0 0;
  width:100px;
  margin: 0 auto;
  float:left;
  line-height: 50px;
}
#menu li ul { 
  position:absolute;
  display: none;
} 
#menu li ul li {
  float: none;
  display: inline;
  width:100px;
  line-height:35px;
}
#menu li ul li:hover {
  background: #c392b;
}
#menu li:hover ul {
  display:block;
}
#menu li ul li { 
  display: block; 
  background:#92d3d3;
}
</style>

Получаем такое выпадающее меню:

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

Желаем удачи!

телеграм канал. Подпишись, будет полезно!

Простое горизонтальное меню на CSS

.main-menu {

list-style: none;

margin: 0;

padding: 0;

margin-top: 30px;

font-family: ‘Montserrat’, sans-serif;

/* Для выравнивания меню по центру

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.main-menu > li {

display: inline-flex;

}

.main-menu > li + li {

margin-left: 20px;

}

.main-menu > li > a {

padding: 0 0 20px 0;

position: relative;

text-transform: uppercase;

color: #000;

font-weight: bold;

letter-spacing: 0.2px;

font-size: 15px;

text-decoration: none;

}

.main-menu > li > a:hover {

text-decoration: none;

color: #337AB7;

}

.main-menu > li > a:after {

width: 0;

height: 3px;

background-color: #337AB7;

content: »;

left: 0;

bottom: 10px;

position: absolute;

transition: all .3s;

}

.main-menu > li > a:hover::after {

width: 100%;

}

.main-menu > li.active a:after {

width: 100%;

}

.main-menu li {

margin: 0;

white-space: nowrap;

}

.main-menu li.menu-children {

position: relative;

margin-right: 12px;

}

.main-menu li.menu-children:after {

position: absolute;

content: «\2039»;

color: #337AB7;

font-size: 20px;

font-weight: bold;

right: -12px;

top: -2px;

transform: rotate(-90deg);

}

.main-menu li li.menu-children:after {

position: absolute;

content: «\2039»;

color: #FFF;

font-size: 20px;

font-weight: bold;

right: 10px;

top: 12px;

transform: rotate(180deg);

}

.main-menu li.menu-children:hover > ul {

opacity: 1;

visibility: visible;

transform: translateY(0);

}

.main-menu ul {

padding: 10px 0;

margin: 0;

list-style: none;

background-color: #337AB7;

position: absolute;

z-index: 20;

min-width: 220px;

top: 100%;

left: -30px;

opacity: 0;

visibility: hidden;

transform: translateY(5px);

transition: all 200ms cubic-bezier(0.43, 0.59, 0.16, 1.25);

}

.main-menu ul li {

display: block;

padding: 0 10px;

line-height: 1.1;

}

.main-menu ul li:last-child {

margin-bottom: 0;

}

.main-menu ul li a {

display: block;

color: #fff;

padding: 10px;

transition: all .3s;

text-decoration: none;

}

.main-menu ul li a:hover {

color: #337AB7;

background: #FFF;

text-decoration: none;

}

.main-menu ul ul {

top: 0;

left: 100%;

}

Как сделать меню навигации в HTML и CSS для сайта

Автор статьи: admin

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

Также, перед тем как начать читать эту статью, рекомендуется сначала прочитать наш учебник по HTML и учебник по CSS.

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

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

<h4>Header</h4>

</header>

<main>

<nav>

<ul>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

</nav>

<div>

<h2>Content</h2>

</div>

</main>

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

Примечание:

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

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

<ul>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

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

Как видите всё работает не так как нам надо, теперь с помощью 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 {
  border: black 2px solid;
}

main nav {
  display: inline-block;
  width: 200px;
  border: black 2px solid;
  margin-right: 10px;
  padding: 10px 20px;
  float: left;
}

main nav ul {
  padding: 0;
}

main nav ul li {
  list-style-type: none;
}

main .content {
  display: inline-block;
  width: 500px;
  border: black 2px solid;
  float: left;
}
Как можете заметить для тега <nav> и <div> с классом «content», используем свойство display со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.
Также, каждый из этих блоков использует свойство float, оно нужно для выравнивания блоков, блочно строчного типа, более подробно по ссылки.
Примечание:
В современных проектах не используется блочно строчные элементы и float, сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.
Вот результат.
Конечно, выглядит это не очень, но главное здесь передать саму суть, как сделать вертикальное меню, вам просто надо использовать блочно строчные элементы и float.
Как сделать горизонтальное меню:
Теперь перейдём к самому интересном, это то как сделать горизонтальное меню в HTML и CSS, суть примерно такая же, как и с первым случаем, но тут буду уже использовать FlexBox.
Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.
<header>
    <h4>Header</h4>
    <nav>
        <ul>
            <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>
        <h2>Content</h2>
    </div>
</main>
Просто перенесли всё навигацию на верх, теперь изменим 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 {
  border: black 2px solid;
}

header nav {
  width: 600px;
  border: black 2px solid;
  margin-right: 10px;
  padding: 10px 20px;
}

header nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
}

header nav ul li {
  list-style-type: none;
}

main .content {
  border: black 2px solid;
}
Тут самое важное, это то, что для работы с FlexBox, нужно сделать значение свойства display, «flex», что и сделали для тега <ul>.
Дальше, после этого идёт свойство justify-content, которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат.
Как видите всё работает так как надо, единственное, выглядит не очень, но суть этой статье была в том, чтобы показать как со всем этим работать, а красивый дизайн, вы уже и сами сделаете.
Вывод:
В этой статье показали как сделать меню навигации в HTML и CSS, думаю вам было интересно и полезно, в одной из следующих статей, будет показываться как сделать выпадающее меню.
Подписываетесь на соц-сети:
Оценка:
Количество оценивших: 2
Средняя оценка: 3,00
Загрузка…
Также рекомендую:
| HTML | WebReference
Элемент <menu> (от англ. menu — меню) предназначен для отображения списка пунктов меню. Аналогично элементам <ol> и <ul> внутри контейнера <menu> список формируется с помощью <li>.
В HTML4 элемент <menu> вышел из употребления, вместо него рекомендуется использовать <ul>. В HTML5 элемент <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для элемента <command> и создания меню.
Синтаксис
<menu> <li>пункт меню</li> <li>пункт меню</li> </menu>
Закрывающий тег
Атрибуты
label
Устанавливает видимую метку для меню.
type
Задаёт тип меню.
Пример
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>MENU</title> </head> <body> <p><strong>В этом выпуске:</strong></p> <menu> <li>Русская кухня. Уха бурлацкая</li> <li>Украинская кухня. Вареники</li> <li>Молдавская кухня. Паприкаш</li> <li>Кавказская кухня. Суп-харчо</li> <li>Прибалтийская кухня. Вертиняй</li> </menu> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид списка, созданного с помощью <menu>
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>MENU</title> </head> <body> <menu type=»toolbar»> <li> <menu label=»Файл»> <button type=»button»>Новый…</button> <button type=»button»>Открыть…</button> <button type=»button»>Сохранить</button> </menu> </li> <li> <menu label=»Правка»> <button type=»button»>Копировать</button> <button type=»button»>Вырезать</button> <button type=»button»>Вставить</button> </menu> </li> </menu> </body> </html>
Примечание
Firefox поддерживает только создание контекстного меню, когда значение атрибута type равно context.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
Горизонтальное меню для сайта на HTML + CSS готовые шаблоны | Как создать красивое горизонтальное выпадающее меню с примером
Доброго времени суток, дорогие читатели. Сегодня мы разберем тему « как сделать горизонтальное меню с помощью HTML и CSS ». Его также называют главным меню . Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн зададите, будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.
HTML-код для горизонтального меню
Когда-то давно главное меню сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».
Для создания меню используйте теги
, и .
Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основной технологии для создания сайта.
Пример использования html тегов для создания меню в коде ниже:

Главная

Услуги

Цены

Контакты

Стандартные CSS стили для горизонтального меню
ул { стиль списка: нет; / * убираем маркеры списка * / маржа: 0; / * убираем отступы * / отступ слева: 0; / * убираем отступы * / } a { текстовое оформление: нет; / * убираем подчеркивание текста ссылок * / } li { плыть налево; / * Размещаем список горизонтально для реализации меню * / поле справа: 5 пикселей; / * Добавляем отступ у пунктов меню * / }
Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню.Если вы скопируете и поставите у себя данный html и css, это будет выглядеть следующим образом.
Пример каркаса (шаблона) вашего меню будущего
Получилось все достаточно простенько, вы, конечно же, хотите сразу красивое главное меню, но без понимания у вас просто не получится создать хорошее меню без ошибок в html и css.
Существует так же несколько других методов CSS, используемых для того, чтобы сделать меню горизонтальным дополнительным float: left; , например, display: inline-block; или дисплей: гибкий; , но рекомендуется использовать способ описанный выше.
Давайте же наполним наш шаблон различными стилями и сделаем его красивым .
Примеры красивого горизонтального меню для сайта
Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтальное меню.
Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже
Простое меню синего цвета с раздельными пунктами
CSS стили «верхнее» меню
Ниже размещено стили данного меню.HTML остается тем же, что и в «каркасе» меню.
ul { стиль списка: нет; / * убираем маркеры списка * / маржа: 0; / * убираем отступы * / отступ слева: 0; / * убираем отступы * / маржа сверху: 25 пикселей; / * делаем отступ сверху * / } a { текстовое оформление: нет; / * убираем подчеркивание текста ссылок * / фон: # 30A8E6; / * добавляем фон к пункту меню * / цвет: #fff; / * меняем цвет ссылок * / отступ: 10 пикселей; / * добавляем отступ * / семейство шрифтов: arial; / * меняем шрифт * / радиус границы: 4 пикселя; / * добавляем скругление * / -moz-transition: все 0.3 с 0,01 с легкость; / * делаем плавный переход * / -o-переход: все 0,3 с 0,01 с легкость; -webkit-transition: все 0,3 с 0,01 с легкость; } a: hover { фон: # 1C85BB; / * добавляем эффект при наведении * / } li { плыть налево; / * Размещаем список горизонтально для реализации меню * / поле справа: 5 пикселей; / * Добавляем отступ у пунктов меню * / }
Главное меню, расположенное на цветной линии красным фоном
CSS стили меню на цветные линии
ул { стиль списка: нет; / * убираем маркеры списка * / маржа: 0; / * убираем отступы * / отступ слева: 0; / * убираем отступы * / маржа сверху: 25 пикселей; / * делаем отступ сверху * / фон: # FF4444; / * добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню) * / высота: 50 пикселей; / * задаем высоту * / } a { текстовое оформление: нет; / * убираем подчеркивание текста ссылок * / фон: # FF4444; / * добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню) * / цвет: #fff; / * меняем цвет ссылок * / отступ: 0px 15px; / * добавляем отступ * / семейство шрифтов: arial; / * меняем шрифт * / высота строки: 50 пикселей; / * ровняем меню по вертикали * / дисплей: блок; граница справа: сплошной 1px # F36262; / * добавляем бордюр справа * / -moz-transition: все 0.3 с 0,01 с легкость; / * делаем плавный переход * / -o-переход: все 0,3 с 0,01 с легкость; -webkit-transition: все 0,3 с 0,01 с легкость; } a: hover { фон: # D43737; / * добавляем эффект при наведении * / } li { плыть налево; / * Размещаем список горизонтально для реализации меню * / }
Выпадающее меню на HTML + CSS
Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо меню нам необходимо добавить дополнительную перечень пунктов HTML-кода для какого-либо ссылки из горизонтального меню и изменить стили CSS.В стиле мы будем применять простой трюк — изменение представления раскрывающегося меню по средствам наведения на нужный нам пункт меню верхнего меню. Для примера возьмем пункт «услуги».
Пример создания простого выпадающего меню
HTML-код выпадающего меню

Главная

Услуги

Услуга 1

Длинная услуга 2

Услуга 3

Цены

Контакты

Стили CSS выпадающего меню
ул { стиль списка: нет; / * убираем маркеры списка * / маржа: 0; / * убираем отступы * / отступ слева: 0; / * убираем отступы * / маржа сверху: 25 пикселей; / * делаем отступ сверху * / фон: # 819A32; / * добавляем фон всему меню * / высота: 50 пикселей; / * задаем высоту * / } a { текстовое оформление: нет; / * убираем подчеркивание текста ссылок * / фон: # 819A32; / * добавляем фон к пункту меню * / цвет: #fff; / * меняем цвет ссылок * / отступ: 0px 15px; / * добавляем отступ * / семейство шрифтов: arial; / * меняем шрифт * / высота строки: 50 пикселей; / * ровняем меню по вертикали * / дисплей: блок; граница справа: сплошной цвет 1px # 677B27; / * добавляем бордюр справа * / -moz-transition: все 0.3 с 0,01 с легкость; / * делаем плавный переход * / -o-переход: все 0,3 с 0,01 с легкость; -webkit-transition: все 0,3 с 0,01 с легкость; } a: hover { фон: # D43737; / * добавляем эффект при наведении * / } li { плыть налево; / * Размещаем список горизонтально для реализации меню * / положение: относительное; / * задаем позицию для позиции * / } / * Стили для скрытого выпадающего меню * / li> ul { позиция: абсолютная; верх: 25 пикселей; дисплей: нет; } / * Делаем скрытую часть видимой * / li: hover> ul { дисплей: блок; ширина: 250 пикселей; / * Задаем ширину выпадающего меню * / } li: hover> ul> li { float: нет; / * Убираем горизонтальное позиционирование * / }
, чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с опытом: составление структуры и семантического ядра.
Я постарался максимально кратко рассказать вам о том, как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте:
Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.
Благодарю за внимание.
.
Тег | htmlbook.ru
Internet Explorer Хром Opera Safari Firefox Android iOS
HTML4 3.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.1+ 1.0+
HTML5
Спецификация
HTML: 3.2 4.01 5,0 XHTML: 1.0 1,1
Описание
предназначенное для отображения списка пунктов меню. Аналогично тегам
и
внутри контейнера список формируется с помощью тегов
.
В HTML4 тег
вышел из употребления, вместо него рекомендуется использовать тег
. В HTML5 тег вновь включен, но уже в другом качестве.Теперь он выступает контейнером для тега и создания меню.
Синтаксис
HTML
<меню> пункт меню пункт меню
HTML5
<меню> ...
Атрибуты
этикетка
Устанавливает видимую метку для меню.
тип
Задает тип меню.
Закрывающий тег
Обязателен.
Валидация
Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного . В применении HTML5 тега
корректно.
Пример 1
HTML 4.01IECrOpSaFx
Тег MENU В этом выпуске: Русская кухня. Уха бурлацкая Украинская кухня. Вареники Молдавская кухня. Паприкаш Кавказская кухня. Суп-харчо Прибалтийская кухня.Вертиняй
Результат данного примера показан на рис. 1.
Рис. 1. Вид списка, созданного с помощью тега
Пример 2
HTML5IECrOpSaFx
Тег MENU
.
Большой обзор красивых многоуровневых меню с codepen / Блог компании mr. Гефест / Хабр
Хабр, привет!
На Сodepen появляется много хороших решений от разных специалистов. Итак, 2 года назад начал работу у себя на компьютере интересныеты по разнымикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему количеству специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.
Плоская горизонтальная навигация
навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по используемым возможностям, работает в ie8 +.
http://codepen.io/andytran/pen/kmAEy
Заголовок навигации по материалам с выровненными раскрывающимися списками
Адаптивная панель ссылок с двухколонным подменю.Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Выпадающее меню Smooth Accordion
Стильное вертикальное меню с плавно раскрывающимися элементами. Используется переход, преобразование js-кода.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu
Темная вертикальная навигационная панель с иконками из ionicons.Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Мега выпадающее меню с анимацией на чистом CSS3
Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http: // codepen.io / rizky_k_r / pen / xFjqs

Выпадающее меню CSS3
Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg

Простое раскрывающееся меню на чистом CSS
Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW

Мега выпадающее меню Bootstrap 3
Отличное решение для интернет-магазинов.Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat Navigation
Стильная навигационная панель с плавным подменю. В старых браузерах отображается с проблемами.
http://codepen.io/andytran/pen/YPvQQN

Вложенная 3D-навигация
Горизонтальное меню с очень крутой анимацией без js!
http: // codepen.io / devilishalchemist / ручка / wBGVor

Адаптивное Мега Меню — Навигация
Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc

Pure Css3 Menu
Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффекты.
http://codepen.io/Sonick/pen/xJagi

Раскрывающееся меню полного CSS3
Красочное выпадающее меню с одним уровнем вложенности.Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

Выпадающее меню только Css3
Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb

Выпадающие меню
Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa

Выпадающее меню на чистом CSS
Примитивное, но решение эффективное. Только css и html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu — Концепция взаимодействия меню
Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Выпадающее меню Make Simple
Чистый и простой код, без js.В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb

Выпадающий список на чистом CSS [работает для сенсорного экрана мобильного устройства]
Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR

Выпадающее меню
Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq

Раскрывающееся меню CSS 3
Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт.Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR

KVdKQJ (автор очень долго думал над названием)
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ

Выпадающее меню CSS3 (особенное решение)!
Темное горизонтальное меню с тринадцатью (13) вариант анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

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

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

Фон для меню

Для начала создадим фон, я конечно не мастер PhotoShop’a, но вот что у меня получилось за пару минут:

Графические кнопочки

Создаем изображения у нас будут использовать как ссылки в меню.Для этого воспользуемся PhotoShop’ом:
HTML код

Закончили строить из себя дизайнеров, пора начинать кодить — создадим не нумерованный список -:
элементу
присвоеим id = «menu»
каждой ссылке присвоим уникальное имя класса
Внутрь тэга закинем пустой тэг (понадобиться для реализации подсказок к ссылкам)

О

CSS код

#menu
Для начала убираем отступы и поля в меню, в стиле списка выставляем в none, положение указываем как относительное.Указываем высоту и ширину меню (см. Размеры menu-bg.jpg). Добавляем фоновое изображение.

#menu {
стиль списка: нет;
отступ: 0;
маржа: 0;
ширина: 774 пикселей;
высота: 210 пикселей;
фон: url (images / menu-bg.jpg) no-repeat;
положение: относительное;
}

#menu span
Для элементов span параметр display выставляем в none (по умолчанию не будут определяться). Так же выставляем позицию как абсолютную.
#menu span {
дисплей: нет;
позиция: абсолютная;
}

#menu a
Для ссылок нам необходимо спрятать текст, для этого параметра text-indent присваиваем негативное значение (-900%), и текст будет скрыт.

#menu a {
дисплей: блок;
отступ текста: -900%;
позиция: абсолютная;
наброски: нет;
}

#menu a: hover
Теперь мы хотим сдвинуть картинку на линке по событию mouseover, для этого добавим в CSS следующий код:

#menu a: hover {
background-position: слева внизу;
}

#menu a: hover span
Так же по событию mouseover необходимо отобразить подсказку
#menu a: hover span {
дисплей: блок;
}

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

#menu .home {
ширина: 144 пикселя;
высота: 58 пикселей;
фон: url (images / home.gif) без повтора;
слева: 96 пикселей;
верх: 96 пикселей;
}

# меню.home span
Теперь проведем подобную операцию для всплывающей подсказки

#menu. Home span {
ширина: 86 пикселей;
высота: 14 пикселей;
фон: url (images / home-over.gif) без повтора;
слева: 28 пикселей;
верх: -20 пикселей;
}

#menu .about
Копируем всё что мы сделали для элемента .home и переименовываем в .about. Подгоняем размер и расположение, так же заменяем фон.

#menu.около {
ширина: 131 пикс;
высота: 51 пикс;
фон: url (images / about.gif) без повтора;
слева: 338 пикселей;
верх: 97 пикселей;
}
#menu. о пролете {
ширина: 40 пикселей;
высота: 12 пикселей;
фон: url (images / about-over.gif) no-repeat;
слева: 44px;
верх: 54px;
}

#menu .rss
Повторим для .rss
#menu .rss {
ширина: 112 пикселей;
высота: 47 пикселей;
фон: url (images / rss.gif) без повтора;
слева: 588px;
верх: 94px;
}
#menu .rss span {
ширина: 92 пикс;
высота: 20 пикселей;
фон: url (images / rss-over.gif) no-repeat;
слева: 26 пикселей;
верх: -20 пикселей;
}

Всё в одном
#menu {
стиль списка: нет;
отступ: 0;
маржа: 0;
ширина: 774 пикселей;
высота: 210 пикселей;
фон: url (images / menu-bg.jpg) без повтора;
положение: относительное;
}
#menu span {
дисплей: нет;
позиция: абсолютная;
}
#menu a {
дисплей: блок;
отступ текста: -900%;
позиция: абсолютная;
наброски: нет;
}
#menu a: hover {
background-position: слева внизу;
}
#menu a: диапазон наведения {
дисплей: блок;
}

# меню.дом {
ширина: 144 пикселя;
высота: 58 пикселей;
фон: url (images / home.gif) без повтора;
слева: 96 пикселей;
верх: 73px;
}
#menu .home span {
ширина: 86 пикселей;
высота: 14 пикселей;
фон: url (images / home-over.gif) без повтора;
слева: 28 пикселей;
верх: -20 пикселей;
}

#menu .о {
ширина: 131 пикс;
высота: 51 пикс;
фон: url (images / about.gif) без повтора;
слева: 338 пикселей;
верх: 97 пикселей;
}
#menu. о пролете {
ширина: 40 пикселей;
высота: 12 пикселей;
фон: url (images / about-over.gif) no-repeat;
слева: 44px;
верх: 54px;
}

#menu .rss {
ширина: 112 пикселей;
высота: 47 пикселей;
фон: url (images / rss.gif) no-repeat;
слева: 588px;
верх: 94px;
}
# меню.диапазон rss {
ширина: 92 пикс;
высота: 20 пикселей;
фон: url (images / rss-over.gif) no-repeat;
слева: 26 пикселей;
верх: -20 пикселей;
}
Это всё, протестировать меню можете тут, а скачать пример тут.
Вольный перевод: http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Кросспост: CSS меню в стиле Web 2.0
.
No related posts.