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

ZHUR ARTUR.ru

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

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

»

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

  • 4

  • 0

Исследование интернет-магазина Enter.ru. Выпадающий список с товарами на CSS и JQuery

Автор - Жур Артур | Добавлено - 2014-01-07 | Просмотров - 4326 | Скачено - 36

1 Разметка меню

Создаём основной блок для меню.

Дальше указываем стили для этого блока.

#enter-menu-block{
    min-width: 240px; /* Минимальная ширина блока */
    width: auto; /* Автоматическое расширение блока, если он больше 240px */
    display: inline-block; /* Указываем это, чтобы блок не растягивался по ширине. */
    height: auto; /* Автоматическая высота. */
    /* Рамки */
    border-left: 2px solid #FFA901;
    border-right: 2px solid #FFA901;
    border-bottom: 2px solid #FFA901;
    border-top: 4px solid #FFA901;
    position: absolute;

Дальше указываем уголок который на блоке


Указываем стили, уголок в виде картинки.

#enter-menu-ugolok{
    background: url(ugolok.png) no-repeat;
    width: 16px;
    height: 9px;
    position: absolute;
    margin-left: 110px;
    margin-top: -12px;
}

Дальше идут категории товаров в виде списка.


Указываем стили для этого списка.

#enter-menu-cat{
    margin-top: 15px;
    width: 240px;
    margin-bottom: 15px;
    float: left;
}
#enter-menu-cat a{
    font: 15px sans-serif;
    text-decoration: none;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    color: black;
}
#enter-menu-cat a:hover{
    text-decoration: underline;
    background-color: #E6E6E6;
}

Дальше указываем подкатегории для конкретного товара

//Блок с подкатегориями, данный блок относится к первому товару из списка.

Для того, чтобы определить к какому товару относятся подкатегории необходимо их связать. В списке с товарами в тегах a указано ключевое слово cat и порядковый номер, клёчевое слово можете указать своё. Далее указываем эти ключевые слова с порядковым номером в те блоки которые соответствуют товаром. Указываем ключевые слова в тег ID точно так-как в представленном выше коде. Для остальных товаров из списка, просто дублируйте блок с подкатегориями и изменяйте ключевые слова.

CSS стили для блока с подкатегориями.

.enter-menu-block-podcat{
    width: 185px;
    min-height: 400px;
    height: auto;
    border-left: 1px solid #999999;
    float: right;
    display: none;
}
.enter-menu-podcat-list{
    margin-top: 15px;   
}
.enter-menu-block-podcat h4{
    font: 20px sans-serif;
    color: #FFA901;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
.enter-menu-podcat-list a{
    font: 15px sans-serif;
    text-decoration: none;
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-left: 8px;
    margin-right: 8px;
    color: black;    
}
.enter-menu-podcat-list a:hover{
    text-decoration: underline;
}

2 JQuery код.

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

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


Код для меню.


Интересное

Комментарии