ZorNet.Ru — сайт для вебмастера » Меню для сайта » Адаптивное центрирующее меню на CSS

Адаптивное центрирующее меню на CSS

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

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

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

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

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

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

Установка:

HTML

Код

<div id="kelopa-devdas">
<a href="http://zornet.ru/" title="Logo">ZORNET.RU</a>
</div>

<div class="navigatsion-menyu" id="nosenov-ganokes">
<a href="#" title="Главная">Главная</a>
<a href="#" title="Дизайн">Дизайн</a>
<a href="#services" title="Шаблоны">Шаблоны</a>
<a href="#" title="Скрипты">Скрипты</a>
<a href="#" title="Контакты">Контакты</a>
<a href="javascript:void(0);" title="Menu" style="font-size:18px;" class="icon" onclick="myFunction()">☰</a>
</div>

CSS

Код

#kelopa-devdas {
  left: 30px;
  padding: 22px;
  position: absolute;
  color: #fff;
  font-size: 19px;
  font-family: Poppins;
  text-decoration: none;
}

#kelopa-devdas a {
color: inherit;
text-decoration: none;
}

.navigatsion-menyu {
  overflow: hidden;
  background-color: #38393e;
  text-align: center;
  z-index: 6;
}

.navigatsion-menyu a {
  display: inline-block;
  margin-right: -4px;
  color: #fff;
  padding: 22px 22px;
  text-decoration: none;
  font-family: Poppins;
  font-size: 18px;
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  -ms-transition: background 0.3s linear;
  -o-transition: background 0.3s linear;
  transition: background 0.3s linear;
  z-index: 9;
}

.navigatsion-menyu a:hover {
  background-color: #4d4f56;
  color: #fbf8dd;
}

.navigatsion-menyu .icon {
  display: none;
}

@media screen and (max-width: 820px) {
  .navigatsion-menyu a {display: none;}
  .navigatsion-menyu a.icon {
  float: right;
  display: block;
  width: 60px;
  }
}

@media screen and (max-width: 820px) {
  .navigatsion-menyu.responsive {position: relative; top: 73px;}
  .navigatsion-menyu.responsive .icon {
  position: fixed;
  right: 0;
  top: 0;
  }
  .navigatsion-menyu.responsive a {
  float: none;
  display: block;
  text-align: center;
  }

}

Код

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

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

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

22 Октября 2019 Загрузок: 1 Просмотров: 976 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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