Главная » Файлы » Скрипты для uCoz » Скрипты для пользователей сайта

Выдвигающаяся с любой стороны панель
[ · Скриншот ] 26.01.2012, 03:13
Выдвигающаяся с любой стороны панель

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

1. CSS

Code
.panel {
  padding: 20px;
  width: 250px;
  background: #eeeeee;
  border: #282828 2px solid;
  font-family: Georgia;
}


2. Подключение jQuery

Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>


3. Подключение jQuery TabSlideOut

Code
<script src="jquery.tabslideout.v1.2.js" type="text/javascript"></script>


4. JavaScript

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


Все скрипты подключаем в раздел в том порядке в котором указано выше.


5. HTML

Code
<div class="panel">
  <a class="handle" href="http://jemand.ru">Content</a> <!-- Ссылка для пользователей с отключенным JavaScript -->
  <h3><span lang="ru">Заголовок</span></h3><br>
  <span lang="ru">
  Любое содержание здесь!
  </span>
</div>
Категория: Скрипты для пользователей сайта | Добавил: kevin | Теги: Выдвигающаяся, пользователи, стороны, любой, панель
Просмотров: 1247 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]