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

ZHUR ARTUR.ru

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

Никто никогда не разбогател работая на кого-то. © Жизнь

»

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

  • 7

  • 1

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

Автор - Жур Артур | Добавлено - 2014-01-05 | Просмотров - 4612 | Скачено - 28

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

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

Основной блок для меню.


Указываем для блока CSS стили.


#block-lamoda-menu{
    background-color: #27292C;
    height: 31px;
    margin-left: 0;
    margin-right: 0;
}
  • background-color Цвет фона, в нашем случае черный.
  • height Высота меню
  • margin-left Левый отступ, ставим ноль, чтобы меню прижалось к левой части сайта
  • margin-right Правый отступ, ставим ноль, чтобы меню прижалось к правой части сайта

Теперь создаём само меню.

// Основной блок.

Первый идёт выпадающий список Женщинам, в этом теги li указываем блок div в котором и будут подсписки. Далее в этом блоке div указываем списки ul и указываем обтекание float, тем самым подсписки будут идти в ряд, обязательно подспискам нужно указать ширину. В нашем случае это 180px. Остальные списки идут точно также как и первые, просто дублируются.

Указываем стили для меню


#lamoda-menu{
    height: 31px;
    width: 1000px ;
    background-color: #27292C;
    margin: 0 auto;
}
#lamoda-menu > li{
    float: left;
}
#lamoda-menu > li > a{
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: white;
    font: 15px sans-serif;
    text-decoration: none;
    display: inline-block;
}
#lamoda-menu > li > a:hover{
    background-color: #7992B8;
}
.block-podmenu{
    position: absolute;
    z-index: 9999;
    width: 600px;
    height: 300px;
    background-color: white;
    -moz-box-shadow: 0 0 10px #DFDFDF;
    -webkit-box-shadow: 0 0 10px #DFDFDF;
    box-shadow: 0 0 10px #DFDFDF; 
    margin-top: 0px; 
    display: none; 
}
#lamoda-menu > li:hover > div{
    display: block;
}

.lamoda-menu-podmenu{
    width: 180px;
    height: auto;
    margin-left: 15px;
    float: left;
}
.lamoda-menu-podmenu > h3{
    font: 18px sans-serif;
    color: black;
    margin-top: 15px;
    margin-bottom: 10px;
}
.lamoda-menu-podmenu > li{
    margin-top: 4px;
}
.lamoda-menu-podmenu > li > a{
    font: 15px sans-serif;
    color: black;
    text-decoration: none;
}
.lamoda-menu-podmenu > li > a:hover{
    color: #FF8500;
}

2 JQuery код

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

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


Сам JQuery код

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

	$(document).ready(function() {
	   
$("#lamoda-menu > li").hover(
  function() {
    $(this).css("backgroundColor","#7992B8");
  }, function() {
    $(this).css("backgroundColor","#27292C");
  }
);
    
     });

С помощью этого JQuery кода остаётся неизменным цвет категории при отведении на подкатегории.

Интересное

Комментарии