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

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

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

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

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

Насчет переходов с одной панели запросов на другую:

Адаптивное меню для сайта | html, css и javascript (jQuery)

Где стрелка показано, то там происходит эффект разворота значка:

Эффект скольжения с выпадающими списками навигации

Установка:

Если не подключена библиотека, то подключаем в HEAD

Код

Ставим по месту вызова

Код

<div class="bokovaya_navigatsiya">
<a href="#" class="savayem_naviga">Вызвать навигацию</a>
</div>

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

HTML

Код

<div class="mobokovaya_menyushka">
  <div class="menyu_navigakas">
  <ul>
  <li>
  <a href="#" class="parent">Архитектура сайта</a>
  <ul>
  <li><a href="#" class="back"></a></li>
  <li><a href="#">Статический вес страницы</a></li>
  <li>
  <a href="#" class="parent">Уникальный цифровой</a>
  <ul>
  <li><a href="#" class="back"></a></li>
  <li><a href="#">Система управления сайтом</a></li>
  <li><a href="#">Резиновый дизайн</a></li>
  <li><a href="#">Кроссбраузерность</a></li>
  <li>
  <a href="#" class="parent">Ссылочное ранжирование</a>
  <ul>
  <li><a href="#" class="back"></a></li>
  <li><a href="#">Компьютеры и комплектующие</a></li>
  <li><a href="#">Фиксированный дизайн</a></li>
  <li><a href="#">Ранжирование</a></li>
  <li><a href="#">Рекомендации</a></li>
  <li><a href="#">Раскрутка сайта</a></li>
  <li><a href="#">Счетчик посещаемости</a></li>
  <li><a href="#">Обмен ссылками</a></li>
  <li><a href="#">Каталог сайтов</a></li>
  </ul>
  </li>
  <li><a href="#">Каталог файлов</a></li>
  </ul>
  </li>
  <li><a href="#">Каталог статей</a></li>
  <li><a href="#">Раздел блога</a></li>
  <li><a href="#">Раздел форума</a></li>
  <li><a href="#"> Разработка фирменного</a></li>
  </ul>
  </li>
  <li><a href="#">Оптимизация сайта</a></li>
  <li>
  <a href="#" class="parent">Данные</a>
  <ul>
  <li><a href="#" class="back"></a></li>
  <li><a href="#">Реферат</a></li>
  <li><a href="#">Веб дизайн</a></li>
  <li><a href="#">Логотип</a></li>
  <li><a href="#">Интернет</a></li>
  <li><a href="#">Аккаунт</a></li>
  </ul>
  </li>
  <li>
  <a href="#" class="parent">Бэклинк</a>
  <ul>
  <li><a href="#" class="back"></a></li>
  <li><a href="#">Таргетинг</a></li>
  <li><a href="#">Вес ссылки</a></li>
  <li>
  <a href="#" class="parent">Геотаргетинг</a>
  <ul>
  <li><a href="#" class="back"></a></li>
  <li><a href="#">Веб сайт</a></li>
  <li><a href="#">Карта сайта</a></li>
  <li><a href="#">Контент-менеджер</a></li>
  <li><a href="#">Разработка сайта</a></li>
  </ul>
  </li>
  <li><a href="#">Ссылочный спам</a></li>
  <li><a href="#">Скрипты</a></li>
  </ul>
  </li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Дизайн сайта</a></li>
  <li><a href="#">Оформление блога</a></li>
  <li><a href="#">Аудитория сайта</a></li>
  <li><a href="#">Контент-менеджер</a></li>
  </ul>
  </div>
</div>
<div class="levaya_storona_navigatora"></div>

На счет класса levaya_storona_navigatora, то он отвечает за фоновую завесу, так как при открытие мы увидим темно прозрачный вид, который распространится на всей страницы, но кроме самой навигаций.

CSS

Код

.levaya_storona_navigatora, .mobokovaya_menyushka{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mobokovaya_menyushka, .mobokovaya_menyushka ul li ul{
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}
.levaya_storona_navigatora{
  display: none;
  cursor: pointer;
  z-index: 10200;
  background: rgba(0, 0, 0, 0.6);
}
.mobokovaya_menyushka{
  -webkit-transform: translateX(-300px);
  transform: translateX(-300px);
  width: 300px;
  overflow: hidden;
  z-index: 10201;
  background: #3884da;
}
.mobokovaya_menyushka.loaded{
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}
.mobokovaya_menyushka .menyu_navigakas{
  overflow: auto;
  max-height: 100%;
  padding-bottom: 30px;
}
.mobokovaya_menyushka ul{
  margin: 0;
  padding: 0;
}
.mobokovaya_menyushka ul li{
  list-style: none;
}
.mobokovaya_menyushka ul li a{
  display: block;
  padding: 15px 20px;
  line-height: 20px;
  font-size: 16px;
  background: #2f7ad0;
  color: #f1f2f3;
  text-decoration: none;
  font-weight: bold;
}
.mobokovaya_menyushka ul li a.parent{
  padding-right: 50px;
  background: #2f7ad0 url("http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/arrow_right.svg") right 20px center no-repeat;
  background-size: 20px;
}
.mobokovaya_menyushka ul li a.parent:hover{
  background: #2f7ad0 url("http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/arrow_left.svg") right 20px center no-repeat;
  background-size: 20px;
}
.mobokovaya_menyushka ul li a.back{
  padding-left: 50px;
  background: #2f7ad0 url("http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/arrow_left.svg") left 20px center no-repeat;
  background-size: 20px;
  box-sizing: border-box;
  min-height: 50px;
}
.mobokovaya_menyushka ul li a.back:hover{
  background: #2f7ad0 url("http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/arrow_right.svg") left 20px center no-repeat;
  background-size: 20px;
}
.mobokovaya_menyushka ul li a:hover{
  background: #2e87ea;
}
.mobokovaya_menyushka ul li ul{
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #347bcc;
  z-index: 2;
}
.mobokovaya_menyushka ul li ul.loaded{
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}
.mobokovaya_menyushka ul li ul.activity{
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 320px){
  .mobokovaya_menyushka{
  width: 240px;
  }
}

Код

$(function() {
  $(document).on("click", ".mobokovaya_menyushka .parent", function(e) {
  e.preventDefault();
  $(".mobokovaya_menyushka .activity").removeClass("activity");
  $(this).siblings("ul").addClass("loaded").addClass("activity");
  });
  $(document).on("click", ".mobokovaya_menyushka .back", function(e) {
  e.preventDefault();
  $(".mobokovaya_menyushka .activity").removeClass("activity");
  $(this).parent().parent().removeClass("loaded");
  $(this).parent().parent().parent().parent().addClass("activity");
  });
  $(document).on("click", ".savayem_naviga", function(e) {
  e.preventDefault();
  $(".mobokovaya_menyushka").addClass("loaded");
  $(".levaya_storona_navigatora").fadeIn();
  });
  $(document).on("click", ".levaya_storona_navigatora", function(e) {
  $(".mobokovaya_menyushka").removeClass("loaded");
  $(this).fadeOut(function() {
  $(".mobokovaya_menyushka .loaded").removeClass("loaded");
  $(".mobokovaya_menyushka .activity").removeClass("activity");
  });
  });
})

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

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

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

08 Августа 2020 Загрузок: 2 Просмотров: 1571 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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