УРОК 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;

}

В итоге получим

Добавить комментарий

Войти с помощью: