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

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

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

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

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

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

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

Код

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;
}

Код

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

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

27 Января 2020 Загрузок: 1 Просмотров: 797 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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