УРОК 9. КАСКАДНОЕ (МНОГОУРОВНЕВОЕ) МЕНЮ В CSS
Взамен простого меню, созданного нами ранее, создадим многоуровневое меню, используя возможности CSS3
Вфайле style.css удалимкод, касающийсяблока nav (nav, nav li)
Внесем изменения в index.html
Пока меню выглядит как список
Далее работаем со style.css
1) Задаем параметры для основного блока меню
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
Зададим градиент и тень для всего меню
Для браузеров, не понимающих функцию linear-gradient дополнительно укажем простую заливку (background: #цвет)
#menu {
background:#04acec;
background:linear-gradient(#04acec, #0186ba);
box-shadow:rgb(100,100,100) 0px 5px 5px;
height:40px; // высота блока меню
}
2) Задаем параметры для подменю. С помощью свойства visibility скрывает подменю атрибутом hidden. Задаем абсолютное позиционирование (position: absolute) относительно основных подпунктов меню
#menuul {
visibility: hidden; // скрываем подменю
position: absolute; // абсолютное позиционирование относительно основных пунктов меню
top: 40px; // подменю смещаем на ширину основного меню
left: 0;
background: #444;
background: linear-gradient(#444, #111);
}
3) Задаем выравнивание слева для пунктов меню li
#menu li {
float: left;
border-right: 2px solid #016e99;
position: relative;
list-style: none;
}
4) Задаем параметры для ссылок
#menu a {
float: left;
padding: 13px 30px; // отступы внутри пунктов меню
color: #fff;
text-transform: uppercase; // заглавные буквы
font: bold 12px Arial, Helvetica;
text-decoration: none; // убираем подчеркивание ссылок по умолчанию
text-shadow: 0 1px 0 #000; // тень
}
Определяем цвет ссылок после наведения мыши. Символ > для того, чтобы при наведении мышкой цвет изменял только пункт меню на который мы наводим мышкой
#menu li:hover > a {
color: #c4c4c4;
}
5) Отображаем подменю
#menu li:hover > ul {
visibility: visible; // при наведении вложенные блоки отображаются
}
#menu ul li {
border: 0;
}
Символ > помогает отображать подменю следующей вложенности последовательно.
6) Задаем ширину подменю 270px = 250px + 20px (приходится на padding) ;
#menu ul a {
padding: 10px;
width: 250px;
display: block;
text-transform: none; // отменяем uppercase и делаем текст подпунктов обычных шрифтом
}
#menu ul a:hover {
background-color: #0186ba; // цвет ссылок подпунктов меню при наведении мыши
background-image: linear-gradient(#04acec, #0186ba); // градиент
}
7) Задаем позицию меню второй вложенности, смещаем его влево на 270px на ширину блока подменю
#menu ul ul {
top: 0;
left:270px;
}
В итоге получим