Блог Верстка простого меню с «наворотами»

  1. наворот — универсальный разделитель между пунктами меню
  2. наворот — универсальная ширина пунктов меню
  3. наворот — универсальный активный пункт меню

Первый наворот

  • Создаем маркированный список <ul></ul> и обнуляем отступы
  • Пункты меню <li></li> располагаем в ряд при помощи свойства float:left
  • Прописываем для пунктов меню фоновую картинку разделителя через background-image и прижимаем ее к левому краю
  • Смещаем пункты влево на ширину равную ширине картинки-разделителя через margin-left
  • Прячем разделитель у первого пункта меню через свойство overflow:hidden для списка

Этим приемом можно пользоваться не только для верстки горизонтального меню, но и вертикального. Так же он поможет, если необходимо разделить между собой блоки на странице (новости, статьи, комментарии и др. )

Второй наворот

  • Ширину для пунктов меню не задаем, задаем только внутренний отступ при помощи свойства padding. Поскольку для li мы задали float;left, то в правильных браузерах пункты разместятся в ряд друг за другом, как мы того и хотим
  • Для IE6 прописываем хак (width: 1%), чтобы пункты не растягивались по всей ширине списка

Третий наворот

  • Выделяем активный пункт меню фоновой картинкой, которая будет расширяться-сужаться в зависимости от ширины пункта меню. Для этого делаем 2 картинки: левую широкую и правую узкую
  • Вставляем span в пункт меню, чтобы получилась следующая конструкция <li><span><a>…</a></span></li>
  • Для li прописываем фоном широкую картинку, а для span — узкую
  • Чтобы активный пункт перекрывал разделители соседних пунктов меню, делаем для него относительное позиционирование position:relative

Простое меню с «наворотами» готово!

Чтобы страница проходила валидацию, выносим хак в отдельный файл css

-->

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com