ZorNet.Ru — сайт для вебмастера » HTML и CSS » Правое выезжающее боковое меню на CSS

Правое выезжающее боковое меню на CSS

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

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

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

Если рассматривать как работает, то все по стандарту:

1. Так выглядит при заходе на сайт или открытие страницы.

2. Здесь уже после клика появились запросы, что стоят под ссылками.

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

HTML

Код

<div class="sibletokad-meyboarud">
  <div class="klagekusin">
  <a href="/" class="paneranis-komising"><span><i class="fas fa-bars"></i></span></a>
  <nav class="somizaton-ustrating">
  <a href="http://zornet.ru">Скрипты</a>
  <a href="#">Шаблоны</a>
  <a href="#">Zornet.Ru</a>
  <a href="#">Контакты</a>
  <a href="#">CSS сайта</a>
  <a href="#">Стилистика</a>
  </nav>
  </div>
  <section>
  <h1>ZorNet - портал для вебмастера</h1>
  </section>
  </div>

CSS

Код

.sibletokad-meyboarud {
  position: relative;
  overflow-x: hidden;
}
.klagekusin {
  position: absolute;
  top: 0;
  left: 75%;
  z-index: 1;
  width: 25%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  transition: 0.4s;
  transform: translateX(100%);
}
.menu_active {
  transform: translateX(0%);
}
.somizaton-ustrating {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 49%;
  flex-direction: column;
}
.somizaton-ustrating a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  color: #47608e;
}
.paneranis-komising {
  color: #f8f9fb;
  font-size: 147%;
  position: absolute;
  left: -37px;
  top: 8px;
}

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fcfdff;
  background-color: #4a71a2;
  transition: 0.7s;
  position: relative;
  z-index: 0;
}

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

Код

$('.paneranis-komising').on('click', function(e) {
  e.preventDefault();
  $('.klagekusin').toggleClass('menu_active');
  $('section').toggleClass('section_active');
})

У вас будет возможность изначально посмотреть Demo страницу, где предоставлена навигация, что можно более детального изучить по функциональности.

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

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

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

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

Kosten

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