ZorNet.Ru — сайт для вебмастера » Меню для сайта » Горизонтальное меню "выдвижное" на CSS3

Горизонтальное меню "выдвижное" на CSS3

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

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

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

Материал был проверен по всем функциям, что построение можно посмотреть на снимке.

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

HTML

Код

<nav class="dverkasing-kodunels">
  <div class="dingosta-dukosa-tulop"></div>
  </nav>
  <nav class="navigakopsag">
  <ul class="lonaguben-gaplaton">
  <a href="#" class="vunamous-sompanieb">
  <li>Главная</li>
  </a>
  <a href="#" class="vunamous-sompanieb">
  <li>Zornet.Ru</li>
  </a>
  <a href="#" class="vunamous-sompanieb">
  <li>Скрипты</li>
  </a>
  <a href="#" class="vunamous-sompanieb">
  <li>Шаблоны</li>
  </a>
  <a href="#" class="vunamous-sompanieb">
  <li>Контакт</li>
  </a>
  </ul>
  </nav>

CSS

Код

.dverkasing-kodunels, .dverkasing-kodunels:hover, .dverkasing-kodunels.active, .dingosta-dukosa-tulop, .dingosta-dukosa-tulop::before, .dingosta-dukosa-tulop::after, .menu, .menu.active {
  -webkit-transition: 250ms all;
  transition: 250ms all;
}

.dverkasing-kodunels {
  cursor: pointer;
  height: 64px;
  position: absolute;
  top: 2%;
  left: 1%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 64px;
}
.dverkasing-kodunels:hover, .dverkasing-kodunels.active {
  background: #11ab17;
}

.dingosta-dukosa-tulop {
  background: #f6f9f6;
  height: .5rem;
  margin-left: 0.80rem;
  margin-top: 1.80rem;
  width: 2.4rem;
}
.dingosta-dukosa-tulop::before, .dingosta-dukosa-tulop::after {
  background: white;
  content: '';
  display: block;
  height: .5rem;
  width: 2.4rem;
}
.dingosta-dukosa-tulop::before {
  -webkit-transform: translateY(-0.80rem);
  -ms-transform: translateY(-0.80rem);
  transform: translateY(-0.80rem);
}
.dingosta-dukosa-tulop::after {
  -webkit-transform: translateY(0.30rem);
  -ms-transform: translateY(0.30rem);
  transform: translateY(0.30rem);
}
.dingosta-dukosa-tulop.active {
  background: transparent;
}
.dingosta-dukosa-tulop.active::before {
  -webkit-transform: translateY(0rem) rotate(-45deg);
  -ms-transform: translateY(0rem) rotate(-45deg);
  transform: translateY(0rem) rotate(-45deg);
}
.dingosta-dukosa-tulop.active::after {
  -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
  -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
  transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}

.navigakopsag {
  background: #136dbb;
  color: transparent;
  height: 64px;
  position: absolute;
  top: 2%;
  left: 1%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 0rem;
  z-index: -1;
}

.navigakopsag a:hover {
background: #0f4980;
border-left: 0px solid #2a69c3;
}

.navigakopsag.active {
  width: -webkit-calc(100% - 2rem);
  width: calc(100% - 2rem);
}
.navigakopsag.active .vunamous-sompanieb {
  color: white;
}

.lonaguben-gaplaton {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 100%;
  list-style-type: none;
  margin: 0;
  margin-left: 4rem;
  padding: 0;
}

.vunamous-sompanieb {
  color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 1.3rem;
  font-weight: 100;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
.vunamous-sompanieb li {
  margin: auto;
}

@media screen and (max-width: 768px) {
  .navigakopsag {
  height: auto;
  }
  .lonaguben-gaplaton {
  display: block;
  }
  .vunamous-sompanieb {
  padding: 10px 0;
  font-size: 1.2em;
  }
  .navigakopsag.active {
  width: -webkit-calc(100% - 0.5rem);
  width: calc(100% - 0.5rem);
  }
}

Код

$(".dverkasing-kodunels").click(function(){
$(".dverkasing-kodunels, .dingosta-dukosa-tulop, .navigakopsag").toggleClass("active");
});

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

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

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

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

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

Kosten

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