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

Простое адаптивное меню навигации на CSS

Безусловно, что горизонтальное меню идет одно из важных компонентов на сайте, и теперь оно еще адаптивное под мобильные устройства на CSS. Где с этим в плюс пойдет посещаемость, так как со всем мобильных гаджетов можно зайти, где все корректно выводить будет. Думаю многие зададутся вопросом, в чем его простата, то здесь все просто. Это его дизайн, который можно изменить одним редактированием, а это в стилистике выставить тот оттенок цвета, что идет главным на сайте.

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

В само конце стилистике установлено media, которое выставлено на min-width: 780px, это при таком размене монитора, навигация автоматически перейдет вертикальный формат. Если говорить про эффект, то он здесь есть, который производится при наведении на тот или иной запрос. Также вы как веб мастер можете самостоятельно добавить шрифтовые кнопки, которые в любом случай украсят, где по оформлению намного понятнее смотреться.

Так идет по умолчанию:

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

Этот вид с мобильных аппаратов:

HTML

Код

<nav class="sarkolpav-redsamikav">
  <ul class="meomelpa-gainstreas">
  <li class="meomelpa-gainstreas-item"><a href="http://zornet.ru">Главная</a></li>
  <li class="meomelpa-gainstreas-item"><a href="#">Скрипты</a></li>
  <li class="meomelpa-gainstreas-item"><a href="#">Шаблоны</a></li>
  <li class="meomelpa-gainstreas-item"><a href="#">Софт</a></li>
  <li class="meomelpa-gainstreas-item"><a href="#">Дизайн</a></li>
  <li class="meomelpa-gainstreas-item"><a href="#">CSS</a></li>
  <li class="meomelpa-gainstreas-item"><a href="#">SEO</a></li>
  </ul>
</nav>

CSS

Код

.meomelpa-gainstreas,
.meomelpa-gainstreas li {
  margin: 0;
  padding: 0;
}
.meomelpa-gainstreas a {
  font-weight: 700;
  padding: .80em 1.35em;
  transition: background .30s ease-in-out;
}
.meomelpa-gainstreas li {
  position: relative;
  border-width: 0 0 1px;
  border-style: solid;
}
.meomelpa-gainstreas li:last-child {
  border-width: 0;
}
.meomelpa-gainstreas li,
.meomelpa-gainstreas a {
  display: block;
}

.sarkolpav-redsamikav--right {
  text-align: right;
}

@media only screen and (min-width: 780px) {
  .meomelpa-gainstreas {
  display: flex;
  flex-flow: row wrap;
  }

  .meomelpa-gainstreas li {
  border-width: 0 1px 0 0;
  }
}

.sarkolpav-redsamikav {
  background-color: #171616;
}

.meomelpa-gainstreas li {
  border-color: #312f2f;
}
.meomelpa-gainstreas li a {
  color: rgba(251, 249, 249, 0.75);
}
.meomelpa-gainstreas li a:hover, .meomelpa-gainstreas li a:active, .meomelpa-gainstreas li a:focus {
  color: rgba(251, 246, 246, 0.75);
  background-color: black;
}

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

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

01 Сентября 2018 Просмотров: 1712 Комментариев: (0)

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

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

Kosten

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