выпадающее меню в css

Построение выпадающего меню

Допустим, у нас есть список с элементами, причем внутри любого элемента есть еще один список. Создадим выпадающее меню с помощью CSS. Поскольку на странице наверняка будет какой-либо контент, то не должно возникать того, что при наведении на выпадающий пункт меню все начинает двигаться. Т.е. для элементов списка нужно задавать либо position:absolute, либо position:fixed. Но fixed в нашем случае не подойдет, т.к. там я в качестве контейнера получаю область просмотра и позиционироваться относительно наведенного элемента не могу. Поэтому используем absolute.

Раз я навожу мышку на элемент li, то я обязан относительно него позиционировать. Поэтому элемент li должен быть position:relative. А элемент ul — position:absolute.

Теперь рассмотрим на практике. Сам код см. ниже.

Элемент li плавающий, для него пишем позицию relative.

Изначально элементы ul внутри элемента li невидимы (это вложенные элементы). Прописываем координаты: слева 0; чтобы появлялся под элементом li — пишем координату. Т.к. вложенный элемент у нас в позиции absolute, то он будет появляться точно под своим родителем.

Внутренние элементы li должны располагать друг под другом, а не друг рядом с другом, поэтому задаем float:none (в результате — я навожусь на список, у меня он раскрывается по вертикали), т.е. для этого отменяем «плавание». Применим правило white-space. Оно говорит элементу, как вести себя по отношению к пробельным символам (по умолчанию значение normal, т.е. все пробельные символы сокращаются до одного и используются для автоматического переноса). Мы укажем white-space:nowrap, т.е. пробельные символы сокращаются, но по ним перенос не производится. Если указать значение pre, то не будет ни того, ни другого.

Элементы списка «a», то же самое. Раньше они «плавали», теперь они должны перестать «плавать», должны стать просто блочными. Можно задать фон, чтобы выделялось.

А раз при на ведении на элемент списка у меня должен появиться другой элемент, то при наведении на элемент li у него появляется псевдо класс hover. Тогда внутреннему элементу ul я говорю — display:block.

#menu li {
   float:left;
   position:relative;}
#menu li ul{
   display:none;
   position:absolute;
   left:0;}
#menu li li{
   float:none;}
#menu li li a{
   float:none;
   display:block;
   background:#f60;
   white-space:nowrap;}
#menu li li a:hover{
   background:#d30;}
#menu li:hover ul{
   display:block;}

Полный листинг выпадающего меню см.ниже:

#menu ul{
   margon:0;
   padding:0;
   list-style:none;}
#menu li{
   float:left;
   position:relative;}
#menu li a{
   display:inline-block;
   height:50px;
   padding:0 20px;
   line-height:50px;
   color:#fff;
   background:#69c;
   text-transform:uppercase;
   text-decoration:none;}
#menu li a:hover{
   background:#369;}
#menu li ul{
   display:none;
   position:absolute;
   left:0;}
#menu li:hover ul{
   display:block;}
#menu li li{
   float:none;}
#menu li li a{
   display:block;
   background:#f60;
   white-space:nowrap;}
#menu li li a:hover{
   background:#d30;}



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

Ваш e-mail не будет опубликован.