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

Адаптивное меню с логотипом сайта

Это простое и интересное адаптивное меню, которое идет с логотипом в светлом оттенке с оригинальной графикой, где все создано при помощи CSS. Что означает, нам не нужно подключать различные библиотеке, как ранее было размещена навигация на сайте. Но здесь построение в адаптивном виде немного по другому выглядит. Если ранее мы видели логотип, то он уже на мобильном сайте пропадал, его просто закрывали.

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

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

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

1. При открытии сайта, где вид идет по умолчанию.

2. Такой обзор выводит планшет или смартфон, где все корректно показано.

3. Здесь идет под самые небольшие экраны телефонов.

Адаптивное горизонтальное меню css

Установка:

HTML

Код

<header>
  <nav>
  <div class="mleurpise-mecanus">
  <h1 class="lementavon">
  <a href="http://zornet.ru">
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/brave-icon.png">
  </a>
  </h1>
  </div>
  <ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Дизайн</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  </nav>
</header>

CSS

Код

header {
  background: repeating-linear-gradient(45deg, #ecefe9, #ecefe9 20px, #efeeee 20px, #efeeee 40px);
  box-shadow: 0 4px 6px rgba(23, 22, 22, 0.2);
}
nav {
  max-width: 715px;
  margin: 0 auto;
  padding: 18px 0;
  overflow: hidden;
}
.mleurpise-mecanus {
  float: left;
  margin-left: 25px;
}
.lementavon {
  margin: 0;
  height: 65=px;
  text-align: center;
}
ul {
  margin: 0;
  margin-right: 25px;
  padding-left: 0;
  list-style: none;
  float: right;
  height: 65px;
  line-height: 65px;
  text-align:center;
}
a {
  text-decoration: none;
  display: inline-block;
  position: relative;
}
li a {
  color: #3e3939;
  text-transform: uppercase;
}
li {
  display: inline-block;
  margin-left: 25px;
  transition: .5s linear;
}
li a:after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 18px;
  background: #6d6868;
  transition: all 0.5s linear;
}
li a:hover:after{
  width: 100%;
}
@media screen and (max-width:680px) {
  .mleurpise-mecanus {
  float: none;
  margin: 0 auto;
  }
  ul {
  float: none;
  margin: 0 25px;
  }
  li:first-of-type {margin-left:0}
}

@media screen and (max-width:493px) {
nav {
  overflow: visible
}
ul {
  height: auto;
  margin: 25px 25px 0 25px;
  line-height: 50px;
}
li {
  display: block;
  margin: 0;
}
li:hover {
  background: rgba(19, 18, 18, 0.11);
}
li a:after {
  content: none;
}
}

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

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

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

22 Июня 2019 Загрузок: 2 Просмотров: 1393 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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