Боковая корзина покупок

demosourse

Корзина покупок, выплывающая с правой стороны экрана.

CSS3 позволяет реализовывать анимированные переходы. Хороший пример реализован в магазине CreativeDash.

Данную технику часто можно наблюдать в интерфейсах для мобильных устройств: панель выплывает из правого или левого бока.

Давайте взглянем на код!

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

HTML-ая часть очень проста. Элемент #cd-cart-trigger будет использоваться для “вызова” корзины. Сами продукты магазина поместим в элемент <main>. Пустой контейнер #cd-shadow-layer будет использоваться для размытия фона. Все элементы корзины будут помещены в ненумерованный список.

</header>

<main>
    <!-- content here -->
</main>

<div id="cd-shadow-layer"></div>

<div id="cd-cart">
    <h2>Cart</h2>
    <ul class="cd-cart-items">
        <li>
            <!-- ... -->
        </li>

        <li>
            <!-- ... -->
        </li>
    </ul> <!-- cd-cart-items -->

    <div class="cd-cart-total">
        <p>Total <span>$39.96</span></p>
    </div> <!-- cd-cart-total -->

    <a href="#0" class="checkout-btn">Checkout</a>

    <p class="cd-go-to-cart"><a href="#0">Go to cart page</a></p>
</div> <!-- cd-cart -->

Добавляем стили

Изначально корзина будет скрыта, используя свойства position:fixed; и right: -100%; При клике по иконке корзины, воспользуемся jQuery для добавления класса .speed-in к элементу #cd-cart. Данный класс изменить значение свойства right с -100% на 0. Всё что осталось, так это добавить CSS3 анимации.

Свойство -webkit-overflow-scrolling: touch; используется для обеспечения удобной прокрутки на мобильных устройствах (браузерах webkit). Данный хак очень рекомендуется при использовании свойства overflow.

#cd-cart {
	position: fixed;
	top: 0;
	right: -100%;
	height: 100%;

	/* header height */
	padding-top: 50px;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	transition: right 0.3s;

	&.speed-in {
		right: 0;
	}
}

Обработка событий

В части просвещённой jQuery не будет ничего особенного: добавим класс к нужному элементу при клике по иконке корзины. Так же стоит отметить, что в изначальной HTML структуре мы помещаем навигацию вне элемента <header>. На мобильных устройствах мы хотим чтобы навигация всплывала как корзина, только из противоположной стороны. Чтобы данную фишку было легче реализовать мы поместим навигацию за пределы шапки. При отображении на экранах свыше 1200px, воспользуемся возможностями jQuery и вернём навигацию обратно.

<header>
    <div id="logo"></div>

    <div id="cd-hamburger-menu"><a class="cd-img-replace" href="#0">Menu</a></div>
    <div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>

    <!-- we use jQuery to move the #main-nav here when the viewport is > 1200px -->
</header>

<nav id="main-nav">
    <ul>
        <li><a href="#0">Home</a></li>
        <li><a href="#0">About</a></li>
        <li><!-- ... --></li>
    </ul>
</nav>
function move_navigation( $navigation, $MQ) {
	if ( $(window).width() >= $MQ ) {
		$navigation.detach();
		$navigation.appendTo('header');
	} else {
		$navigation.detach();
		$navigation.insertAfter('header');
	}
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/side-shopping-cart/
Перевел: Станислав Протасевич
Урок создан: 11 Февраля 2016
Просмотров: 8645
Правила перепечатки


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

^ Наверх ^