меню списками

Построение простого меню с помощью списков

Разделил статью на 2 части. Первая — построение простого меню. Вторая — построение выпадающего меню.

Допустим, есть некий блок заданной ширины. Как внутри него сделать горизонтальное меню, применяя CSS?

Сначала убираем маркер, который стоит у меню. По вертикали, как и у параграфов, у списка есть отступы margin. Они завязаны по размеру шрифта, который приходит к нашему элементу. Такие отступы margin нужно обнулить. Также для все браузеров (кроме IE) есть еще слева отступ padding.

Теперь нужно выстроить элементы списка li в одну линию (т.е. по горизонали). Самое эффективное решение — float:left или float:right. Задаем выравнивание left, тогда все элементы li пристраиваются друг к другу.

Теперь займемся оформлением элементов A. Делаем элемент блочным. Задаем высоту. Делаем центрирование текста по элементу (line-height), т.е. высота шрифта по умолчанию не 50px, из-за этого текст в элементе пристроится в верхней части. Поскольку line-height увеличивается симметрично, то и текст окажется посередине.

Дальше делаем отступ padding. Раз я задействовал высоту, то я padding задействовать по вертикали не буду, а по горизонали 20px.

Можно задать фоновый цвет (по желанию), цвет, трансформировать текст.

Раз в меню будут элементы списка в виде ссылок, то нужно убрать подчеркивание через text-decoration.

Также можно при наведении мышки на ссылку менять фон. Полный листинг кода смтри ниже.

#menu ul{
   list-style:none; - убираем маркер
   margin:0; - убираем отступ
   padding:0; - убираем отступ слева}
#menu li{
   float:left; - выравнивание left}
#menu li a{
   display:inline-block;
   height:50px;
   line-height:50px; - выравнивание по центру
   padding:0 20px;
   background:#69c;
   color:#fff;
   text-transform:uppercase;
   text-decoration:none;}
#menu li a:hover{
   background:#369;}



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

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