ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Выпадающее стеклянное меню сбоку на CSS

Выпадающее стеклянное меню сбоку на CSS

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

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

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

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

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

Горизонтальная навигация в адаптивном виде

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

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

Код

HTML

Код

<div class="kuseagein-moduvaseceb">
  <div class="gequorgecl-edavagable">
  <span class="vakebles">☰</span>
  <span class="sdukopan">⚊</span>
  </div>
  <div class="voiceguid-kagasenav">ZorNet - сайт вебмастера</div>
  <ul class="navogicesav">
  <li><a href="/">Скрипты для сайта</a></li>
  <li class="cesavduvang"><a href="/">Шаблоны для ресурса</a></li>
  <li class="nagamite-dsenav">
  <a href="http://zornet.ru/">Стилистика для сайта</a>
  <ul class="navogicesav">
  <li><a href="/">Под категория №1</a></li>
  <li><a href="/">Под категория №2</a></li>
  <li><a href="/">Под категория №3</a></li>
  </ul>
  </li>
  <li><a href="/">Связь с администрацией</a></li>
  </ul>
  </div>

CSS

Код

.kuseagein-moduvaseceb {
  border: 1px solid rgba(236, 233, 233, 0.13);
  height: 100%;
  width: 319px;
  background-color: rgba(206, 197, 197, 0.07);
  color: #f1eded;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: calc(100% - 319px);
  transition: right 0.5s;
}
  .kuseagein-moduvaseceb .gequorgecl-edavagable {
  border: 1px solid rgba(69, 70, 70, 0.68);
  border-left: none;
  height: 52px;
  width: 51px;
  background-color: rgba(69, 70, 70, 0.68);
  overflow: hidden;
  position: absolute;
  top: -1px;
  right: calc(0px - 52px);
  }
.kuseagein-moduvaseceb .gequorgecl-edavagable span {
  width: 48px;
  height: 48px;
  line-height: 49px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0);
  color: inherit;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  transition: right 0.25s;
}
  .kuseagein-moduvaseceb .gequorgecl-edavagable .vakebles {
  right: -50px;
  }
  .kuseagein-moduvaseceb .voiceguid-kagasenav {
  padding: 15px;
  height: 51px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 20px;
  }
  .kuseagein-moduvaseceb .navogicesav {
  list-style-type: none;
  }
  .kuseagein-moduvaseceb .navogicesav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .kuseagein-moduvaseceb .navogicesav a {
  display: block;
  padding: 15px;
  line-height: 20px;
  color: #f7f4f4;
  text-decoration: none;
  position: relative;
  z-index: 0;
  }
.kuseagein-moduvaseceb .navogicesav a::after {
  content: "";
  background-color: rgba(199, 197, 197, 0.16);
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  left: 0;
  transition: left 0.25s, right 0.25s;
}
  .kuseagein-moduvaseceb .navogicesav a:hover::after {
  right: 0;
  }
  .kuseagein-moduvaseceb .nagamite-dsenav {
  position: relative;
  }
  .kuseagein-moduvaseceb .nagamite-dsenav::before {
  content: "";
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  height: 49px;
  width: 49px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  }
  .kuseagein-moduvaseceb .nagamite-dsenav::after {
  content: "\027A4";
  padding: 15px 0;
  height: 49px;
  width: 49px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transform: rotate(90deg);
  transition: transform 0.25s;
  }
  .kuseagein-moduvaseceb .nagamite-dsenav > .navogicesav {
  overflow: hidden;
  max-height: auto;
  }
  .kuseagein-moduvaseceb .navogicesav .navogicesav {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .kuseagein-moduvaseceb .nagamite-dsenav > .navogicesav > li > a {
  padding-left: 45px;
  transition: padding 1s;
  }
  .kuseagein-moduvaseceb .nagamite-dsenav > .navogicesav > li:last-child {
  border-bottom: none;
  }
  /* Closed States */
  .kuseagein-moduvaseceb:not(.open) {
  right: 100%;
  }
  .kuseagein-moduvaseceb:not(.open) .gequorgecl-edavagable .vakebles {
  right: 0px;
  }
  .kuseagein-moduvaseceb:not(.open) .gequorgecl-edavagable .sdukopan {
  right: 50px;
  }
  .kuseagein-moduvaseceb .nagamite-dsenav:not(.open)::after {
  transform: rotate(-90deg);
  }
  .kuseagein-moduvaseceb .nagamite-dsenav:not(.open) > .navogicesav {
  border-top: none;
  max-height: 0;
  }
  .kuseagein-moduvaseceb .nagamite-dsenav:not(.open) > .navogicesav > li > a {
  padding-left: 15px;
  }

Код

$(function () {
  $('.kuseagein-moduvaseceb .gequorgecl-edavagable .vakebles').on('click', function () {
  $('.kuseagein-moduvaseceb').addClass('open');
  });
  $('.kuseagein-moduvaseceb .gequorgecl-edavagable .sdukopan').on('click', function () {
  $('.kuseagein-moduvaseceb').removeClass('open');
  });
  $('.kuseagein-moduvaseceb .nagamite-dsenav a').on('click', function (e) {
  e.stopPropagation();
  });
  $('.kuseagein-moduvaseceb .nagamite-dsenav').on('click', function () {
  $(this).toggleClass('open');
  });
  });

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

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

23 Января 2019 Загрузок: 2 Просмотров: 1565 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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