Главная » Файлы » Скрипты для 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> | |
Просмотров: 1446 | Загрузок: 0 | |
Всего комментариев: 0 | |