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

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

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

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

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

Меню для сайта на HTML + CSS

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

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

Установка:

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

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

JS

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

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

Демонстрация
Источник: imapo.ru
2021-09-21 Загрузок: 1 Просмотров: 316 Комментарий: (0)

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

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

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

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