» »

Нижняя выдвижная панель jQuery для сайта

Нижняя выдвижная панель jQuery для сайта

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

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

Это вот просто написал, хотя можно поставить ссылку или картинку под клик.

Простая фиксированная панель для uCoz

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

В низ сайта в самый вверх ставим скрипт:

Код
<style>  
  #acont {background:#bababa; border: 10px solid #888; width:700px; height:100px; position:fixed; bottom:-140px; left:50%; margin-left:-350px;opacity:0;border-radius: 20 20 0 0;-moz-border-radius:20 20 0 0;padding:10px;color:#000;font-weight:bold;}  
  #abtn {position:fixed; bottom:0px; left:50%; margin-left:-75px;width:150px;}  
  </style>  

  <input id="abtn" value="Открыть панель" type="button" />  
  <div id="acont">Здесь любой ваш контент на сайте zornet.ru</div>  

  <script>  
  var b = $('#abtn');  
  var c = $('#acont');  
  b.toggle(function() {  
  b.animate({bottom: '+=100px',opacity: 0.7}, 1000).attr('value' , 'Закрыть панель');  
  c.animate({bottom: '+=100px',opacity: 0.7}, 1000);  
  },  
  function() {  
  b.animate({bottom: '-=100px',opacity: 1}, 1000).attr('value' , 'Открыть панель');  
  c.animate({bottom: '-=100px',opacity: 0}, 1000);  
  });  
  </script>

Находим надпись "Здесь любой ваш контент на сайте zornet.ru" и размешаем свою, только не забываем, что все делаем на панели HTML кодов. Если кто работал с модальным окном, то здесь по сути все также и все по такому же плану заполняется.

Материал подготовлен: Apocalypse
24.04.2017 Просмотров: 527 Комментарий: (7)

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

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

Комментарий: 7
Kosten
Kosten 24.04.2017 01:321
0
Вообще, чтоб понять как она работает, то лучше просто поставить, так как установка легкая, в низ сайта в самый вверх и сохранить. Потом обновить страницу и посмотреть ее характеристики работы, здесь можно ставить на время, это что то актуальное прописать или рекламный блог, вообщем на много чего может пригодиться такая панель.
Сопрано
Сопрано 24.04.2017 01:562
0
Оно так и есть как модальное окно, это каркас под описание и стили, что за дизайн отвечают.
Марковичь
Марковичь 24.04.2017 02:013
0
Почему такое решение на схождение на модальное окно, что информацию там и там можно разместить, но здесь совершенно эффективный и другой механизм показа и скрытие.
tsakonter
tsakonter 24.04.2017 02:094
0
Что с низом, как то не понять, что не полностью окно появляется.
Kosten
Kosten 24.04.2017 03:055
0
Все нормально с ним, так как низ не вылазит, хотя думаю можно сделать, но так лучше, говорю, лучше раз поставить и понять его работу.
Сопрано
Сопрано 24.04.2017 03:266
0
Не очень понравилось, просто лень мне выстраивать под темный дизайн, здесь настроено на светлый.
Kosten
Kosten 24.04.2017 03:317
0
Проверял на темном, а выводил стили через браузер, видать не сохранил, но на стилях цвет каждый может изменить, кто не может, пусть напишет здесь и каким цветом окно сделать.
avatar