SiteIS

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

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

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

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

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

Выдвижная jQuery панель

Что мы будем делать?

Мы создадим кнопку, по клику на которой будет появляться блок с произвольным содержимым. При повторном клике по кнопке блок будет исчезать. Сама кнопка будет менять внешний вид в зависимости от того, виден блок с содержимым, или нет.

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

Сначала напишем html разметку для нашей выдвижной панели:

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

Здесь все предельно просто. Блок с классом slide_panel_wrap играет вспомогательную роль (обертка). В данном примере с его помощью мы сможем отцентрировать всю конструкцию как нам требуется по дизайну. Тегами p оборачиваем кнопку. И, наконец, блок slide_panel является тем самым блоком, который будет появляться и исчезать.

Что бы все выглядело симпатично, добавим нашей конструкции стилевые правила:

.slide_panel_wrap {margin:60px auto; width:200px;}
.slide_panel_wrap p {line-height:30px;}
.slide_panel {padding-top:30px; width:100%; height:70px; border:1px solid #000; background:#e5e5e5; text-align:center; display:none;}

Теперь, когда все выглядит более менее прилично, напишем скрипт, что бы панель с контентом показывалась и пряталась при клике на ссылке. А что бы подсказать, что у нас выдвижная панель, снабдим ссылку стрелкой, которая будет менять направление в зависимости от состояния блока с контентом.

$(document).ready(function(){		  
	$(".slide_panel_wrap p").click(function(){
		$(".slide_panel").slideToggle('slow');
		$(this).toggleClass("active");
	});
	return false;	  
});

Желаемый результат достигнут.

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

Комментарии  

 
0 # Станислав 15.07.2013 17:50
Нравиться сайт. Автор красава. Задавал такой вопрос, только в другой теме, индексируется ли текст в этой форме поисковыми системами?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 15.07.2013 18:14
Я вам в другой теме и ответил :-) Индексируется
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Дмитрий 15.01.2014 15:12
подскажите пожалуйста, можно ли реализовать данную панельку так, чтобы окно с контентом открывалось не вниз а вверх? Т.е. если кнопка располагается в нижнем подвале то при нажатии окно всплывало над кнопкой а не под ней. Если да то напишите пожалуйста как.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Юрий 18.11.2015 21:54
День добрый. Спасибо тебе человеческое за простые решения. Все отлично работает. Рекомендую этот сайт тем, кто начал создавать свои сайты совсем недавно. Все просто и понятно, без лишних морок. Пожелания: уважаемый автор, обнови пожалуйста ссылку на этой странице. Выдвижная jQuery панель готовый код скачать нет возможности. Вариант скопировал вставил, нормальный, но не всем будет понятен. Если в постах напишешь как подключать файлы js и т.д. благодарности новичков не будет придела. Либо в статье ссылки дай, как можно подключить файлы. За все остальное, огромное спасибо.
Ответить | Ответить с цитатой | Цитировать