Меню создание css – Горизонтальное меню для сайта

alexxlab

Содержание

Как сделать навигационное меню — учебник CSS

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

Создание навигации

Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка <ul>, где в каждом пункте <li> содержится одна ссылка <a>. В HTML5 для навигации ввели отдельный тег <nav>, куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню — вертикальным, горизонтальным, выпадающим и т. п.

Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:


<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

Изначально, без стилей наша навигация выглядит, как обычный список:

Маркированный список для навигации

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

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


.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
Сброс стилей маркированного списка для навигации

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

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

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

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

 

Блочные ссылки

Прежде всего нужно сделать все теги <a> блочными элементами:


.menu a { display: block; }

Существует несколько причин для этого:

  1. Вы сможете задавать отступы для ссылок.

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


    Разница между строчным и блочным пунктом меню
    GIF

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

  3. Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов
    padding     можно увеличить область кликабельности еще и по высоте.

 

Ширина меню

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


.menu { width: 300px; }

Ограничение ширины меню

Вместо этого можно установить ширину для пунктов <li> либо для ссылок <a> — визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента

.menu всё равно останется 100%.
 

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

Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu:


.menu a {
    border-top: 1px solid blue;
}
.menu {
    border-bottom: 1px solid blue;
}

Границы для пунктов меню

Высота пунктов и вертикальное выравнивание

Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:


.menu a {
  height: 30px;
  line-height: 30px;
}

Высота для пунктов меню
GIF

Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.

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

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

Способ первый

Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block:


.menu li {
  display: inline;
}

Горизонтальные пункты навигации


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

После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:


.menu a {
  text-decoration: none;
  font-family: sans-serif;
  color: #5757a0;
  display: inline-block;
  padding: 10px 20px;
  background-color: lavender;
  border-bottom: 5px solid #5757a0;
}

Вариант оформления горизонтального меню

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

padding. Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами <li>. Эти промежутки можно убрать, записав HTML-код списка в одной строке:


<ul>
 <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Gallery</a></li>
 ...
</ul>

Способ убрать промежуток между строчными пунктами списка

Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:


.menu li {
  margin-right: -5px;
}

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

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

Способ второй

Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float. Для этого добавьте стиль для тегов <li>:


.menu li {
  float: left;
}

Горизонтальное меню с помощью float

Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,

<h2>), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left. Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:


.menu {
  overflow: hidden;
}

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


Плавающие элементы и высота их родителя
GIF

Примечание: если вы установите фон для элемента

.menu, то вы не увидите его до тех пор, пока не примените к нему overflow: hidden. Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?

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

idg.net.ua

Создание меню 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;
}
Что было сделано:
  1. Сброс стилей по умолчанию для тега ul
  2. Создание горизонтального меню, путем присвоения тегам li, содержащим пунткы основного меню, свойства float: left
  3. Установка отступов для пунктов меню
Пояснения:

Конструкция .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;
}

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

www.wantweb.ru

Создание меню на CSS

В этом уроке мы будем создавать два типа меню: вертикальные кроссбраузерное  CSS3-меню с 3D-анимацией (используя CSS3-переходы и свойства трансформации), а также  меню с LavaLamp-эффектом. 

Давайте посмотрим на образцы меню, которые мы будем создавать:

CSS3 vertical multicolor 3D menu:

Демо // Загрузить  

Pure CSS3 LavaLamp Menu 

Демо // Загрузить  

CSS3 vertical multicolor 3D menu

 Шаг 1. HTML

Начинаем с HTML. Ниже приведен HTML-код нашего меню. Как обычно, это навигационное меню на основе UL-LI. Конечно, самое интересное — это CSS-стили. 

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div>
        <a href="#clr1"></a>
        <a href="#clr2"></a>
        <a href="#clr3"></a>
        <a href="#clr4"></a>
        <a href="#clr5"></a>
        <a href="#clr6"></a>
    </div>
   <ul>
        <li><a href="http://www.script-tutorials.com/">Home</a></li>
        <li><a href="#">Menu 1</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
                <li><a href="#">Submenu 5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Submenu 2-1</a></li>
                <li><a href="#">Submenu 2-2</a></li>
                <li><a href="#">Submenu 2-3</a></li>
                <li><a href="#">Submenu 2-4</a></li>
                <li><a href="#">Submenu 2-5</a></li>
                <li><a href="#">Submenu 2-6</a></li>
                <li><a href="#">Submenu 2-7</a></li>
                <li><a href="#">Submenu 2-8</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Submenu 3-1</a></li>
                <li><a href="#">Submenu 3-2</a></li>
                <li><a href="#">Submenu 3-3</a></li>
                <li><a href="#">Submenu 3-4</a></li>
                <li><a href="#">Submenu 3-5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        <li><a href="#">Menu 6</a></li>
        <li><a href="http://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/">Back</a></li>
    </ul>
</div>

Шаг 2. CSS

