ZorNet.Ru — сайт для вебмастера » Меню для сайта » Боковое меню с эффектом зависания на CSS3

Боковое меню с эффектом зависания на CSS3

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

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

Так реально после смотреться, как установите:

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

HTML

Код

<ul class="entrepren-eurseven">
  <li>
  <i class="fa fa-home"></i>
  <div class="animated slideInLeft">Главная</div>
  </li>
  <li>
  <i class="fa fa-user"></i>
  <div class="animated slideInLeft">Zornet.Ru</div>
  </li>
  <li>
  <i class="fa fa-certificate"></i>
  <div class="animated slideInLeft">Профиль</div>
  </li>
  <li>
  <i class="fa fa-desktop"></i>
  <div class="animated slideInLeft">Скрипты</div>
  </li>
  <li>
  <i class="fa fa-align-right"></i>
  <div class="animated slideInLeft">Шаблоны</div>
  </li>
  <li>
  <i class="fa fa-phone"></i>
  <div class="animated slideInLeft">Дизайн</div>
  </li>
</ul>

CSS

Код

.entrepren-eurseven {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1f1d1d;
  display: inline-block;
  height: 100vh;
  position: absolute;
}
.entrepren-eurseven li {
  cursor: pointer;
  border-top: 1px solid #827f7f;
  border-bottom: 1px solid #827f7f;
  margin-bottom: -1px;
  width: 75px;
  height: 58px;
  line-height: 58px;
  font-size: 18px;
  font-family: "Roboto Slab", serif;
  color: #e8e5e5;
}
.entrepren-eurseven li div,
.entrepren-eurseven li i {
  position: absolute;
  text-align: center;
  animation-duration: 0.45s;
}
.entrepren-eurseven li div {
  margin-left: 75px;
  text-align: center;
  width: 158px;
}
.entrepren-eurseven li i {
  line-height: 58px;
  width: 75px;
  z-index: 9;
  background: #161c21;
}
.entrepren-eurseven li div {
  display: none;
  z-index: 1;
  background: #124b7d;
}

.entrepren-eurseven li:hover > div {
  display: inline-block;
}
.entrepren-eurseven li:hover i {
  background: #124b7d;
}

Изначально создано для использование одностраничных приложений на странице.

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

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

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

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

Kosten

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