Автор

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

В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!


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

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


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

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Адаптер представляет собой легкий контент-слайдер, простой интерфейс для разработчиков и создания 2D или 3D слайд анимации переходов.
Добавлена поддержка 3D для webkit и Mozilla, всех других браузерах будет запасной вариант изящно простой fade перехода при использовании 3D-эффекты.
Все 2D переходы между слайдами были протестированы в IE6+, и всех других современных браузерах.


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

Сегодня один посетитель данного сайта выразил свое недовольство что я обманываю своих клиентов!!! Написал отзыв, но при этом не оставил своих координат для ответа!!! Можно было бы оставить без внимания этот отзыв, но я решил написать ответ, так как очень часто подобные умники пишут толком не разобравшись!


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close