» »

Выдвигающаяся панель связи на чистом CSS

Выдвигающаяся панель связи на чистом CSS

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

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

Проверил на работоспособность, все корректно работает.

Выезжающий блок панели для сайта

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

Чтоб на всех страницах вида была кнопка, то в низ сайта устанавливаем код.

Код
<div id="zenukader">
  <img src="http://zornet.ru/Aben/ABGDA/zornet_ru/feedback.png" alt="Отправить отзыв" />
  <div id="zenukader_inner">
  <form>
  <textarea></textarea>
  <input class="redsabunerksa" type="submit" value="Отправить отзыв"></input>
  </form>
  </div>
  </div></pre></div>

CSS

Код
#zenukader {
  position: fixed;
  top: 40px;
  left: 0;
  width: 35px;
  padding: 12px 0;
  text-align: center;
  background: #5380ad;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  }
  #zenukader_inner {
  position: fixed;
  top: 41px;
  left: -250px;
  background: #5380ad;
  width: 199px;
  padding: 25px;
  height: 130px;
  transition-duration: 0.3s;
  text-align: left;
  border-radius: 0 0 5px 0;
  }
  #zenukader_inner textarea {
  width: 201px;
  height: 102px;
  margin-bottom: 6px;
  }
  #zenukader:hover {
  left: 249px;
  }
  #zenukader:hover #zenukader_inner {
  left: 0;
  }

.redsabunerksa {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .3em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: rgba(253, 190, 51, 0.98) #000 rgba(215, 114, 6, 0.97);
  border-radius: 6px;
  background: linear-gradient(rgba(243, 174, 15, 0.99), rgba(227, 137, 22, 0.98)) rgba(227, 137, 22, 0.96);
  transition: 0.1s;
}

Теперь появилась возможность вывести на главную страницу, как информативного плана, так и функциального.
20.11.2017 Просмотров: 399 Комментарий: (2)

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

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

Комментарий: 2
Kosten
Kosten 20.11.2017 23:181
0
Если кому нужна такая функция, чтоб по клику появлялась. но вместо окна, было место под запросы, то эта панель больше подойдет, где можно написать ключевые слова и поставить на ссылки, под переход на материал.
Kosten
Kosten 20.11.2017 23:352
0
Немного кнопка вызова поднялась вверх, все в стилях выровнять нужно, и как сам оттенок цвета.
avatar