
В Интернете вертикальные меню встречаются почти на всех сайтах. Думаю, что не сразу найдётся сайт, где бы не встречалось хоть и совсем маленького, но горизонтального меню из нескольких элементов. Сделать такое меню без использования таблиц в настоящее время не проблема, так как на эту тему в Интернете есть уже море материала… Но проблема в том, что глобальное большинство вертикальных меню, сделанных по технологии блочной вёрстки, ломаются при увеличении шрифта.
Чтобы точно понять, о чём идёт речь, для примера сделал следующее меню:
HTML:
<ul id="navbar"> <li><a href="[link]">Главная</a></li> <li><a href="[link]">Новости</a></li> <li><a href="[link]">Галерея</a></li> <li><a href="[link]">Гостевая</a></li> <li><a href="[link]">Контакты</a></li> </ul>
CSS:
ul#navbar { margin: 0; padding: 0; font-size: 0.75em; font-family: Tahoma; text-transform: uppercase; background: #C8BAA4; line-height: 30px; height: 30px; } ul#navbar a { color: #fff; text-decoration: none; } ul#navbar a:hover { text-decoration: underline; } ul#navbar li { list-style: none; float: left; padding: 0 13px; border-right: 1px solid #fff; height: 30px; }
Всё хорошо, но в браузере FireFox сочетание клавиш Ctrl+Plus, например, увеличивает размер шрифта, что приводит к съезжанию текста.
Всё дело в том, что при масштабировании размера шрифта вместе с ним изменяется и высота строки (line-height). Настал момент вспомнить, что IE не масштабирует величины, заданные в пикселах.
ul#navbar { ... ... ... line-height: 30px; height: 30px; }
Так как высота строки задана в пикселах, то изменение шрифта её не затронет, и текст в IE не станет смещаться вниз или вверх из-за увеличения или уменьшения шрифта.
Все современные браузеры, кроме IE, поддерживают такие замечательные свойства, как display: table и display: table-cell. Таким образом, в блочной вёрстке можно успешно имитировать рисование таблиц, когда это требуется.
ul#navbar { display: table; } ul#navbar li { float: none; display: table-cell; vertical-align: middle; line-height: 1; }
В результате можно манипулировать размером шрифта, но текст будет всё время вертикально выровнен по центру (как это и происходит в таблицах). Например, даже если увеличить шрифт в два раза.
Теперь всё хорошо в большинстве браузеров, кроме IE, так как новые CSS-правила он не понимает. Сделать работоспособным IE в данном случае можно, либо написав для него CSS в отдельном файле, либо с помощью известных CSS-хаков. В своей практике для IE я подгружаю отдельный CSS, но в примере будет удобнее воспользоваться хаками:
/* Internet Explorer 7 */ *:first-child+html ul#navbar { display: block; } *:first-child+html ul#navbar li { float: left; display: block; // Не обязательно, так как [float: left;] это уже подразумевает. line-height: 30px; height: 30px; } /* То же самое для старших IE */ * html ul#navbar { display: block; } * html ul#navbar li { float: left; display: block; line-height: 30px; height: 30px; }
Задача решена. Но не полностью. В браузерах, кроме IE, теряется кусок фона справа, так как меню для них — это таблица, которая во всю длину заполнена ячейками. Решение простое: поместить таблицу в блок, залитый нужным цветом.
HTML:
<div id="navbg"> <ul id="navbar"> <li><a href="[link]">Главная</a></li> <li><a href="[link]">Новости</a></li> <li><a href="[link]">Галерея</a></li> <li><a href="[link]">Гостевая</a></li> <li><a href="[link]">Контакты</a></li> </ul> </div>
CSS:
#navbg { background: #C8BAA4; }
В заключение хочу отметить, что последнюю конструкцию логичнее записать так:
<div id="navbar"> /* вместо <div id="navbg"> */ <ul> /* вместо <ul id="navbar"> */ ... </ul> </div>
Но так как статья показательная, то я не вижу смысла записывать новую конструкцию CSS, так как смысл будет один и тот же.
Итак, весь код полностью:
<style type="text/css"> #navbg { background: #C8BAA4; } ul#navbar { margin: 0; padding: 0; font-size: 0.75em; font-family: Tahoma; text-transform: uppercase; background: #C8BAA4; height: 30px; } ul#navbar a { color: #fff; text-decoration: none; } ul#navbar a:hover { text-decoration: underline; } ul#navbar li { list-style: none; padding: 0 13px; border-right: 1px solid #fff; } /* Большинство браузеров */ ul#navbar { display: table; } ul#navbar li { float: none; display: table-cell; vertical-align: middle; line-height: 1; } /* Internet Explorer 7 */ *:first-child+html ul#navbar { display: block; } *:first-child+html ul#navbar li { float: left; display: block; // Не обязательно, так как [float: left;] это уже подразумевает. line-height: 30px; height: 30px; } /* IE 6 and below */ * html ul#navbar { display: block; } * html ul#navbar li { float: left; display: block; line-height: 30px; height: 30px; } </style> <div id="navbg"> <ul id="navbar"> <li><a href="[link]">Главная</a></li> <li><a href="[link]">Новости</a></li> <li><a href="[link]">Галерея</a></li> <li><a href="[link]">Гостевая</a></li> <li><a href="[link]">Контакты</a></li> </ul> </div>
Автор: Никита Мосияш.