Приветствую вас дорогие читатели! В этом уроке я покажу, как можно легко и просто добавить выезжающую панель на свой сайт!
Панель представляем из себя небольшой 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 код:
- panel – стиля для панели
- open- стиля для открытой панели
- close- стиля для закрытой панели
- content – стиля для контента
JQuery код:
По нажатию на панель мы проверяем её класс, если он равен закрытому классу, то показываем блок с контентом и изменяем класс на – “close”, иначе делаем все наоборот.
Для того, что изменить положение вкладки на странице, необходимо изменять стили для блока с id – “panel”, например, чтобы разместить вкладку справа, необходимо использовать вот такие стили:
#panel{
background: #9E9E9E;
position: fixed;
top: 200px;
right: 0;
cursor: pointer;
border-radius: 0 10px 10px 0;
}
Теперь вы можете посмотреть на работающий пример и скачать исходный файл!
Demo пример
Скачать исходники
На этом у меня всё, подписывайтесь на обновления и получайте новые уроки и статьи! До новых выпусков, удачи!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.