Автор

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

Выдвижная боковая корзина на 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');
	}
}

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

Места на сайте не бывает много, его необходимо экономить, и организовывать на сайте все таким образом, чтобы на сайте оставалось достаточно места, и взор пользователя не терялся в поисках информации. Некоторые сайты предлагаю просмотреть свои популярные статьи, или последние которые были добавлены на сайт, обычно это выводиться простым списком, под статьей, который не особо бросается в глаза. В данном уроке мы рассмотрим простой анимированный скроллер новостей сайта с помощью xml.


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

Хорошо спроектированный фильтр - это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.


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

В последнее время анимированные кнопки с помощью css стали вытеснять старые кнопки в виде простых изображений, это не удивительно, ведь новые технологии, да и привлекательная анимация позволят привлечь взор пользователя к необходимой информации. Зачастую на кнопке содержится малая доля информации, которая информирует нас о ее содержании, но иногда места на кнопке не достаточно, и хотелось добавить бы еще полезной информации, тогда следуют пойти на небольшую хитрость, и сделать выпадающею кнопку с дополнительной информацией.


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

В данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close