В Интернете вертикальные меню встречаются почти на всех сайтах. Думаю, что не сразу найдётся сайт, где бы не встречалось хоть и совсем маленького, но горизонтального меню из нескольких элементов. Сделать такое меню без использования таблиц в настоящее время не проблема, так как на эту тему в Интернете есть уже море материала… Но проблема в том, что глобальное большинство вертикальных меню, сделанных по технологии блочной вёрстки, ломаются при увеличении шрифта.
Чтобы точно понять, о чём идёт речь, для примера сделал следующее меню:
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>
Автор: Никита Мосияш.