ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Полноэкранное мобильное меню на jQuery

Полноэкранное мобильное меню на jQuery

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

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

Это вид с мобильного гаджета:

Мобильное меню для сайтов

Установочный процесс:

Подключаем в HEAD на страницах, по нахождению навигаций.

Код
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

HTML

Код
<div class="moving-navigatsukon">
  <div class="navigatsukon-panelka">
  <span></span>
  </div>
  <div class="navigatsukon">
  <ul>
  <li><a href="/">Zornet.Ru</a></li>  
  <li class="kelemen-mekosiv">
  <a href="/">Главная сайта</a>
  <ul>
  <li><a href="/">Новостной блок</a></li>
  <li><a href="/">Развлекательный</a></li>
  <li><a href="/">Обучающий</a></li>  
  </ul>
  </li>
  <li><a href="/">Констатация</a></li>
  <li class="kelemen-mekosiv">
  <a href="/">Привилегия</a>
  <ul>
  <li><a href="/">Скрипты</a></li>
  <li><a href="/">Шаблоны</a></li>
  <li><a href="/">HTML И CSS</a></li>  
  </ul>
  </li>
  <li><a href="/">Контакты для связи</a></li>
  </ul>
  </div>  
</div>

CSS

Код
.navigatsukon-panelka {
  transition: all 0.3s ease-in-out;
  transition-delay: 0.2s;
  background-color: #2a669a;
  border-radius: 50%;
  border: 4px solid #b1d4f1;
  box-shadow: 1px 3px 5px rgba(23, 22, 22, 0.78);
  position: fixed;
  bottom: 10px;
  right: 48px;
  width: 48px;
  height: 48px;
  z-index: 9999999;
  box-sizing: content-box;
  cursor: pointer;
}
.navigatsukon-panelka span {
  transition: all 0.3s ease-in-out;
  background-color: #fff;
  display: inline-block;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 10px;
  width: 22px;
}
.navigatsukon-panelka span:before,  
.navigatsukon-panelka span:after {
  transition: all 0.3s ease-in-out;
  background-color: #fff;
  content: '';
  display: block;
  height: 3px;
  position: absolute;
  width: 30px;
}
.navigatsukon-panelka span:before {
  top: -8px;
}
.navigatsukon-panelka span:after {
  top: 8px;
}
.triggered .navigatsukon-panelka span {
  width: 0;
}
.triggered .navigatsukon-panelka span:before {
  transform: rotate(45deg);
  top: 0;
}
.triggered .navigatsukon-panelka span:after {
  transform: rotate(-45deg);
  top: 0;
}
.navigatsukon {
  transition: all 0.3s ease-in-out;
  background-color: #0b4f8a;
  height: 100vh;
  opacity: 0;
  padding: 15px;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  width: 100vw;
  z-index: 9999998;
  overflow-y: auto;  
}
.navigatsukon ul {
  transition: all 0.3s ease-in-out;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigatsukon ul li {
  transition: all 0.3s ease-in-out;
}
.navigatsukon ul li a {
  color: #efefef;
  display: inline-block;
  font-family: Verdana, sans-serif;
  font-size: 18px;
  padding: 7px 14px;
  position: relative;
  text-decoration: none;
  outline: none;
}
.navigatsukon ul li span {
  display: inline-block;
  height: 24px;
  top: 5px;
  position: relative;
  width: 24px;
  cursor: pointer;
}
.navigatsukon ul li span:before,  
.navigatsukon ul li span:after {
  background-color: #BFE2FF;
  content: '';
  display: block;
  height: 3px;
  position: absolute;
  width: 15px;
}
.navigatsukon ul li span:before {
  top: 50%;
  transform: translateY(-50%);
}
.navigatsukon ul li span:after {
  transition: all 0.15s ease-in-out;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}
.navigatsukon ul li span.subtriggered:after {
  transform: translateY(-50%) rotate(0);
}
.navigatsukon ul li ul li a {
  padding: 8px 30px;
  font-size: 18px;
  color: #BFE2FF;
}
.triggered .navigatsukon {
  opacity: 1;
  transform: translateY(0);
}
.navigatsukon ul ul {
  display: none;
}
.navigatsukon ul .subtriggered + ul {
  display: block;
}

JS

Код
(function($){
  $('.navigatsukon-panelka').on('click', function() {
  $('.moving-navigatsukon').toggleClass('triggered');
  });  
  $('.kelemen-mekosiv > a').after('<span></span>');  
  $('.kelemen-mekosiv span').on('click', function() {
  $(this).toggleClass('subtriggered');
  });
})(jQuery);

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

Демонстрация
2020-01-27 Загрузок: 1 Просмотров: 246 Комментарий: (0)

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

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

Оставь свой отзыв

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