Блог → Верстка простого меню с “наворотами”
- наворот – универсальный разделитель между пунктами меню
- наворот – универсальная ширина пунктов меню
- наворот – универсальный активный пункт меню
Первый наворот
- Создаем маркированный список <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
- 19 комментариев
- 29 октября 2008 года
Комментарии
Спасибо за комментарий!Написать комментарий
Используйте в комментариях html-теги
Дельная заметка только для наглядности не хватает примера реализации. Главное не забывать о hasLayout в IE6…
Конечно, как же без примера :)
Нафига влево сдвигать, смотри что из этого вышло.
Порезалось, вот скрин
Влево сдвигаем все пункты меню, чтобы картинка-разделитель для первого пункта вышла за видимую область списка ( overflow: hidden) . При этом не надо задавать дополнительный класс для первого пункта меню.
За скрин спасибо, увеличил значение padding-right.
Ссылка на пример не работает- ведёт на главную((
спасибо, исправил
у меня firefox 3. вообще не работает.
что у Вас не работает?
тестировал в FF3, никаких проблем не нашел.
не происходит смена фона у активного пункта меню. но уже посмотрела повнимательнее и поняла, что и не должна происходить в данном примере, т.к. не прописаны ссылки. наверное, было бы нагляднее, если бы сразу можно было посмотреть полностью функциональный вариант :)
Интересное наблюдение – работает в виндовых браузерах. В FF3 под Линуксом – просто список. Никак не работает).
Xtrchk, Вы правы, нагляднее, когда закладки переключаются. Смотрим пример с переключением закладок!
!!! некоторые комментарии за 6.12.08 – 12.12.08 случайно были удалены, приношу свои извинения.
Спасибо, отличное меню получилось.
А как можно сделать разделитель горизонтального меню, чтоб при этом горизонтальное меню было центрировано по горизонтали
vic, вот здесь я писал, как выравнять по центру блок с неизвестной шириной
О! отличный способ! вот только не могу понять как работает
.wrap:after{content:”;display:block;clear:both;}
и для чего нужно свойство
z-index:1
для списка.
А так решение классное. Сам три дня голову мучил…
Здравствуйте. Не могли бы вы объяснить, для чего нужнастрока
clear:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden; }
?
Псевдоэлемент :after используем для того, чтобы “очистить” плавающие блоки. Что это значит?
В нашем примере позиционируются пункты меню <li></li> в одну линию при помощи float:left. Из-за этого родительский контейнер <ul></ul> не видит высоту пунктов меню, т.к. элемент с float позиционируется вне основного потока. При помощи :after мы добавляем после контейнера точку content: “.”, скрываем ее при помощи visibility: hidden и запрещаем ей обтекать наш плавающий блок при помощи clear: both. Получается, что точка всегда будет находиться после плавающих в контейнере блоков и будет тянуть за собой нижнюю границу контейнера. Это помогает контейнеру “видеть” блоки с float внутри себя.