Вот CSS -стили нашего вертикального меню. Возможно, вы заметили, — что в нашем HTML у нас есть два CSS файла: layout.css и menu.css. Первый (layout.css) содержит стилях нашей демо -страницы. Эти стили в статье публиковать не будем, но если вам интересно — их можно найти в архиве. 

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%;
}

/* colors */
.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;
}

Pure CSS3 LavaLamp Menu

Наверное, вы уже видели анимационные меню с LavaLamp-эффектом ( на основе плагина JQuery). Но в этом уроке мы повторим это при помощи CSS3 (без JavaScript). В нашем меню мы будем использовать CSS3-переходы ( для анимации элементов). Итак, давайте начнем.

Шаг 1. HTML

Как обычно, начинаем с HTML. Вот HTML-код нашего меню. Это опять меню на основе UL и LI.

index.html

<ul>
    <li><a href="http://www.script-tutorials.com/">Home</a></li>
    <li><a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://www.script-tutorials.com/pure-css3-lavalamp-menu/">Back</a></li>
    <div></div>
</ul>

Шаг 2. CSS

Вот CSS-стили нашего LavaLamp-меню.

CSS / menu.css

 

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 957px;
}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -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.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}

#nav li {

    background: url('menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}

#nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
    color: #00B4FF;
}

#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

#nav ul li {

    background: none;
    width: 100%;

}

#nav ul li a {

    float: none;
}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;

}

#lavalamp {

    background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}

По материалам: CSS3 vertical multicolor 3D menu и Pure CSS3 LavaLamp Menu 

Перевод — Дежурка!

 

www.dejurka.ru

Создание вытягиваемого бокового меню для веб-сайта

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

 

 

Демонстрация работы – Скачать исходный код

Заметьте: для этого урока Вам потребуется библиотека jQuery, так что убедитесь, что последняя библиотека jQuery подключена на Вашей странице.

 

1. Структура

 

HTML:

<div>
    <div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div>
    </div>
</div>

CSS:

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
}
#sidebar {
    position: absolute;
    background: #DF314D;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
   -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
} 

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

Демонстрация работы

2. Создание простого бокового меню

HTML:

<div>
    <div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
                <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div>
        <a href="#" data-toggle=".container">
            <span></span>
            <span></span>
            <span></span>
        </a>
        <div>
            <h2>Creating Swipeable Side Menu For the Web</h2>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
    </div>
</div>

CSS:

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}

.container.open-sidebar {
    left: 240px;
}
#sidebar {
    position: absolute;
    left: -240px;
    background: #DF314D;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h2{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
.main-content #sidebar-toggle .bar{
     display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
     margin-bottom: 0;
}
  

JS:

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
});

Теперь мы спрячем боковое меню влево с помощью свойств position:relative и left: -240px, это значение равняется ширине бокового меню. Мы добавили кнопку и скрипт jQuery, что позволит нам вызвать боковое меню по нажатию, переключая класс open-sidebar для контейнера, в котором находятся боковое меню и блок main-content.

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

Теперь у нас есть простое боковое меню, которое вызывается нажатием кнопки мыши.

Демонстрация работы

 3. Делаем меню вытягиваемым

HTML:

 

<div>
    <div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
                <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div>
        <div></div>
        <a href="#" data-toggle=".container">
            <span></span>
            <span></span>
            <span></span>
        </a>
        <div>
            <h2>Creating Swipeable Side Menu For the Web</h2>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</div>

CSS:

 

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
.container.open-sidebar {
    left: 240px;
}
.swipe-area {
    position: absolute;
    width: 50px;
    left: 0;
top: 0;
    height: 100%;
    background: #f3f3f3;
    z-index: 0;
}
#sidebar {
    background: #DF314D;
    position: absolute;
    width: 240px;
    height: 100%;
    left: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h2{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
.main-content #sidebar-toggle .bar{
     display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
     margin-bottom: 0;
}

 

JS:

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });

});
$(".swipe-area").swipe({
    swipeStatus:function(event, phase, direction, distance, duration, fingers)
        {
            if (phase=="move" && direction =="right") {
                 $(".container").addClass("open-sidebar");
                 return false;
            }
            if (phase=="move" && direction =="left") {
                 $(".container").removeClass("open-sidebar");
                 return false;
            }
        }
});

Самая сложная часть этого урока — сделать боковое меню вытягиваемым как на браузерах для смартфонов, так и на веб-браузерах для настольных компьютеров. На этом этапе нам нужно подключить хороший плагин, под названием TouchSwipe, созданный Matt Bryson для управления процессом вытягивания меню. Убедитесь, что этот плагин подключен в Вашем HTML файле.

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

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

В нашем скрипте JS мы определяем действие вытягивания, использую функцию swipe(),  выполняемую плагином TouchSwipe. Мы обнаруживаем две части действия вытягивания: движение и направление. Мы просто добавляем класс open-sidebar, чтобы вызвать меню, когда курсор мыши или палец пользователя движется вправо. Мы удаляем этот класс, если курсор мыши или палец пользователя движется в противоположном направлении.

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

Демонстрация работы – Скачать исходный код

Заключение

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

 

Автор урока Pete R.

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *