Адаптивное меню на CSS3

Скрипты меню 2013-Мар-16 OkJkeee 3.5k 169 1

Сегодня мы поговорим о том, как создать адаптивное меню, используя только CSS3. Почему именно адаптивное? Мне кажется, это очень важно и должно стать нормой, ведь уже сегодня огромное число людей заходят в интернет через мобильные девайсы (ipad-ы, iphone-ы...). Этим пользователям необходимо дать возможность удобной навигации по вашему сайту. Для решения данной задачи можно воспользоваться jQuery или JavaScript-ом, но сегодня мы рассмотрим нечто иное.
По сути, у нас будет обычное выпадающее меню, основанное на списке UL > LI. Если же мы уменьшим экран, то все подменю будут доступны по клику. Давайте посмотрим, что у нас должно получиться:

Шаг 1. HTML

Вот и html код нашего демо примера:

index.html

Код

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

  <meta charset="utf-8" />
  <meta name="author" content="Script Tutorials" />
  <title>Responsive menu | Script Tutorials</title>

  
  <link href="css/main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <div class="container">
  <ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#s1">Menu 1</a>
  <span id="s1"></span>
  <ul class="subs">
  <li><a href="#">Header a</a>
  <ul>
  <li><a href="#">Submenu x</a></li>
  <li><a href="#">Submenu y</a></li>
  <li><a href="#">Submenu z</a></li>
  </ul>
  </li>
  <li><a href="#">Header b</a>
  <ul>
  <li><a href="#">Submenu x</a></li>
  <li><a href="#">Submenu y</a></li>
  <li><a href="#">Submenu z</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li class="active"><a href="#s2">Menu 2</a>
  <span id="s2"></span>
  <ul class="subs">
  <li><a href="#">Header c</a>
  <ul>
  <li><a href="#">Submenu x</a></li>
  <li><a href="#">Submenu y</a></li>
  <li><a href="#">Submenu z</a></li>
  </ul>
  </li>
  <li><a href="#">Header d</a>
  <ul>
  <li><a href="#">Submenu x</a></li>
  <li><a href="#">Submenu y</a></li>
  <li><a href="#">Submenu z</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="http://www.script-tutorials.com/css3-responsive-menu/">Back to Responsive menu tutorial</a></li>
  </ul>
  </div>
  </body>
</html>

Тут я бы хотел отметить один момент - meta с атрибутом name=’viewpoint’. Это тег необходим для правильного масштабирования содержимого страницы на вашем экране, будь то монитор компа или мобилка. Весь остальной код не сложен для понимания. Многоуровневый список UL > LI.

Шаг 2. CSS

Итак, стили. В первую очередь, для самой страницы:

css/main.css

Код

* {
  margin: 0;
  padding: 0;
}
html {
  background-color: #fff;
  height: 100%;
}
body {
  color: #333333;
  font: 0.75em/1.5em Arial,sans-serif;
}
.container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 96%;
}

Теперь напишем стили для верхних элементов меню:

Код

/* common and top level styles */
#nav span {
  display: none;
}
#nav, #nav ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
#nav {
  background-color: #F5F5F5;
  border-bottom: 5px solid #333333;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
  width: 98%;
}
#nav ul.subs {
  background-color: #FFFFFF;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  color: #333333;
  display: none;
  left: 0;
  padding: 2%;
  position: absolute;
  top: 54px;
  width: 96%;
}
#nav > li {
  border-bottom: 5px solid transparent;
  float: left;
  margin-bottom: -5px;
  text-align: left;
  -moz-transition: all 300ms ease-in-out 0s;
  -ms-transition: all 300ms ease-in-out 0s;
  -o-transition: all 300ms ease-in-out 0s;
  -webkit-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
#nav li a {
  display: block;
  text-decoration: none;
  -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  white-space: normal;
}
#nav > li > a {
  color: #333333;
  display: block;
  font-size: 1.3em;
  line-height: 49px;
  padding: 0 15px;
  text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
  background-color: #F55856;
  color: #FFFFFF;
}
#nav li.active > a {
  background-color: #333333;
  color: #FFFFFF;
}

Реализуем стили для подменю (выпадающий список):

Код

/* submenu */
#nav li:hover ul.subs {
  display: block;
}
#nav ul.subs > li {
  display: inline-block;
  float: none;
  padding: 10px 1%;
  vertical-align: top;
  width: 33%;
}
#nav ul.subs > li a {
  color: #777777;
  line-height: 20px;
}
#nav ul li a:hover {
  color: #F55856;
}
#nav ul.subs > li > a {
  font-size: 1.3em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
#nav ul.subs > li li {
  float: none;
  padding-left: 8px;
  -moz-transition: padding 150ms ease-out 0s;
  -ms-transition: padding 150ms ease-out 0s;
  -o-transition: padding 150ms ease-out 0s;
  -webkit-transition: padding 150ms ease-out 0s;
  transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
  padding-left: 15px;
}

Отлично. Теперь самое главное - каким образом меню станет адаптивным? На самом деле всё очень просто! Воспользуемся CSS3 медиа запросами, которые определят, какие из стилей отображать в зависимости от размеров пользовательского экрана. Также преобразовывать меню мы будем с помощью следующей хитрости. В нашем HTML коде, сразу за верхними уровнями меню, я поставил специальные SPAN-ы. Их мы и будем использовать, присвоив активное состояние (псевдо класс :target), при клике по верхним элементам меню. Таким образом, будет открываться подменю. Смотрим код:

Код

/* responsive rules */
@media all and (max-width : 980px) {
  #nav > li {
  float: none;
  border-bottom: 0;
  margin-bottom: 0;
  }
  #nav ul.subs {
  position: relative;
  top: 0;
  }
  #nav li:hover ul.subs {
  display: none;
  }
  #nav li #s1:target + ul.subs,
  #nav li #s2:target + ul.subs {
  display: block;
  }

  #nav ul.subs > li {
  display: block;
  width: auto;
  }
}

Итог

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

Скачать Демо

Источник: не указан

1 комментарий

Порядок вывода комментариев:

Спам

1 OkJkeee • 23:32, 2013-Мар-21

fanat1234 бан.

Вы не авторизованы!

Вакансии

Адаптивное меню на CSS3