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

Горизонтальное меню сбоку сайта на jQuery

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

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

Так видим в раскрытом виде:

При нажатие плавно переходит в кнопку:

Выдвижное меню сайта на CSS

Установка:

Прописываем в HEAD

Код

HTML

Код

<div class="navigatsiya expanded">
  <div class="aveceptacle close">
  <div class="toggle close"></div>
  </div>
  <span class=""><a href="#">Скрипты</a></span>
  <span class=""><a href="#">Шаблоны</a></span>
  <span class=""><a href="#">Форум</a></span>
  <span class=""><a href="#">Каталоги</a></span>
</div>

CSS

Код

.navigatsiya {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 70px;
  width: 70px;
  padding: 15px 20px;
  border-radius: 5px;
  background: #f3f0f0;
  box-shadow: 0 4px 64px rgba(0, 0, 0, 0.15);
  transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
  z-index: 2;
}

.navigatsiya.expanded {
  height: 80px;
  width: 600px;
}

.navigatsiya span {
  white-space: nowrap;
  visibility: visible;
  opacity: 1;
  transition: .3s;
  transform: rotateY(0deg);
}

.navigatsiya span:nth-of-type(1) {
  transition-delay: .4s;
}

.navigatsiya span:nth-of-type(2) {
  transition-delay: .5s;
}

.navigatsiya span:nth-of-type(3) {
  transition-delay: .6s;
}

.navigatsiya span:nth-of-type(4) {
  transition-delay: .7s;
}

.navigatsiya span.hidden {
  width: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(90deg);
}

.navigatsiya span.hidden:nth-of-type(1) {
  transition-delay: .3s;
}

.navigatsiya span.hidden:nth-of-type(2) {
  transition-delay: .2s;
}

.navigatsiya span.hidden:nth-of-type(3) {
  transition-delay: .1s;
}

.navigatsiya span.hidden:nth-of-type(4) {
  transition-delay: 0s;
}

.navigatsiya a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  color: #2b2a2a;
  padding: 5px;
  transition: .3s;
}

.navigatsiya a:hover {
  color: #D84315;
}

.aveceptacle {
  order: 1;
  width: 20px;
  height: 24px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.aveceptacle:hover .toggle:before {
  top: -9px;
}

.aveceptacle:hover .toggle:after {
  bottom: -7px;
}

.aveceptacle .toggle {
  position: relative;
  width: 100%;
  height: 2px;
  background: #a29c9c;
}

.aveceptacle .toggle:before {
  position: relative;
  display: flex;
  top: -7px;
  height: 2px;
  width: 100%;
  background: #a29c9c;
  content: "";
  transition: top .25s ease, bottom .25s ease, transform .5s ease;
}

.aveceptacle .toggle:after {
  position: relative;
  display: flex;
  bottom: -5px;
  height: 2px;
  width: 100%;
  background: #a29c9c;
  content: "";
  transition: top .25s ease, bottom .25s ease, transform .25s ease;
}

.aveceptacle .toggle.close {
  height: 0;
}

.aveceptacle .toggle.close:before {
  transform: rotate(45deg);
  top: 0;
}

.aveceptacle .toggle.close:after {
  transform: rotate(-45deg);
  bottom: 2px;
}

@keyframes respiration {
  0% {
  min-height: 100vh;
  border: 0vh solid #f3f0f0;
  }
  75% {
  min-height: 95vh;
  border: 2.5vh solid #f3f0f0;
  }
  100% {
  min-height: 100vh;
  border: 0vh solid #f3f0f0;
  }
}

Код

$('.aveceptacle').on('click', function() {
  $('.navigatsiya').toggleClass('expanded');
  $('span').toggleClass('hidden');
  $('.aveceptacle , .toggle').toggleClass('close');
});

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

Демонстрация
Источник: imapo.ru

21 Сентября 2021 Загрузок: 1 Просмотров: 1096 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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