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

  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

Комментарии

Zodios 29 октября 2008 года, 12:00 #

Дельная заметка только для наглядности не хватает примера реализации. Главное не забывать о hasLayout в IE6…

webmolot 30 октября 2008 года, 12:37 #

Конечно, как же без примера :)

Максим Покровский 08 ноября 2008 года, 1:59 #

Нафига влево сдвигать, смотри что из этого вышло.

Максим Покровский 08 ноября 2008 года, 2:00 #

Порезалось, вот скрин

webmolot 08 ноября 2008 года, 6:46 #

Влево сдвигаем все пункты меню, чтобы картинка-разделитель для первого пункта вышла за видимую область списка ( overflow: hidden) . При этом не надо задавать дополнительный класс для первого пункта меню.

За скрин спасибо, увеличил значение padding-right.

lastic 10 ноября 2008 года, 3:26 #

Ссылка на пример не работает- ведёт на главную((

webmolot 10 ноября 2008 года, 4:09 #

спасибо, исправил

Xtrchk 25 ноября 2008 года, 12:48 #

у меня firefox 3. вообще не работает.

webmolot 26 ноября 2008 года, 1:24 #

что у Вас не работает?
тестировал в FF3, никаких проблем не нашел.

Xtrchk 28 ноября 2008 года, 15:22 #

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

GIL 03 декабря 2008 года, 14:57 #

Интересное наблюдение — работает в виндовых браузерах. В FF3 под Линуксом — просто список. Никак не работает).

webmolot 04 декабря 2008 года, 2:41 #

Xtrchk, Вы правы, нагляднее, когда закладки переключаются. Смотрим пример с переключением закладок!

webmolot 14 декабря 2008 года, 3:04 #

!!! некоторые комментарии за 6.12.08 — 12.12.08 случайно были удалены, приношу свои извинения.

Mistereo 03 января 2009 года, 10:58 #

Спасибо, отличное меню получилось.

vic 17 марта 2009 года, 20:08 #

А как можно сделать разделитель горизонтального меню, чтоб при этом горизонтальное меню было центрировано по горизонтали

webmolot 18 марта 2009 года, 11:03 #

vic, вот здесь я писал, как выравнять по центру блок с неизвестной шириной

vic 19 марта 2009 года, 11:00 #

О! отличный способ! вот только не могу понять как работает
.wrap:after{content:»;display:block;clear:both;}
и для чего нужно свойство
z-index:1
для списка.
А так решение классное. Сам три дня голову мучил…

Александр 14 марта 2011 года, 16:24 #

Здравствуйте. Не могли бы вы объяснить, для чего нужнастрока
clear:after {content: «.»; display: block; height: 0; clear: both; visibility: hidden; }
?

webmolot 14 марта 2011 года, 17:05 #

Псевдоэлемент :after используем для того, чтобы «очистить» плавающие блоки. Что это значит?

В нашем примере позиционируются пункты меню <li></li> в одну линию при помощи float:left. Из-за этого родительский контейнер <ul></ul> не видит высоту пунктов меню, т.к. элемент с float позиционируется вне основного потока. При помощи :after мы добавляем после контейнера точку content: “.”, скрываем ее при помощи visibility: hidden и запрещаем ей обтекать наш плавающий блок при помощи clear: both. Получается, что точка всегда будет находиться после плавающих в контейнере блоков и будет тянуть за собой нижнюю границу контейнера. Это помогает контейнеру «видеть» блоки с float внутри себя.

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

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

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