Выдвигающаяся с любой стороны панель на JQuery

Выдвигающаяся с любой стороны панель на JQuery

02016-04-292413413Денис Абдуллин

Скрипт представляет собой нечто вроде плагина. Код создание такой выдвижной панели имеет максимальное количество настроек: можно настроить положение, откуда должна выдвигаться сама панель, можно настроить размеры видимой области (изображение), можно настроить скорость, а еще вы можете выбрать вариант задвижки (при наведении или при клике).

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

Для чего можно применить выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов-визиток.

Установка

Предоставленные коды ниже нужно размещать в том же порядке (сверху вниз). Вы можете вставить на страницы в секцию BODY просто все коды подряд.

0. Подключение JQuery (между <head> и </head>). На uCoz подключать не нужно.

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

1. Плагин jQuery TabSlideOut (между <head> и </head>)

Код
<script src="jquery.tabslideout.js" type="text/javascript"></script>

2. Код CSS

Код
<style>
.panel {  
  height:138px;  
  width: 250px;  
  background: #0080d9;  
  color:#FFFFFF  
}  
.sp {padding:20px}
</style>

3. Код HTML

Код
<div class="panel">  
<div class="sp">  
<a class="handle" href="http://yraaa.ru">Урааа</a>
  <span lang="ru">  
  мой@e-mail

  
  skype

  
  8-000-000-00-00

  
  icq: 000000000  
  </span>  
</div>  
</div>

4. Код JavaScript

Код
<script type="text/javascript">
$(function(){  
  $('.panel').tabSlideOut({ //Класс панели  
  tabHandle: '.handle', //Класс кнопки  
  pathToTabImage: 'contacts.png', //Путь к изображению кнопки  
  imageHeight: '138px', //Высота кнопки  
  imageWidth: '40px', //Ширина кнопки  
  tabLocation: 'left', //Расположение панели top , right, bottom, left  
  speed: 300, //Скорость анимации  
  action: 'click', //Метод показа click, hover  
  topPos: '35%', //Отступ сверху  
  fixedPosition: false //false - position: absolute, true - position: fixed  
  });  
});
</script>

Замените left на нужную вам сторону. Изменив код, вам нужно будет самостоятельно подобрать высоту и ширина, а также загрузить свою собственную картинку для кнопки.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (13)
Ramil Khusainov 2013-08-19 в 22:56 / МатериалСпам
Можно ли сделать такую же кнопку только с "обратной связью"?
0
Гость 2013-07-08 в 19:41 / МатериалСпам
Подскажите, как сделать, чтобы данная панель отображалась на всех страницах сайта
0
Гость 2013-03-08 в 16:07 / МатериалСпам
можно ли сделать чтобы панель плавно выдвигалась при наведении на ярлык?
0
Юрий Герук 2016-04-29 в 20:30 / МатериалСпам
В коде выше пропустили закрывающий </script> после какое-нибудь школоло скопирует и будет говорить, что не работает.
0
Денис Абдуллин 2016-04-29 в 21:26 / Материал
Спасибо
0
Гость 2012-10-12 в 03:41 / МатериалСпам
Будем пробовать
0
Першин Владимир 2012-07-04 в 23:58 / МатериалСпам
В общем разобрался, путь к картинке надо прописывать полностью. У меня вот вопрос ещё такой. Можно ли сделать так, чтобы картинка кнопки менялась? Ну то есть в закрытом состоянии одна, а в открытом другая.
И ещё вопрос. Можно ли сделать так, чтобы в этом окне отображался определённый материал Joomla?
0
Першин Владимир 2012-07-04 в 13:17 / МатериалСпам
Так в том-то и дело, что путь прописан в таком виде: "images/contacts.png", и всё равно картинка не отображается
0
Гость 2012-07-04 в 06:33 / МатериалСпам
Уж точно не относительный, вопрос должен был быть: фиксированный или абсолютный. Картинку к себе закачай на сайт и путь напиши этой картинки
0
Гость 2013-08-15 в 11:19 / МатериалСпам
Что то как то не отображается панель в новости.
0
Денис Абдуллин 2016-05-14 в 09:46 / Материал
Посмотрел, в исходном коде у вас вообще нет кнопки. Вставьте нормально
0
Антон Тимошин 2016-05-13 в 12:01 / МатериалСпам
Подскажите где моя ошибка сделал как тут описано? а на моём сайте не высвечивается кнопка вот мой сайт кевн.рф
0
Игорь Савичев 2016-10-31 в 18:15 / МатериалСпам
Спасибо, забрал)
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.