ZorNet.Ru — сайт для вебмастера » Меню для сайта » Легкая адаптивная навигация для сайта

Легкая адаптивная навигация для сайта

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

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

При проверки на работоспособность, эта навигация на большом экране.

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

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

Мобильное меню сайта на CSS и JS

При нажатие на кнопку они появляются вертикально положение.

Отзывчивое меню с категориями на CSS

Установка:

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 для создания приличного многоуровневого меню с поддержкой сенсорного ввода.

Демонстрация
2020-10-18 Загрузок: 1 Просмотров: 281 Комментарий: (0)

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

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

Оставь свой отзыв

Комментарий: 0
avatar