ZorNet.Ru — сайт для вебмастера » Меню для сайта » Складное боковое меню при помощи CSS3

Складное боковое меню при помощи CSS3

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

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

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

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

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

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

HTML

Код

<nav role="makedrop-donavigation">
  <div id="donsanel-dagescrip">
  <input type="checkbox" />
  <span></span>
  <span></span>
  <span></span>
  <ul id="navigation-kotutorial">
  <a href="#"><li>Главная</li></a>
  <a href="#"><li>Zornet.Ru</li></a>
  <a href="#"><li>Скрипты</li></a>
  <a href="#"><li>Шаблоны</li></a>
  <a href="/" target="_blank"><li>Дизайн сайта</li></a>
  </ul>
  </div>
</nav>

CSS

Код

#donsanel-dagescrip
{
  display: block;
  position: relative;
  top: 48px;
  left: 48px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#donsanel-dagescrip input {
  display: block;
  display: block;
  width: 37px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

#donsanel-dagescrip span
{
  display: block;
  width: 35px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #b1afaf;
  border-radius: 5px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.7s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}

#donsanel-dagescrip span:first-child {
  transform-origin: 0% 0%;
}

#donsanel-dagescrip span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#donsanel-dagescrip input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #2f2d2d;
}

#donsanel-dagescrip input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#donsanel-dagescrip input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#navigation-kotutorial {
  position: absolute;
  width: 320px;
  margin: -100px 0 0 -50px;
  padding: 48px;
  padding-top: 115px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#navigation-kotutorial li {
  padding: 10px 0;
  font-size: 22px;
}

#donsanel-dagescrip input:checked ~ ul {
  transform: none;
}

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

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

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

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

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

Kosten

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