» »

Адаптивное меню с боковой панелью анимации

Адаптивное меню с боковой панелью анимации

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

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

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

Ниже будет представлена страница для просмотра Demo, но и снимки, как все получится после полной установки.

1. Этот вариант идет при открытии самого сайта или главной страницы на мониторе.

Меню для сайта на CSS

2. Это кнопка видна на планшете или смартфоне.



3. Вид с мобильного аппарата, где идет кнопка, а по центру поставлен значок.

Мобильная навигация с анимацией

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

HTML

Код
<div class="deveniore-amenikoes">
  <ul id="daniguprod">
  <li class="kevamped">
  <div class="mprovemen1"></div><div class="mprovemen2"></div><div class="mprovemen3"></div>
  </li>
  <li><a href="">ГЛАВНАЯ</a></li>
  <li><a href="">ZORNET.RU</a></li>
  <li><a href="">СКРИПТЫ</a></li>
  <li><a href="">ШАБЛОНЫ</a></li>  
  <li><a href="">CSS</a></li>
  <li><a href="">SEO</a></li>  
  </ul>  
</div>

CSS

Код
.deveniore-amenikoes {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
  transition: all 0.3s;
}
.getun-suposam {
  transform: translate(-230px, 0);
}
#daniguprod {
  background: #1e1a2b;
  text-align: left;
  margin: 0;
  padding: 15px 0;
  width: 100%;
  padding-left: 20px;
}
#daniguprod li {
  display: inline-block;
}
#daniguprod li a {
  display: block;
  color: #f1f1f1;
  font-size: 1rem;
  padding: 10px 25px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: all 0.3s;
  border-radius: 5px;
}
  #daniguprod li a:hover {
border: 2px solid rgba(187, 185, 185, 0.52);
}

/* Burger */
  .kevamped {
  display: none;
  position: absolute;
  left: -55px;
  top: 0;
  cursor: pointer;
  background: rgba(12, 12, 12, 0.6);
  padding: 15px 15px 10px;
}
.kevamped .mprovemen1,
.kevamped .mprovemen2,
.kevamped .mprovemen3 {
  width: 25px;
  height: 2px;
  background: #FFF;
  margin-bottom: 8px;
  transition: all 0.7s;
}
/* Change it to an X */
#daniguprod.open .kevamped .mprovemen1 {
  transform: rotate(45deg) translate(8px, 7px);
}
  #daniguprod.open .kevamped .mprovemen2 {
  opacity: 0;
}
  #daniguprod.open .kevamped .mprovemen3 {
  transform: rotate(-45deg) translate(7px, -6px);
}

@media (max-width: 768px) {
  body {
  min-width: 315px;
  }
  .kevamped {
  display: block;
  }
  #daniguprod {
  width: 227px;
  max-width: 475px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -230px;
  }
  #daniguprod li{
  display: block;
  }
  #daniguprod li a:hover, #daniguprod li a:focus {
  border-color: transparent;
  background: rgba(14, 14, 14, 0.5);
  color: #5ccede;
  }
}

JS

Код
$(document).ready(function(){
  $('.kevamped').click(function(){
  $('#daniguprod').toggleClass('open');
  $('.deveniore-amenikoes').toggleClass('getun-suposam');
  });
});

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

Демонстрация
2018-11-17 Загрузок: 1 Просмотров: 260 Комментарий: (3)

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

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

Комментарий: 3
Kosten
Kosten 2018-11-17 20:591
0
В демонстраций, если посмотреть, то там в JS, идет ссылка на .js, что явно без нее работать эффект не будет.

Как ее в материале можно прописать?
Webmaster32
Webmaster32 2018-11-18 17:062
0
Сссылка на архив с подключёнными js и css полный код можно просмотреть в index файле Архив
Kosten
Kosten 2018-11-18 18:293
0
Webmaster32, просто мне иногда встречается такая установка, мне понять, как можно закрепить в самой навигаций, нужно же выводить к меню файл JS.
avatar