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

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

1. CSS

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

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

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

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

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

Скачать: jquery.tabslideout.v1.2

4. JavaScript

<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>

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

5. HTML

<div class="panel">
	<a class="handle" href="https://site.com">Content</a> <!-- Ссылка для пользователей с отключенным JavaScript -->
	<h3><span lang="ru">Заголовок</span></h3><br>
	<span lang="ru">
		Любое содержание здесь!
	</span>
</div>

 

18 356 просмотров

Один комментарий для “Выдвигающаяся с любой стороны панель”

  • Алексей
    19 января, 2015 в 14:14|date at time

    Привет.
    Очень понравилась ваша панелька!
    Дело в том, что я «чайник» в jquery. Большая просьба описать подробнее все шаги добавления кодов. Буду очень благодарен.

    Я хочу внизу добавить плавающую кнопку, при нажатии на которую выезжает блок…

    Ответить

Оставьте комментарий