Выдвигающаяся с любой стороны панель на JQuery
Скрипты для uCoz
Выдвигающаяся с любой стороны панель на JQuery может быть выдвинута и слева, и справа, и сверху, и даже снизу. Если не использовать фиксированное положение панели, то рекомендуется исключить вариант «снизу», т.к. при появившемся вертикальном скроллинге элемент панели будет сохранять положения, а не оставаться видимым на окне.
Установка:
Предоставленные коды ниже нужно размещать в том же порядке (сверху вниз). Вы можете вставить на страницы в секцию BODY просто все коды подряд:
0. Подключение JQuery (между <head> и </head>). На uCoz подключать не нужно.
1. Плагин jQuery TabSlideOut (между <head> и </head>)
2. Код CSS
3. Код HTML
4. Код JavaScript
Замените left на нужную вам сторону. Изменив код, вам нужно будет самостоятельно подобрать высоту и ширина, а также загрузить свою собственную картинку для кнопки.
Установка:
Предоставленные коды ниже нужно размещать в том же порядке (сверху вниз). Вы можете вставить на страницы в секцию 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>
.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>
<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>
$(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 на нужную вам сторону. Изменив код, вам нужно будет самостоятельно подобрать высоту и ширина, а также загрузить свою собственную картинку для кнопки.
Ctrl
Enter
Заметили ошЫбку
Выделите текст и нажмите Ctrl+EnterЧитайте также
Шаблон KinoBazooka для DLE 13.0-14.3 КиноБазука — стильный темный шаблон, настоящая базука от мира кинош...
Шаблон NewFlix v2 для DLE 15.0 В полной новости описание занимает теперь всего лишь один абзац. И ...
Комментарии (0)
Добавить