Как сделать выезжающую панель на сайте - самое простое решение!


Приветствую вас дорогие читатели! В этом уроке я покажу, как можно легко и просто добавить выезжающую панель на свой сайт! Как сделать выезжающую панель на сайте Панель представляем из себя небольшой DIV блок (вкладку), который крепится в какой-нибудь части экрана - чаще всего, так скажем, прилипает к какой-то из сторон экрана, в моем уроке он будет расположен слева: Вкладка Когда мы нажимаем на это вкладку, то выезжает панель - проще говоря, эта вкладка увеличивается в размерах и в ней содержится какой-то контент - это может быть текст, изображение, видео ролики, ссылки и так далее (всё, что угодно): Выезжающую панель Давайте взглянем на HTML разметку:
<div id="panel" class="close">
	<content>
		Здесь какой-то контент - текст, картинки, видео и так далее..
		<img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/4.jpg">	
	</content>
</div>
Сама панель - это  div блок с идентификаторов - "panel", а всю информацию необходимо размещать в блоке - content. Рассмотри CSS код:
<style>
#panel{
background: #9E9E9E;
position: fixed;
top: 200px;
left: 0;
cursor: pointer;
border-radius: 0 10px 10px 0;
}

.open{
width: 300px;
min-height: 100px;
padding: 20px;
font-size: 20px;
}

.close{
width: 30px;
min-height: 100px;
font-size: 0;
}

content{
display: none;
background: #fff;
padding: 10px;
color: #444;
}
</style>
  • panel - стиля для панели
  • open- стиля для открытой панели
  • close- стиля для закрытой панели
  • content - стиля для контента
JQuery код:
<script>
$(document).ready(function(){

	$('#panel').click(function(){
	
		if( $(this).attr('class') == 'close' ){
			$('content').css('display','block');
			$(this).attr('class','open');
		}else{
			$('content').css('display','none');
			$(this).attr('class','close');
		}		
	});
});
</script>
По нажатию на панель мы проверяем её класс, если он равен закрытому классу, то показываем блок с контентом и изменяем класс на - "close", иначе делаем все наоборот. Для того, что изменить положение вкладки на странице, необходимо изменять стили для блока с id - "panel", например, чтобы разместить вкладку справа, необходимо использовать вот такие стили:
#panel{
background: #9E9E9E;
position: fixed;
top: 200px;
right: 0;
cursor: pointer;
border-radius: 0 10px 10px 0;
}
Теперь вы можете посмотреть на работающий пример и скачать исходный файл!

Demo пример

Скачать исходники

На этом у меня всё, подписывайтесь на обновления и получайте новые уроки и статьи! До новых выпусков, удачи!


Раздел: JavaScript с примерами

Дата последнего изменения: 2016-01-10 16:24:17

Просмотров: 11587

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*