Блочная верстка. Урок 5. Размещение элементов меню.
Прежде всего, давайте разберемся, для чего нужно меню, и что оно из себя представляет.
Меню сайта – это список страниц или разделов сайта, размещенный на видном месте, и предназначенный для доступа пользователя к этим страницам или разделам. Меню бывают двух типов: главные и дополнительные. Обычно в главном меню содержатся ссылки на ключевые разделы сайта. В дополнительных меню обычно размещают ссылки на подразделы или конкретные страницы. Кроме того, меню могут иметь иерархическую структуру 3-х видов: выпадающий список, раскрывающийся список и раскрытый список (может иметь древовидную структуру).
Итак, мы выяснили, что меню представляет из себя одноуровневый или многоуровневый список. Соответственно делать мы его будем с помощью элемента, представляющего список. В HTML такие элементы определяются тегами ul и ol, обозначающими маркированный и нумерованный списки соответственно. Каждый элемент списка пределяется тегом li.
В нашем веб-документе, в месте, предназначенном для размещения кода горизонтального меню, запишите следующий HTML-код:
<ul id="hmenu">
<li class="selected"><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Услуги и цены</span></a></li>
<li><a href="#"><span>Гарантии</span></a></li>
<li><a href="#"><span>Технологии</span></a></li>
<li><a href="#"><span>О компании</span></a></li>
</ul>
Этот список будет главным меню нашего сайта. Не обязательно делать главное меню в виде закладок. Вы даже можете использовать многоуровневое раскрытое или выпадающее меню, или еще какое-либо, но при разработке меню обратите внимание на удобство навигации. Как правило, чем меньше вложенность любого меню тем удобнее. Таким образом, меню, имееющее более одного уровня вложенности является не самым лучшим выбором. В этом случае, лучше рассмотреть возможность внедрения дополнительного меню, либо еще какого-нибудь способа навигации.
Первый элемент главного меню имеет атрибут class со значением selected, поэтому используя правило CSS, заданное селектором с именем этого класса, мы можем особо выделить вкладку меню, определенную этим элементом. В данном примере мы не будем как-либо выделять выбранный элемент. Тем не менее, именно таким способом создаются меню, которые имеют текущую выбранную вкладку. Кроме того, здесь все ссылки ведут на текущую страницу. В реальном меню, ссылок, ведущих на себя же быть не должно, за исключением разве что ссылки на главную страницу. Также все ссылки заключены в тег span, он нам понадобится чтобы вертикально центрировать текст.
Списки в HTML являются блочными элементами. Если сейчас вы откроете нашу веб-страницу в браузере, вы увидите, что ссылки в нашем меню размещены одна под другой. Поэтому вместе с оформлением каждого элемента, определяющего вкладку, мы должны определить стиль его отображения.
Добавим в файл стилей следующие правила:
#hmenu {
margin-left: 160px; /* служит для выравнивания меню так, чтобы оно начиналось
над областью контента */
}
/* оформляем вкладку */
#hmenu li {
/* задаем шрифт */
font-family: Calibri;
font-size: 14px;
/* отступ сверху */
margin-top: 5px;
/* расстояние между вкладками */
margin-left: 0.5em;
margin-right: 0.5em;
/* указатель мыши */
cursor: pointer;
/* Фон */
background-image: url('mm_button.png');
background-repeat: no-repeat;
/* размеры вкладки */
width: 100px;
height: 40px;
/* делаем элемент линейным и одновременно блочным */
display: inline-block
}
/* оформление активной вкладки */
.selected { /* ... */}
/* вкладка при наведении мыши */
#hmenu li:hover {
background-image: url('mm_button_hover.png');
}
/* оформление текста ссылок */
#hmenu li a {
color: green;
text-decoration: none; /* запрещаем подчеркивание ссылок */
}
/* вертикально центрируем текст */
#hmenu li a span {
display: block; /* делаем элемент блочным */
padding-top: 0.8em;
padding-bottom: 0.8em;
}
Здесь все описано внутри кода, лишь отмечу, используя приведенный выше CSS-код, правильно отобразят страницу только современные браузеры. То есть, в Internet Explorer ниже 8 версии страница будет представлена неправильно. Это связано с тем, что старые браузеры, такие как Internet Explorer 6 и 7 не поддерживают значения inline и inline-block для списков. Решить эту проблему поможет замена строки display: inline-block во втором правиле на
/* для младших версий Firefox */
display: -moz-inline-stack;
/* для всех, кроме IE 7- и Firefox */
display: inline-block;
/* Для IE 7 и ниже */
*display: inline;
_overflow: hidden;
zoom: 1;Аналогичным образом создадим меню слева.
<ul id="vmenu">
<li><a href="#"><span>Диагностика</span></li>
<li><a href="#"><span>Профилактика</span></li>
<li><a href="#"><span>Лечение</span></li>
<li><a href="#"><span>Хирургия</span></li>
</ul>
Оформим с помощью CSS.
#vmenu li a
{
color:Green;
text-decoration:none;
}
#vmenu li
{
font-family:Calibri;
font-size:14px;
font-style:normal;
width:115px;
display:block;
overflow:hidden; /* скроем вылезающие элементы */
padding:0.5em 0em 0.5em 0;
/* сделаем элемент в виде кнопки, задав соответствующий фон */
background-image:url('sm_button.png');
background-position:center;
background-repeat:no-repeat;
}
#vmenu li a span
{
width:100px;
padding-left:1em;
padding-right:100px;
display:block;
}
#vmenu li:hover
{
background-image:url('sm_button_hover.png');
}Также, как и в предыдущем случае, в Internet Explorer младших версий возникнет ошибка отображения. Связана она с удвоением отступов у элементов в этом браузере.
На следующем уроке мы завершим верстку нашей страницы, разместив логотип нашего сайта, контент и подвал страницы.
Обсуждение статьи
