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

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

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

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

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

1. Так будет выглядеть при открытие страницы или заходе на сайт.

Горизонтальное адаптивное меню в алом цвете

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

Как сделать простое адаптивное меню с помощью CSS

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

Приступаем к установке:

HTML

Код

<header>
<div class="pulanecenesign">
  <h1 class="cenudesign">ZORNET.RU</h1>
  <nav class="nvitation-demplates">
  <ul>
  <li><a href=""><i class="fa fa-home nvitation-demplates--icon"></i>Главная</a></li>
  <li><a href=""><i class="fa fa-info nvitation-demplates--icon"></i>Скрипты</a></li>
  <li><a href=""><i class="fa fa-pencil nvitation-demplates--icon"></i>Блоги</a></li>
  <li><a href=""><i class="fa fa-usd nvitation-demplates--icon"></i>Шаблон</a></li>
  <li><a href=""><i class="fa fa-envelope nvitation-demplates--icon"></i>Контакт</a></li>
  </ul>
  </nav>
  <div class="ginvitations-dalpapeves">
  <div class="gnintestiven"></div>
  </div>
</div>
</header>

CSS

Код

.pulanecenesign {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

header {
  background: #bb1a1a;
  color: #f5f5ef;
  padding: 25px;
  position: relative;
  font-size: 14px;
  font-weight: bold;
}

header::after {
  content: '';
  clear: both;
  display: block;
}

.cenudesign {
  float: left;
  font-size: 20px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.cenudesign span {
  font-weight: 400;
}

.nvitation-demplates {
  position: absolute;
  top: 100%;
  right: 0%;
  background: #464655;
  clip-path: circle(0px at top right);
  transition: clip-path ease-in-out 700ms;
/* display: none; */
}

.nvitation-demplates--open {
  clip-path: circle(250% at top right);
/* display: block; */
}

.nvitation-demplates ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nvitation-demplates li {
  border-bottom: 1px solid #575766;
}

.nvitation-demplates li:last-child {
  border-bottom: none;
}

.nvitation-demplates a {
  color: #efefec;
  display: block;
  padding: 2em 4em 2em 1.5em;
  text-transform: uppercase;
  text-decoration: none;
}

.nvitation-demplates a:hover, .nvitation-demplates a:focus {
  background: #333340;
  color: #f5f2f2;
  text-shadow: 0 0 10px #f9f5f5, 0 0 15px #fff, 0 0 30px #fffefe, 0 0 27px #27839a, 0 0 48px #288190, 0 0 45px #2d8896, 0 0 100px #337994, 0 0 27px #278c90;
}

.nvitation-demplates--icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 7px;
  width: 1.1em;
  text-align: right;
  color: rgba(210, 208, 208, 0.78);
}

.ginvitations-dalpapeves {
  padding: 12px;
  position: absolute;
  top: 20px;
  right: 7px;
  cursor: pointer;
}

.gnintestiven,
.gnintestiven::before,
.gnintestiven::after {
  content: '';
  display: block;
  background: #EBEBD3;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.gnintestiven::before {
  transform: translateY(-6px);
}

.gnintestiven::after {
  transform: translateY(3px);
}

.open .gnintestiven {
  transform: rotate(45deg);
}

.open .gnintestiven::before {
  opacity: 0;
}

.open .gnintestiven::after {
  transform: translateY(-3px) rotate(-90deg);
}

@media (min-width: 700px) {

  .ginvitations-dalpapeves {
  display: none;
  }

  .nvitation-demplates {
  height: auto;
  position: relative;
  background: transparent;
  float: right;
  clip-path: initial;
  }

  .nvitation-demplates li {
  display: inline-block;
  border: none;
  }

  .nvitation-demplates a {
  margin-left: 28px;
  padding: 4px;
}

  .nvitation-demplates a:hover,
  .nvitation-demplates a:focus {
  background: transparent;
  }

  .nvitation-demplates--icon {
  display: none;
  }
}

Код

$('.ginvitations-dalpapeves').click(function() {

  $('.nvitation-demplates').toggleClass('nvitation-demplates--open', 500);
  $(this).toggleClass('open');
})

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

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

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

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

05 Декабря 2018 Загрузок: 4 Просмотров: 5029 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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