» »

Создаем адаптивное меню для сайта


Создаем адаптивное меню для сайта

Оговорюсь сразу меню изначально имеет 600px фиксированной ширины, поэтому стили медиа запросов настроены под окно браузера 600px или меньше.
Полное описание настройки на этом сайте и Демо.
Для начала добавим мета тег viewport внутри тега head.
Код
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Теперь структура меню. Меню основано на маркированном списке ul.
Код

<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Инфо</a></li>
<li><a href="#">Скачать</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<a href="#" id="pull">Меню</a>
</nav>

Стили меню с медиа запросами.
Код

nav {  
  height: 40px;  
  width: 100%;  
  background: #455868;  
  font-size: 11pt;  
  font-family: 'PT Sans', Arial, sans-serif;  
  font-weight: bold;  
  position: relative;  
  border-bottom: 2px solid #283744;  
}  
nav ul {  
  padding: 0;  
  margin: 0 auto;  
  width: 600px;  
  height: 40px;  
}
nav li {  
  display: inline;  
  float: left;  
}
.clearfix:before,  
.clearfix:after {  
  content: " ";  
  display: table;  
}  
.clearfix:after {  
  clear: both;  
}  
.clearfix {  
  *zoom: 1;  
}
nav a {  
  color: #fff;  
  display: inline-block;  
  width: 100px;  
  text-align: center;  
  text-decoration: none;  
  line-height: 40px;  
  text-shadow: 1px 1px 0px #283744;  
}
nav li a {  
  border-right: 1px solid #576979;  
  box-sizing:border-box;  
  -moz-box-sizing:border-box;  
  -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
  border-right: 0;  
}
nav a:hover, nav a:active {  
  background-color: #8c99a4;  
}
nav a#pull {  
  display: none;  
}
@media screen and (max-width: 600px) {  
  nav {  
  height: auto;  
  }  
  nav ul {  
  width: 100%;  
  display: block;  
  height: auto;  
  }  
  nav li {  
  width: 50%;  
  float: left;  
  position: relative;  
  }  
  nav li a {  
  border-bottom: 1px solid #576979;  
  border-right: 1px solid #576979;  
  }  
  nav a {  
  text-align: left;  
  width: 100%;  
  text-indent: 25px;  
  }  
}
@media only screen and (max-width : 480px) {  
  nav {  
  border-bottom: 0;  
  }  
  nav ul {  
  display: none;  
  height: auto;  
  }  
  nav a#pull {  
  display: block;  
  background-color: #283744;  
  width: 100%;  
  position: relative;  
  }  
  nav a#pull:after {  
  content:"";  
  background: url('nav-icon.png') no-repeat;  
  width: 30px;  
  height: 30px;  
  display: inline-block;  
  position: absolute;  
  right: 15px;  
  top: 10px;  
  }  
}
@media only screen and (max-width : 320px) {  
  nav li {  
  display: block;  
  float: none;  
  width: 100%;  
  }  
  nav li a {  
  border-bottom: 1px solid #576979;  
  }  
}

Раскрытие,скрытие меню реализуется за счет метода jQuery slideToggle().
Скрипт внутри тега head. Для других сайтов которые не на юкоз надо подключать библиотеку jQuery.
Код

<script>
  $(function() {
  var pull = $('#pull');
  menu = $('nav ul');
  menuHeight = menu.height();

  $(pull).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
  });

  $(window).resize(function(){
  var w = $(window).width();
  if(w > 320 && menu.is(':hidden')) {
  menu.removeAttr('style');
  }
  });
  });
  </script>

В архиве для скачивания иконка для меню, и для примера три варианта скриншотов:


Источник http://xozblog.ru
16.03.2016 Загрузок: 3 Просмотров: 647 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
Scheme
Scheme 16.03.2016 19:091
0
Angerfist, пора уже сайты адаптировать. Если так не плохо получается.
Сопрано
Сопрано 16.03.2016 20:422
0
kvyntin, по больше бы такой иформации, вот не чего не понимал, но уже что то есть в плане знаний.
Kosten
Kosten 16.03.2016 20:503
0
Как понял такое меню горизонтальное, можно его шире сделать, чтоб мини профиль в него поставить.

avatar