Nk-CS.Ru: Все для вашего портала uCoz
Авторизация

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

Выдвигающаяся с любой стороны панель на JQuery Выдвигающаяся с любой стороны панель на 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 на нужную вам сторону. Изменив код, вам нужно будет самостоятельно подобрать высоту и ширина, а также загрузить свою собственную картинку для кнопки.

0.0
0 оценок
0.0
Дизайн:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Функционал:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Мобильность:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Общая оценка:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Читайте также
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Авторизация
лучший сайт где можно скачать шаблоны для dle 11.3 бесплатно