Виды горизонтальных меню для сайта
Поэтому базовой структурой для всех примеров ниже будет следующий код:
< li > < a href = "#" >Телевизоры < / a > < / li >
< li > < a href = "#" >Доставка и оплата < / a > < / li >
Меняться будет только атрибут id. И именно к нему будет привязано все основное форматирование меню.
Еще нам понадобится css-код, отвечающий за базовые css-правила:
font : 18px Calibri , Tahoma , sans — serif ;
margin : 20px auto ;
padding : 0 ;
list — style — type : none ;
margin — bottom : 20px ;
nav ul li a <
text - decoration : none ;
color : #fff;
nav ul li a : hover <
text - decoration : underline ;
Здесь мы задаем шрифт для body, а также ширину, отключаем отступы внешние (margin:0) и внутренние (padding:0) для элементов ul и li, задаем нижний отступ для ul и изменяем цвет ссылок ( внимание. ) на белый. А это значит, что при обновлении страницы, если вы все делаете пошагово, ссылок вы НЕ УВИДИТЕ. Т.к. на белом фоне body белый цвет текста не читается. Зато чуть позже нам это пригодится.
Вариант 1. Простое горизонтальное меню
Для первого элемента ul задаем , т.е. горизонтальное меню. Сейчас наш блок ссылок пока еще является вертикальным. Но в CSS мы зададим для элементов li свойство display: inline-block — и сразу получим горизонтальное меню. Добавим стандартный синий цвет ссылкам и отступы для li. Вот что получилось:
#menu-horiz li < display : inline - block ; padding : 3px 15px 3px 0 ; #menu-horiz a < color : #00f;
Вариант 2. Горизонтальное меню с inline-block элементами
Во втором примере рассмотрим форматирование меню, очень похожего на первый вариант, но с фоном, изменяющимся при наведении на пункт меню. Для ul во втором случае зададим id=»menu-bg». CSS:
display : inline — block ;
height : 40px ;
line — height : 40px ;
padding : 0 10px ;
border — right : 1px solid #0c3474;
#menu-bg li:hover <
background : #0c3474;
Обратите внимание еще на один момент: здесь вертикальные отступы для пункта меню создавались не с помощью свойства padding, а с помощью высоты элемента (height: 40px) и такой же точно высоты для текста (line-height: 40px). За счет этого получилось, что текст расположился ровно посередине блока по вертикали.
Что получилось? Неплохое меню с одной неприятностью: при наведении на пункт меню фон меняется не для всего пункта. Остается примерно 5px с левой стороны предыдущего фона. В чем проблема? А в том, что строчно-блочные элементы (#menu-bg li ) при расположении с новой строки оставляют после себя один пробельный отступ. Именно он и равен примерно 5px. И может увеличиваться/уменьшаться в зависимости от размера шрифта. Поэтому один из способов борьбы с этой неприятностью — дописать отрицательный правый внешний отступ (margin-right) для элементов li: