Выдвижная боковая корзина на jQuery

Эта анимированная боковая корзина - это умный и ненавязчивый способ позволить пользователям входить и выходить из списка продуктов, которые они хотят купить, без необходимости обновлять страницу или запускать всплывающее окно.

 

ДЕМО

ИСХОДНИКИ

 

CSS3 может привести к инфляции анимаций и переходов. Иногда, однако, эта техника может использоваться для благородного намерения: боковая корзина, всего в нескольких кликах от пользователя, - это что-то умное.

Опыт аналогичен мобильным приложениям, что означает, что люди привыкли видеть контент со стороны. Кроме того, пользователи могут легко удалять предметы из корзины, что, я думаю, является чем-то хорошим: чем больше клиентов чувствует контроль, тем больше они доверяют продавцу.

Давайте посмотрим на код!

 

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

HTML довольно простой. Триггер #cd-cart используется для запуска корзины покупок. Галерея продуктов завершается внутри элемента main. Пустой #cd-shadow-layer используется для размытия фона при видимости тележки. Элементы корзины организованы в неупорядоченный список.

<header>
 <!-- logo and menu here -->
 <div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>
</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. Этот класс изменяет правильное значение от -100% до 0. Все, что остается сделать - это добавить переход CSS3 к правильному значению для достижения гладкой анимации.

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

#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');
	}
}

 

Вот и всё!

---