SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Боковая выдвижная панель jQuery

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

Скачать готовый код Посмотреть Demo

HTML разметка останется почти такой же - понадобится лишь перенести кнопку в блок slide_panel и задать ей класс, например, open (вместо абзаца p кнопку можно обернуть в любой другой допустимый тег - div, span, a и т.д.):

<div class="slide_panel_wrap">
	<p></p>
	<div class="slide_panel">
		<p class="open">Открыть</p>
		<p>В этом блоке может содержаться любой контент.</p>
		<p>В этом блоке может содержаться любой контент. В этом блоке может содержаться любой контент.</p>
		<p>В этом блоке может содержаться любой контент.</p>
	</div>
</div>

Теперь "причешем" конструкцию, что бы на нее было приятнее смотреть:

.slide_panel_wrap {
margin:40px auto;
width:300px;
position:relative; /*обязательное свойство*/
overflow:hidden; /*обязательное свойство*/
}
.slide_panel {
margin-left:-201px; /*обязательное свойство*/
padding:20px; 
width:160px; 
position:relative; /*обязательное свойство*/
top:0; /*обязательное свойство*/
left:0; /*обязательное свойство*/
border:1px solid #367aab;
}
.slide_panel p.open {
padding:3px 5px;
position:absolute; /*обязательное свойство*/
top:10px; /*обязательное свойство*/
left:200px; /*обязательное свойство*/
border:1px solid #367aab;
cursor:pointer;
}

Для блока-обертки .slide_panel обязательно задаем ширину width (в нашем случае она будет равна 202px - 160px ширина текста + 20px внутренние отступы справа и с лева + 2px рамка справа и с лева), с помощью свойств position:relative;, top:0; и left:0; прижимаем блок с текстом к левой стороне и свойством margin-left:-201px; прячем его (останется видимым только правая рамка).

Ну и наконец, блок с кнопкой p.open при помощи свойств position:absolute;, top:10px; и left:200px; позиционируем с правой части текстового блока (что бы он всегда оставался видимым).

Теперь осталось только написать небольшой js код, что бы панель заработала:

$(document).ready(function(){		  
	$("div.slide_panel p.open").toggle(function(){
		$("div.slide_panel").animate({left:'201px'},500);}, function() {
		$("div.slide_panel").animate({left:0},500);
	}); 
});

Скрывать и показывать панель будем с помощью методов toggle и animate. По умолчанию панель скрыта. Когда произойдет щелчек по кнопке, с помощью animate сдвинем вправо панель на 201px ({left:'201px'}) за полсекунды (500). При повторном клике панель сдвинется в обратном направлении за такое же время.

Если требуется прижать панель к правому краю, то нужно всего лишь внести соответствующие изменения в css и js, что бы достичь желаемого результата.

Ну и в заключении хотелось бы упомянуть, что описанный метод отлично работает в ИЕ 7-8-9, Safari, FF и Chrome.

Автор: Super User

Комментарии  

 
+12 # Виктор 22.09.2012 23:20
Такой вопрос, я сделал несколько панелей, каждая открывается со своей кнопки. Панели добавлял в ява скрипте, дублировал оригинал и переназывал каждую по своему.
Так вот как в скрипте прописать, чтобы одна панель убиралась, а другая выезжала? А то у меня все панели остаются открытыми,если все кнопки понажимать. Я не очень в скриптах понимаю true,false.
Заранее благодарю!
мой E-Mail
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Салат 20.11.2012 16:10
Перепробовал различные панели. Все одна хрень.
Прогружается на середине страницы смещая остальные блоки и только потом уходит за экран. Если скорость интернета хорошая, то этого не заметно, а вот если низкая то все это некрасиво выглядит.
В панели вставлен iframe.
Вот что происходит http://salat-production.ru/
Как эту гадость побороть?
Все теги закрыты, проверял.
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Admin 20.11.2012 21:21
На мой взгляд Ваша проблема именно в iframe окне. Без него нельзя никак обойтись?
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # kostya 30.05.2014 17:56
position:fixed попробуй .
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Dmitrii 31.01.2013 00:49
Пробую на Юкоз ничего не получается , может руки у меня кривые?
Ответить | Ответить с цитатой | Цитировать
 
 
+3 # Admin 31.01.2013 18:51
Скорее всего виноват Юкоз, а не руки. Подсказать врят ли смогу, с этим движком принципиально не работаю, но думаю, в интернете отыскать информацию о том, как подключить скрипт к движку, вы найдете. Прежде всего проверьте, подхватывается ли библиотека...
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # kostya 29.05.2014 22:31
Цитирую Dmitrii:
Пробую на Юкоз ничего не получается , может руки у меня кривые?

выпиши css в таблицу стилей js можно прописать в самый конец страниц сайта т.е :http://s019.ra dikal.ru/i605/1 405/e5/3c2f32a6 c939.png , и html код туда где ты хочешь её видеть.
Кроме того можешь заключить ее в таблицу с блоками напиример панельблок
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Izjik 23.04.2014 03:43
Пример в demo архиве уходит за пределы при старте и не возвращается.
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # admin 23.04.2014 08:40
Не совсем понятно, что у вас не так. Если можно, поясните подробнее.
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # гость 06.05.2014 15:09
На какую страницу расположить код, чтобы появилась панель? :-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 06.05.2014 18:11
Естественно, на ту, где вы хотите эту панель увидеть :-)
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # NRK_strannik 29.05.2014 21:24
Люди спасайте поставил эту панель подностроил , и казалось что все работает норм но если поставить её между чем нибудь то она занимет места по высоте ,как это можно убрать чтобы она не занимала места ? сайт у меня стоит на ucoz
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Олег 01.08.2014 02:23
Скопировал код на страницу, добавил стили в style.css, скрипт в script.js, jquery-1.11.1.m in.js, всё это подключил в хедере, результат - вертикальная полоска и кнопка "Открыть" - посреди экрана!? И не работает!? :-x
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Олег 02.08.2014 02:23
Скачал готовый код. Запустил. Кнопки - слева и справа появились и исчезли!? Что за...Или это прикол? :o
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Александр 29.08.2014 11:22
Да, та же самая фигня. После запуска демки обе кнопки просто исчезают.
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # admin 29.08.2014 11:57
Исправил - проблема в демо файле была вызвана подключением последней версии библиотеки jQuery через сервис гугла. К сожалению, работа метода, применяемого в примере, была изменена и код будет коректно работать только с библиотеками версии 8.1 и ниже
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Bkz 10.12.2014 00:08
Напишите пример для jquery 1.9+
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Alex 07.07.2015 21:21
Помогите пожалуйста! Вставляю ваш код (работает замечательно, спасибо) и все вроде как хорошо, но кнопки у меня на середине экрана, а когда пытаюсь сделать так чтобы они были по краям то все перестает работать! Как это сделать?
Ответить | Ответить с цитатой | Цитировать