UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Делай сегодня то, что другие не хотят, завтра будешь жить так, как другие не могут. © Жизнь

»

Введите код полученный после подписки

  • 1

  • 0

Фиксированная корзина заказов на CSS и JQuery

Автор - Жур Артур | Добавлено - 2014-01-10 | Просмотров - 6956 | Скачено - 68

1Подключение плагина JQuery

Плагин JQuery скачать можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом </head> .Без этого плагина JQuery код работать не будет!

Подключение плагина


2JQuery код для корзины заказов

Для плавной анимации корзины используется функция animate.. Разместите этот код на всех страницах сайта где будет корзина заказов


  • toggle - Определение нажатия на корзину. Первая функция - открытие корзины. Вторая функция - закрытие корзины.
  • #fix-cart - Id Корзины, а именно блок который будет выезжать при нажатии на ярлычок с id #fix-cart-tab.

3HTML код корзины


// Основной блок
// Ярлычок

Корзина

У Вас в корзине нет ни одного товара

4CSS стили для корзины

#fix-cart{
    border: 1px solid #C8C8C8;
    position: fixed;
    width: 250px;
    min-height: 200px;
    height: auto;
    right: 0;
    top: 50%;
    margin-top: -125px;
    margin-right: -252px;
}
#fix-cart-tab{
    border: 1px solid #C8C8C8;
    position: absolute;
    width: 35px;
    height: 130px;
    margin-left: -37px;
    margin-top: -1px;
    cursor: pointer;
    background: url(cartimage.png) no-repeat;
    border-radius: 6px 0 0 6px ; 
   -webkit-border-radius:6px 0 0 6px ; 
   -moz-border-radius:6px 0 0 6px ;  
}

Если вы хотите изменить вид ярлычка, то просто измените картинку в background: url(Ваша картинка). Картинка должна быть размером 35px на 130px

Интересное

Комментарии