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



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

Как сделать выезжающую панель на сайте

Панель представляем из себя небольшой 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 пример

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

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

Оставить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *