Автор

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

В последнее время мы экспериментировали с анимацией SVG. Сегодняшний урок показывает вам, как анимировать сразу несколько путей SVG, чтобы создать стильный фоновый эффект для модального окна.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close