Легкая адаптивная навигация для сайта/c] [c] 
Это адаптивное меню в горизонтальном положение выполнено в адаптивном стиле CSS, что позволяет корректно отряжаться на всем мобильных аппаратах. Здесь задан оттенок цвета в виде градиента, где вверх навигаций представлена немного в светлой гамме, а вот низ намного темнее, что получается красивый изгиб, который просматривается по вертикале. А так простое меню, где переменно CSS, что полностью отвечает за дизайн и адаптивность каркаса.
Где JS идет полностью под функций для небольших экранов, где вы можете по клику открыть, и аналогичным кликом закрыть все запрашиваемые разделы, что в горизонтальном положение мы видим по умолчанию. Немного CSS и Javascript придают ему приятный скользящий эффект с богатым современным дизайном, в целом это сделано грамотно и что-то другое, что вы можете попробовать.
При проверки на работоспособность, эта навигация на большом экране .
Здесь вы смотрите с мобильного гаджет, где наблюдаем логотип и кнопку для показа категорий.
При нажатие на кнопку они появляются вертикально положение.
Установка:
HTML
Код
Код <header> <div class="menu-navigation"> <h1 class="desalpoden"> <a href="#">ZorNet.Ru</a> </h1> <nav id="nav" class="asugen"> <ul> <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> </nav> </div> </header>
CSS
Код
Код kaselob {
margin-top: 2.5em;
}
kaselob a {
color: #2980b9
}
p {
color: #747474;
}
p+p {
margin-top: 1.5em;
}
h2 {
line-height: 1.35;
}
header {
min-height: 3.75em;
background: #354a5f;
background-repeat: repeat-x;
background-size:100% 3.75em;
background-image: -webkit-linear-gradient(top, #45607b, #354a5f);
background-image: -moz-linear-gradient(top, #45607b, #354a5f);
background-image: -ms-linear-gradient(top, #45607b, #354a5f);
background-image: -o-linear-gradient(top, #45607b, #354a5f);
background-image: linear-gradient(top, #45607b, #354a5f);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45607b', endColorstr='#354a5f',GradientType=0 );
}
.menu-navigation {
max-width: 62.25em;
margin: 0 auto;
}
.desalpoden {
position: absolute;
margin-left: 5%;
font-size: 1.5em;
line-height: 2.5;
}
.desalpoden a {
color: white;
}
button {
float: right;
background: none;
border: none;
font-size: 1em;
color: white;
font-weight: bold;
line-height: 3.75;
margin-right: 5%;
}
nav {
padding-top: 3.75em;
text-align: center;
display: none;
}
nav ul {
border-top: 1px solid #293949;
}
nav li {
list-style: none;
}
nav a {
display: block;
color: #d5dfe8;
padding: 0.75em 0;
border-bottom: 1px solid #293949;
}
nav a:hover {
background-color: #293949;
color: white;
}
.show {
display: block;
transition: .3s;
}
@media only screen and (min-width: 740px) {
.menu-navigation {
width: 90%;
}
.desalpoden {
margin: 0;
}
#menu {
display: none;
}
nav {
display: block;
padding: 0;
text-align: inherit;
float: right;
line-height: 3.75;
}
nav ul, nav a {
border: none;
}
nav a {
padding: 0;
margin-left: 2em;
}
nav a:hover {
background: none;
}
nav li {
display: inline-block;
}
}
JS
Код
Код var menu = document.createElement("button");
menu.id = "menu";
menu.innerHTML = "Menu";
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
var desalpoden = document.getElementsByTagName("h1")[0];
insertAfter(desalpoden, menu);
var nav = document.getElementById('nav');
function toggleClass(element, className){
if (!element || !className){
return;
}
var classString = element.className, nameIndex = classString.indexOf(className);
if (nameIndex == -1) {
classString += ' ' + className;
}
else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
}
element.className = classString;
}
menu.addEventListener('click', function() {
toggleClass(nav, 'show');
});
Вообще по своим характеристикам, это ориентированный на мобильные устройства пример использования медиа-запросов и javascript для создания приличного многоуровневого меню с поддержкой сенсорного ввода.
Демонстрация
| 
