Верстка простого меню с “наворотами”
Наворот 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
Комментарии
Дельная заметка только для наглядности не хватает примера реализации. Главное не забывать о hasLayout в IE6…
Конечно, как же без примера :)
Нафига влево сдвигать, смотри что из этого вышло.
Порезалось, вот скрин
Влево сдвигаем все пункты меню, чтобы картинка-разделитель для первого пункта вышла за видимую область списка ( overflow: hidden) . При этом не надо задавать дополнительный класс для первого пункта меню.
За скрин спасибо, увеличил значение padding-right.
Ссылка на пример не работает- ведёт на главную((
спасибо, исправил
у меня firefox 3. вообще не работает.
что у Вас не работает?
тестировал в FF3, никаких проблем не нашел.
не происходит смена фона у активного пункта меню. но уже посмотрела повнимательнее и поняла, что и не должна происходить в данном примере, т.к. не прописаны ссылки. наверное, было бы нагляднее, если бы сразу можно было посмотреть полностью функциональный вариант :)
Интересное наблюдение - работает в виндовых браузерах. В FF3 под Линуксом - просто список. Никак не работает).
Xtrchk, Вы правы, нагляднее, когда закладки переключаются. Смотрим пример с переключением закладок!
!!! некоторые комментарии за 6.12.08 - 12.12.08 случайно были удалены, приношу свои извинения.
Спасибо, отличное меню получилось.