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

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

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

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

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

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

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

Код

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

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

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

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

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

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

Kosten

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