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

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

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

Панель представляем из себя небольшой DIV блок (вкладку), который крепится в какой-нибудь части экрана – чаще всего, так скажем, прилипает к какой-то из сторон экрана, в моем уроке он будет расположен слева:

Вкладка

Когда мы нажимаем на это вкладку, то выезжает панель – проще говоря, эта вкладка увеличивается в размерах и в ней содержится какой-то контент – это может быть текст, изображение, видео ролики, ссылки и так далее (всё, что угодно):

Выезжающую панель

Давайте взглянем на HTML разметку:

<div id="panel" class="close">
	<content>
		Здесь какой-то контент - текст, картинки, видео и так далее..
		<img src="http://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 пример

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

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


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

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

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

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>