ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выдвижное меню сайта слева на CSS3 + jQuery

Выдвижное меню сайта слева на CSS3 + jQuery

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

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

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

1. Если зайти на новую страницу или открыть ресурс, то такой вид изначально идет.

Выдвигающееся меню на jQuery

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

Простое и эффектное выпадающее меню

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

HTML

Код
<div class="geportal-navigation">
  <div class="saprosaidun">
  <a href="#" class="ksubsceb-ngtosane"><span><i class="fas fa-bars"></i></span></a>
  <nav class="vodenaya-navigatsiya">
  <a href="#">Скрипты</a>
  <a href="#">Zornet.Ru</a>
  <a href="#">Стилистика</a>
  <a href="#">Продвижение</a>
  </nav>
  </div>
  <section>
  <h1>ZorNet.Ru - сайт вебмастеров</h1>
  </section>
  </div>

CSS

Код
.geportal-navigation {
  position: relative;
  overflow-x: hidden;
}
.saprosaidun {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 25%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f4f4;
  transition: 0.7s;
  transform: translateX(-100%);
}
.sinadvan-cemoda {
  transform: translateX(0%);
}
.vodenaya-navigatsiya {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50%;
  flex-direction: column;
}
.vodenaya-navigatsiya a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  color: #3d629a;
}
.ksubsceb-ngtosane {
  color: #fbfbfb;
  font-size: 150%;
  position: absolute;
  right: -35px;
  top: 10px;
}

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fbfbfb;
  background-color: #3b59a0;
  transition: 0.5s;
  position: relative;
  z-index: 0;
}

.section_active {
  transform: translateX(25%);
}

JS

Код
$('.ksubsceb-ngtosane').on('click', function(e) {
  e.preventDefault();
  $('.saprosaidun').toggleClass('sinadvan-cemoda');
  $('section').toggleClass('section_active');
})

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

Демонстрация
30 Сентября 2018 Просмотров: 2766 Комментариев: (0)

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

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

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

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