Блок для пользовательской биографии

demosourse

Вы можете воспользоваться данной HTML/CSS/jQuery наработкой для того чтобы интересным образом разместить какие-то подробные данные о ваших сотрудниках или пользователях без использования модальных окон.

В некоторых случаях было бы неплохо как-то оригинально отобразить информацию о ваших сотрудниках или пользователях. Для этого необходимо выделить специальное пространство на странице, которое как известно ограничено. Предлагаем вам познакомиться с решением Aquatilis: описание плавно выплывает с боковой стороны без необходимости перезагрузки страницы.

Создание структуре

Мы создадим секцию a #cd-team для хранения информации о работниках фирмы:

<section id="cd-team" class="cd-section">
	<div class="cd-container">
		<h2>Our team</h2>
		<ul>
			<li>
				<a href="#0" data-type="member-1">
					<figure><!-- .... --></figure>
					<div class="cd-member-info"><!-- .... --></div>
				</a>
			</li>

			<li><!-- member 2 --></li>

			<li><!-- .... --></li>
		</ul>
	</div>
</section>

Для каждого работника был создан отдельный блок div.cd-member-bio с подробной информацией.

Стили

Блокам с информацией о работниках фирм будут присвоены свойства: position:fixed;, right: 0; и translateX, равный ширине элемента.

.cd-member-bio {
	position: fixed;
	top: 0;
	right: 0;
	width: 270px;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(270px);
	transition-property: transform;
	transition-duration: 0.3s;
}

При клике по изображению работника, элементу div.cd-member-bio будет присвоен класс .slide-in средствами jQuery. Данный файл выставляет опцию translateX в 0. Запись -webkit-overflow-scrolling: touch; необходима для адекватной работы на тач-устройствах.

Свойство overflow-x: hidden; необходимо для IE, точнее для пресечения отображения горизонтальной полосы прокрутки. Так же задаём overflow: hidden; при отображении панели биографии.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/side-team-member-bio/
Перевел: Станислав Протасевич
Урок создан: 15 Октября 2015
Просмотров: 8544
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^