Удаляем overflow:hidden;
Чтобы меню с выпадающими пунктами заработало, нужно удалить правило overflow:hidden; из стилей элемента centeredmenu div. Если просто удалить данное правило, то может появиться полоска горизонтальной прокрутки для страницы. Это происходит потому, что невидимый элемент ul иногда выходит за правую границу области видимости. Однако не стоит беспокоиться. Есть решение. Мы можем предотвратить выход элемента за правую границу области видимости, перевернув позиционирование элементов меню так, чтобы элемент ul выступал с левой стороны. Ниже представлен измененный код CSS:
#centeredmenu {
float:left;
width:100%;
background:#fff;
border-bottom:4px solid #000;
position:relative;
}
#centeredmenu ul {
clear:left;
float:right;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#centeredmenu ul li a:hover {
background:#369;
color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
На рисунке представлена диаграмма того, что происходит с элементами при использовании выше приведенных правил:
Выравнивание в другую сторону
Обратите внимание, что розовый элемент ul выступает теперь с левой стороны страницы. Браузер автоматически обрезает все, что выходит за границу области видимости слева. Поэтому нам не нужно использовать правило overflow:hidden;!
Добавляем выпадающие пункты
Теперь модно добавить выпадающие подпункты меню. Семантика HTML очень простая - используются вложенные списки:
<div id="centeredmenu">
<ul>
<li><a href="#">Закладка один</a>
<ul>
<li><a href="#">Ссылка один</a></li>
<li><a href="#">Ссылка два</a></li>
<li><a href="#">Ссылка три</a></li>
<li><a href="#">Ссылка четыре</a></li>
<li><a href="#">Ссылка пять</a></li>
</ul>
</li>
<li class="active"><a href="#" class="active">Закладка два</a>
<ul>
<li><a href="#">Ссылка один</a></li>
<li><a href="#">Ссылка два</a></li>
<li><a href="#">Ссылка три</a></li>
<li><a href="#">Ссылка четыре</a></li>
<li><a href="#">Ссылка пять. Длинный подпункт, который надо сворачивать.</a></li>
</ul>
</li>
<li><a href="#">Длинная закладка три</a>
<ul>
<li><a href="#">Ссылка один</a></li>
<li><a href="#">Ссылка два</a></li>
<li><a href="#">Ссылка три</a></li>
<li><a href="#">Ссылка четыре</a></li>
<li><a href="#">Ссылка пять</a></li>
</ul>
</li>
<li><a href="#">Закладка четыре</a>
<ul class="last">
<li><a href="#">Ссылка один</a></li>
<li><a href="#">Ссылка два</a></li>
<li><a href="#">Ссылка три</a></li>
<li><a href="#">Ссылка четыре</a></li>
<li><a href="#">Ссылка пять</a></li>
</ul>
</li>
</ul>
</div>
А вот и CSS код, который все превращает в стройное меню с выпадающими списками. Основные моменты были описаны выше, код снабжен комментариями, поэтому останавливаться для долгих объяснений не будем. А то, на что следует обратить внимание, описано далее по тексту урока.
/* Общие установки меню */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
border-bottom:1px solid #000; /* черная линия под меню */
width:100%;
font-family:Verdana, Geneva, sans-serif;
font-size:90%; /* Размер текста меню */
z-index:1000; /* Так выпадающие подпункты будут выводиться поверх содержимого страницы, расположенного ниже меню */
position:relative;
}
/* Основные пункты меню */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
background:#ddd;
text-decoration:none;
color:#444;
font-weight:bold;
border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
color:#fff;
background:#000;
}
#centeredmenu ul li a:hover {
background:#36f; /* Цвет фона основных пунктов меню */
color:#fff;
border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* Данная строка требуется для IE 6 */
background:#36f; /* Цвет фона основных пунктов меню */
color:#fff;
border-bottom:1px solid #03f;
}
/* Подпункты */
#centeredmenu ul ul {
display:none; /* Подпункты скрыты по умолчанию */
position:absolute;
top:2em;
left:0;
float:left;
right:auto; /* Сбрасываем установки свойства right:50% родительского элемента ul */
width:10em; /* Ширина выпадающего меню */
}
#centeredmenu ul ul li {
left:auto; /*Сбрасываем установки свойства left:50% родительского элемента li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* Данная строка требуется для IE 6 */
font-size:.8em;
font-weight:normal; /* Сбрасываем установки жирного шрифта для пунктов верхнего уровня меню */
background:#eee;
color:#444;
line-height:1.4em; /* Изменяем значение значение свойства line-height */
border-bottom:1px solid #ddd; /* Горизонтальная линия для пункта подменю */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* Данная строка требуется для IE 6 */
background:#36f; /* Цвет фона пункта подменю */
color:#fff;
float:left;
}
/* Переставляем последнее подменю так, что оно находится внутри страницы */
#centeredmenu ul ul.last {
left:auto; /* Сбрасываем значение свойства left:0; */
right:0; /* Устанавливаем значение для свойства right */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}
/* Выводим подменю при наведении курсора мыши на пункт основного меню */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /*Данная строка требуется для IE 6 */
display:block; /* Выводим подменю */
}
Выделение активного пункта меню
Выделение активного пункта верхнего уровня меню выполняется с помощью добавления class="active" к соответствующему элементу li.
Переворачивание последнего подменю
Для того чтобы последнее выпадающее меню не выходило за границы страницы мы его переворачиваем. Для этого нужно добавить class="last" к последнему элементу ul подменю. Данное действие можно смело пропустить, если оно не соответствует замыслу проекта.
Пляски с бубном для Internet Explorer 6
Конечно же, IE 6 ломает стройность решения. В старых версиях IE псевдо-класс hover работает только для элементов ссылок. Поэтому придется использовать очень простую заплатку для этого корявого браузера. Воспользуемся условным комментарием IE для присоединения небольшого кода JavaScript, который будет приводить в порядок работу приложения. Хорошая новость - современные браузеры просто не увидят данный код JavaScript, который будет работать только для IE. Ниже приведенную строку надо разместить в конце страницы HTML:
<!--[if lt IE 7]><script type="text/javascript" src="iehoverfix.js"></script><![endif]-->
И собственно код JavaScript, который размещается в файле iehoverfix.js. Мы просто добавляем класс 'hover' элементам li в меню, когда курсор мыши проходит над ними. Класс CSS используется так же, как и псевдо-класс hover (смотри комментарии к коду CSS).
function addhover() {
var navli,i;
// Цикл по всем элементам навигации
navli = document.getElementById('centeredmenu').getElementsByTagName('li')
for(i=0;i<navli.length;i++) {
// Добавляем обработчики событий onmouseover и onmouseout
navli[i].onmouseover=function(){hover(this,'hover');};
navli[i].onmouseout=function(){hover(this,'');};
}
}
function hover(o,sClass) {
if (o) {
o.className = sClass;
}
}
addhover();
Готово!