Автор

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

Дорогие веб-мастера, хочу поделиться с вами очень хорошим решением создания календаря событий, так как при создании нового сайта заказчику нужен был именно ткого рода календарь мероприятий и я перелопатил весь инет в поисках чего-то приличного! И вот оно счастье!!! Я выкладываю уже перелапаченый мной вариант и в него забил даты до 28.01.2021.


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

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close