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


Приветствую вас дорогие читатели! В этом уроке я покажу, как можно легко и просто добавить выезжающую панель на свой сайт! Как сделать выезжающую панель на сайте Панель представляем из себя небольшой 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 пример

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

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


Раздел: Программирование

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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript
Виртуальная клавиатура на javascript!
Как создать слайд шоу на javascript?

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

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

* Ваше имя:

Ваш e-mail:

*