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

Боковая панель с появлением клика на jQuery

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

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

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

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

Делаем боковое выезжающее меню на jQuery

Делаем боковое выезжающее меню на jQuery

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

Выдвигающаяся боковая панель с помощью CSS

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

Первым делом подключаем JQuery (это нужно сделать между head). Если у вас конструктор uCoz, то подключение не нужно.

Код

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

Код

Этот код по месту, где хотите видеть панель.

HTML

Код

<div class="developasokeg">
  <div id="kegeatures"><i class="fa fa-bars"></i></div>
  <ul>
  <li><a href="#">Zornet.Ru</a></li>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Связь</a></li>
  </ul>
  </div>

CSS

Код

.developasokeg {
  position: fixed;
  top: 15px;
  right: 7px;
  background-color: #f7f3f3;
  height: 50px;
  border-radius: 100px;
  overflow: hidden;
  transition: all 0.5s;
  border: 2px solid #d2caca;
  box-shadow: 0px 4px 10px rgba(76, 73, 73, 0.31), 1px 1px 14px 1px rgba(33, 31, 31, 0.25);
}

.developasokeg div {
  float: right;
  margin-top: 11px;
  font-size: 25px;
  width: 39px;
  cursor: pointer;
  color: #567588;
}

.developasokeg ul{
  list-style: none;
  float: left;
  font-size: 19px;
  margin: 9px 15px 0 20px;
}

.developasokeg ul li{
  display: inline-block;
  padding: 5px 10px;
}

.developasokeg ul li a {
  text-decoration: none;
  color: #2d2b2b;
}

.developasokeg ul li a:hover{
  color: #2373c1;
}

Код

$(document).ready(function() {
  $("#kegeatures").hover(function() {
  $(".developasokeg").css("width", "auto");
  });

  $(".developasokeg").mouseleave(function() {
  $(this).css("width", "57px");
  });

  $(window).on("scroll", function() {
  var scroll = $(window).scrollTop();
  if (scroll > 250) {
  $(".developasokeg").css("width", "auto");
  } else {
  $(".developasokeg").css("width", "57px");
  }
  });
  });

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

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

31 Декабря 2018 Загрузок: 1 Просмотров: 1124 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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