ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вертикальная панель навигаций с помощью CSS

Вертикальная панель навигаций с помощью CSS

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

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

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

Там смотрится при проверке на работоспособность, что находится в материале, точнее кнопки с тенями и синем оттенке.

Это по умолчанию и в рабочем состояние, с прокруткой.

Вертикальная панель меню на HTML и CSS

HTML

Код

<div class="mostasign-cantelemen"><i class="fa fa-futbol-o zornet" style="font-size:48px;"></i></div>
<div class="mostasign-cantelemen"><p>Скрипты</p></div>
<div class="mostasign-cantelemen"><p>Блог</p></div>
<div class="mostasign-cantelemen"><p>Статьи</p></div>

CSS

Код

.mostasign-cantelemen {
  width: 75px;
  height: 75px;
  border: 4px #d8d6d6 solid;
  border-radius: 75px;
  margin-top: 7px;
  margin-right: 0px;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: all .7s ease-in-out;
  background-color: #385073;
  color: #f3efef;
  box-shadow: 0px 0px 20px 3px rgba(72, 69, 69, 0.53), 1px 2px 30px -15px rgba(31, 29, 29, 0.5);
}

.mostasign-cantelemen:hover {
  -webkit-transform: rotate(-360deg);
}

p {
  margin-left: 0px;
  margin-top: 29px;
text-align: center;
}

.zornet {
  margin-left: 13px;
  margin-top: 14px;
}

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

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

31 Августа 2018 Просмотров: 1017 Комментариев: (0)

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

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

Kosten

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