ZorNet.Ru — сайт для вебмастера » HTML и CSS » Боковые кнопки для сайта с эффектом

Боковые кнопки для сайта с эффектом

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

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

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

Проверено на demo страницы, где в точности так выглядят эти кнопки.

Красивые боковые кнопки с появление при клике

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

HTML

Код

<div id="keseminan-gionmethods">
  <div class="democatized-sepractices">
  <a class="busineges-knownaned" href="#" target="_blank"><i class="fa fa-life-ring" aria-hidden="true"></i><span class="saengineop-kumizaton">Автомобильные шины</span></a>
  </div>
  <div class="marketin-ganudieren">
  <a class="busineges-knownaned" href="#" target="_blank"><i class="fa fa-binoculars" aria-hidden="true"></i><span class="saengineop-kumizaton">Просмотр фотографий<br>windows</span></a>
  </div>
  <div class="sinevds-abingapub">
  <a class="busineges-knownaned" href="#" target="_blank"><i class="fa fa-shopping-basket" aria-hidden="true"></i><span class="saengineop-kumizaton">Купить фотоаппарат canon</span></a>
  </div>
  <div class="saguned-gapububeg">
  <a class="busineges-knownaned" href="#" target="_blank"><i class="fa fa-camera" aria-hidden="true"></i><span class="saengineop-kumizaton">Купить фотоаппарат canon</span></a>
  </div>
</div>

CSS

Код

@media only screen and (max-width:992px)
{
  #keseminan-gionmethods
  {
  display: none;
  }
}
@media only screen and (min-width:992px)
{
  #keseminan-gionmethods
  {
  display: block;
  left: 0;
  position: fixed;
  top: 20%;
  width: 60px;
  z-index: 100;
  }
  #keseminan-gionmethods div>a
  {
  background: #141414;
  border-top: 1px solid #4c4c4c;
  display: block;
  height: 60px;
  text-align: center;
  }
  #keseminan-gionmethods div.democatized-sepractices>a
  {
  border-top: 0;
  border-top-right-radius: 3px;
  moz-border-radius-topright: 3px;
  webkit-border-top-right-radius: 3px;
  }
  #keseminan-gionmethods div.saguned-gapububeg>a
  {
  border-bottom-right-radius: 3px;
  moz-border-radius-bottomright: 3px;
  webkit-border-bottom-right-radius: 3px;
  }
  #keseminan-gionmethods div>a:hover
  {
  background: #10489e;
  }
  #keseminan-gionmethods div>a i
  {
  color: #f9f5f5;
  font-size: 20px;
  line-height: 59px;
  }
}

.busineges-knownaned
{
  position: relative;
}
.busineges-knownaned .saengineop-kumizaton {
  background: #0e0d0d;
  box-shadow: 2px 2px 5px #a29d9d;
  color: #ececec;
  margin-right: -230px;
  opacity: 0;
  padding: 12px;
  position: absolute;
  right: 9999px;
  top: 4px;
  transition: opacity 250ms ease-out;
  width: 198px;
}
.busineges-knownaned .saengineop-kumizaton:before
{
  border: 8px solid transparent;
  border-right-color: #141414;
  color: #141414;
  content: ' ';
  height: 0;
  left: -16px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  width: 0;
}
.busineges-knownaned:hover .saengineop-kumizaton
{
  opacity: 1;
  right: 0px;
}

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

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

10 Января 2019 Загрузок: 1 Просмотров: 1631 Комментариев: (8)

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

СКАЧАТЬ

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 8
Порядок вывода комментариев: CMS 10 Января 2019 21:04¹ 0 Как подключить шрифтовые иконки Font Awesome (оставил для новичков) Grician 06 Июля 2021 16:25² 0 А можно как-то сделать, что бы она была снизу? Kosten 06 Июля 2021 17:54³ 0 Находим с CSS top: 20%; и чем выше делаем значение, к примеру top: 35%; - тем ниже каркас спускаеться. Grician 07 Июля 2021 12:49⁴ 0 Имеется в виду, что бы панель была не сбоку, а снизу посередине. waak 07 Июля 2021 16:51⁵ +2 css стили Код .clr {clear: both;} @media only screen and (max-width:992px) { #left-buttons { display: none; } } @media only screen and (min-width:992px) { #left-buttons { display: block; bottom: 0; left: 0; right: 0; margin: auto; position: fixed; width: 260px; z-index: 100; } .waaktut {position: relative;} .waaktut div { background: #141414; border-top: 1px solid #4c4c4c; display: block; height: 65px; width: 65px; float: left; text-align: center; } #left-buttons div.buy-supplement { border-top: 0; border-top-right-radius: 3px; moz-border-radius-topright: 3px; webkit-border-top-right-radius: 3px; } #left-buttons div.support { border-bottom-right-radius: 3px; moz-border-radius-bottomright: 3px; webkit-border-bottom-right-radius: 3px; } #left-buttons div:hover { background: #ff5100; } #left-buttons div>a i { color: #fff; font-size: 18px; line-height: 60px; } } .field-tip .tip-content { background: #141414; color: #fff; moz-transition: opacity 250ms ease-out; ms-transition: opacity 250ms ease-out; opacity: 0; o-transition: opacity 250ms ease-out; padding: 10px; position: absolute; right: 0px; left: 0; bottom: -200px; transition: opacity 250ms ease-out; webkit-transition: opacity 250ms ease-out; } .waaktut div:hover .tip-content { opacity: 1; z-index: 2; bottom: -2px; } html разметка Код <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="left-buttons"> <div class="waaktut"> <div class="buy-supplement"> <a class="field-tip" href="#" target="_blank"><i class="fa fa-shopping-basket" aria-hidden="true"></i><span class="tip-content">Купить шаблон</span></a> </div> <div class="admin-panel"> <a class="field-tip" href="#" target="_blank"><i class="fa fa-cogs" aria-hidden="true"></i><span class="tip-content">Админ-панель<br>логин и пароль: demo</span></a> </div> <div class="documentation"> <a class="field-tip" href="#" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i><span class="tip-content">Документация</span></a> </div> <div class="support"> <a class="field-tip" href="#" target="_blank"><i class="fa fa-users" aria-hidden="true"></i><span class="tip-content">Техническая поддержка</span></a> </div> <span class="clr"></span> </div> </div> Сделал посередине в низу немного переписал стили подсказок так же убрал треугольник что бы не заморачиваться с его расстановкой и общие стили тоже поправил пользуйтесь наздоровье Kosten 09 Июля 2021 21:29⁶ 0 Grician, вы бы ради приличие отписались, то человек время на вас потратил, выстроил как нужно, видно медео, что будет корректен на мобильных аппаратах. Vaak, привет, если-что, то в материал закину с пометкой, что ты доработал материал. Grician 13 Июля 2021 17:01⁷ 0 Еще не пробовал ставить. Чуть позже обязательно отпишусь. Ну в любом случае спасибо! Kosten 13 Июля 2021 22:52⁸ 0 Было бы интересно, что получилось)))