Эта статья будет продолжена с того места, где я остановился, с меню на основе списков HTML и CSS., Для многих веб-сайтов, имеющих меню, подобное тому, которое мы создали в предыдущей статье, они полностью удовлетворят потребности владельца веб-сайта и его пользователей, однако для некоторых сайтов, таких как зоны в DZone, существует определенная потребность в второй уровень навигации. Эти элементы второго уровня также должны быть мгновенно доступны для пользователей веб-сайта таким же образом, как и его одноуровневый аналог. Тогда это тема данной статьи, создание выпадающего и всплывающего меню с использованием каскадных таблиц стилей (CSS) и семантически закодированного языка разметки гипертекста (HTML). В то время как в этой статье мы сосредоточимся на HTML и CSS во второй части, мы также рассмотрим, как поощрять Internet Explorer 6 и ниже, играть вместе с небольшим количеством JavaScript, чтобы преодолеть ограничение только подтверждения: link,:hover и остальные стили ссылок CSS при применении к тегам <a>, а не к любому другому элементу HTML. Мы также рассмотрим причуды, представленные различными браузерами, и способы их преодоления.
Сначала давайте посмотрим на HTML, который мы закончили в конце последней статьи, поскольку мы будем использовать его в качестве основы этой статьи:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML and CSS Drop Down Menu</title>
<link rel="stylesheet" type="text/css" href="css/default.css" media="screen">
</head>
<body>
<ul id="nav">
<li><a href="index.html" title="return to front page">Home</a></li>
<li><a href="about.html" title="learn more about us">About</a></li>
<li><a href="portfolio.html" title="see some samples of our work">Portfolio</a></li>
<li><a href="contact.html" title="contact us">Contact</a></li>
</ul>
</body>
</html>
Одна из замечательных особенностей списков, которая дополнительно иллюстрирует, почему она так удобна для использования в меню, заключается в том, что один можно вкладывать в один список. Это именно то, что нам нужно сделать, чтобы начать работу с нашим двухуровневым меню. Таким образом, изолируя неупорядоченную часть списка кода, измените его, чтобы отразить следующее:
<ul id="nav">
<li><a href="index.html" title="return to front page">Home</a></li>
<li><a href="about.html" title="learn more about us">About</a>
<ul>
<li>Corporate Profile</li>
<li>Employee Profiles</li>
<li>Divisions</li>
</ul>
</li>
<li><a href="portfolio.html" title="see some samples of our work">Portfolio</a></li>
<li><a href="contact.html" title="contact us">Contact</a></li>
</ul>
Как видно из кода выше, я добавил вложенный неупорядоченный список, содержащий три элемента. Откройте это в своем браузере, вы должны увидеть следующее:
[Img_assist | NID = 5060 | название = | убывание = | ссылка = нет | Align = нет | ширина = 490 | Высота = 66]
ПРИМЕЧАНИЕ. Не забудьте включить эту строку на новую HTML-страницу: <link rel = «stylesheet» type = «text / css» href = «css / default.css» media = «screen»>
Мы на пути к созданию выпадающего меню. Первое, что нам нужно сделать, это изначально скрыть элементы второго уровня. Начните с создания нового файла CSS с именем dropdown.css и добавьте в него следующий код:
#nav li ul
{
display:none;
}
Это правило стиля сообщает браузеру, что любые <ul>, содержащиеся внутри <li>, который находится внутри элемента с идентификатором nav и id, не должны отображаться. Здесь важно отметить, что мы используем отображение: нет, а не просто видимость: скрыто. Для этого есть очень веская причина: при использовании атрибута видимости содержимое скрыто, все еще занимая место в документе HTML. С другой стороны, показ: ни один полностью не удаляет контент из DOM и дает нам именно то, что мы ищем. Далее не забудьте связать новую таблицу стилей в заголовке вашего HTML-документа:
<link rel="stylesheet" type="text/css" href="css/dropdown.css" media="screen">
Далее давайте нацелимся на состояния: hover и: focus нашего элемента списка «About» и дадим команду браузеру показать <ul>, содержащуюся внутри, когда срабатывает одно из этих состояний. Добавьте следующее в ваш файл CSS:
#nav li:hover ul, #nav li:focus ul
{
display:block;
}
Если вы сейчас перезагрузите страницу и наведите курсор мыши на ссылку «О программе», вы должны увидеть следующее:
[Img_assist | NID = 5061 | название = | убывание = | ссылка = нет | Align = нет | ширина = 489 | высота = 64]
Хотя это определенно не то, что мы ищем, по крайней мере, состояния: hover и: focus показывают вложенный <ul>. Чтобы избавиться от расширяющегося ‘About’, нам нужно вывести вложенный <ul> из потока документа по умолчанию. Мы делаем это, размещая неупорядоченный список абсолютно следующим образом:
#nav li:hover ul, #nav li:focus ul
{
position:absolute;
display:block;
}
Обновите окно браузера и наведите указатель мыши на ссылку «О программе». Теперь это должно привести к следующему:
[Img_assist | NID = 5064 | название = | убывание = | ссылка = нет | Align = нет | ширина = 344 | Высота = 63]
Это приближается к нашему конечному результату. Еще одну вещь, которую мы хотели бы изменить, — это изменить макет вложенного <ul> со встроенного обратно на его значение по умолчанию, сделав их ссылками и соответствующим образом стилизовав их. Итак, начнем. Добавьте следующее в ваш CSS-файл, чтобы остановить второй уровень ul:
#nav li ul li
{
float:none;
}
Далее мы заменим три элемента на ссылки:
<ul id="nav">
<li><a href="index.html" title="return to front page">Home</a></li>
<li><a href="about.html" title="learn more about us">About</a>
<ul>
<li><a href="corporate.html" title="Read our corporate profile">Corporate Profile</a></li>
<li><a href="employees.html" title="Read more about the people that work here.">Employee Profiles</a></li>
<li><a href="divisions.html" title="Read more about our various divisions">Divisions</a></li>
</ul>
</li>
<li><a href="portfolio.html" title="see some samples of our work">Portfolio</a></li>
<li><a href="contact.html" title="contact us">Contact</a></li>
</ul>
Обновление страницы и наведение курсора на ссылку «О программе» должно привести к следующему:
[Img_assist | NID = 5065 | название = | убывание = | ссылка = нет | Align = нет | ширина = 265 | Высота = 158]
Большой! Из-за правил стиля, которые мы наследуем из файла default.css, ссылки второго уровня были мгновенно стилизованы. Но давайте не будем останавливаться на достигнутом, давайте добавим что-то, чтобы отделить выпадающий список немного больше от меню верхнего уровня. Просто добавив верхнюю границу в 1 пиксель в раскрывающееся меню, мы получим хорошо выглядящее и функциональное раскрывающееся меню:
#nav li ul li
{
float:none;
border-top:1px solid #fff;
}
Видя, что у нас работает выпадающий список, давайте теперь посмотрим на создание всплывающего меню. Как вы знаете из предыдущей статьи, единственное, что нам нужно изменить в нашем HTML, это избавиться от двух в настоящее время связанных таблиц стилей и добавить следующее:
<link rel="stylesheet" type="text/css" href="css/vert_menu.css" media="screen">
Как и в случае с выпадающим меню, мы также создадим CSS-файл для нашего всплывающего меню и свяжем его с нашей новой HTML-страницей. Прежде чем мы добавим новый CSS, давайте загрузим нашу новую страницу и посмотрим, что нам представлено:
[Img_assist | NID = 5067 | название = | убывание = | ссылка = нет | Align = нет | ширина = 226 | Высота = 277]
Не плохо, но там посередине беспорядок. Как и в случае с раскрывающимся списком, наша первая задача — добавить правило стиля, чтобы изначально скрывать пункты меню второго уровня.
#nav li ul
{
display:none;
}
Далее давайте свяжем наш новый файл CSS:
<link rel="stylesheet" type="text/css" href="css/flyout.css" media="screen">
Затем добавьте правило, чтобы отобразить скрытые пункты меню при срабатывании состояний: hover или: focus:
#nav li:hover ul, #nav li:focus ul
{
display:block;
}
Результат:
[Img_assist | NID = 5069 | название = | убывание = | ссылка = нет | Align = нет | ширина = 223 | высота = 275]
Поскольку здесь мы не следуем эффекту аккордеона, нам нужно вынуть вложенный <ul> из естественного потока документа и отобразить его абсолютно:
#nav li:hover ul, #nav li:focus ul
{
position:absolute;
display:block;
}
Это все еще не дает нам желаемого эффекта, и мы должны смотреть немного дальше. Но прежде чем мы это сделаем, давайте еще немного усложним эту ситуацию. Вложите следующий неупорядоченный список в текущий элемент списка «Портфолио»:
<li><a href="portfolio.html" title="see some samples of our work">Portfolio</a>
<ul>
<li><a href="branding.html" title="Read more about logo design services">Logo Design</a></li>
<li><a href="webdesign.html" title="Read more about website design services.">Website Design</a></li>
<li><a href="webapps.html" title="Read more about our web applications">Web Applications</a></li>
</ul>
</li>
После добавления этого кода у нас теперь будет два всплывающих меню, одно за «О», а другое за «Портфолио». Теперь давайте заставим их вылететь в правую часть меню. Видя, что наши пункты подменю теперь находятся вне потока документа, и видя, что у нас есть ширина 15 em, установленная в качестве ширины наших меню первого уровня, мы должны просто иметь возможность добавить следующее и хорошо идти :
#nav li:hover ul, #nav li:focus ul
{
position:absolute;
top:0;
left:15em;
display:block;
}
Давайте обновим страницу и посмотрим, что получится:
[Img_assist | NID = 5070 | название = | убывание = | ссылка = нет | Align = нет | ширина = 432 | высота = 164]
Вау! Хорошо, это не то, что мы после. Теперь мы можем пойти дальше и настроить левое положение и верхнее положение, но мы должны были бы сделать это для каждого всплывающего меню и не обеспечить повторное использование, определенно не то, что мы хотим, чтобы вернуться к чертежной доске. Проблема в том, что в настоящее время верхняя и левая позиции подменю рассчитываются на основе верхнего угла окна браузера и расстояния от левого края браузера. Чтобы исправить это, нам нужно изменить наш контейнер, чтобы он содержал положение правила: относительное, это позволяет нам абсолютно позиционировать нашу всплывающую подсказку, основываясь на верхнем и левом, а также на правом и нижнем углу нашего содержащего элемента, а не окна браузера.
Наша первая задача — добавить класс в наши два контейнера, то есть «About» и «Portfolio»:
<li class="second-level">
Я назвал класс вторым уровнем, так как это наш контейнерный элемент для элементов меню второго уровня. Теперь нам нужно добавить следующее в начало нашего файла flyout.css:
#nav li.second-level
{
position:relative;
}
Затем измените CSS для наших состояний наведения и фокуса следующим образом:
#nav li:hover ul, #nav li:focus ul
{
position:absolute;
top:0;
margin-left:100%;
display:block;
}
Обновите ваш браузер снова, и вы должны увидеть:
[Img_assist | NID = 5071 | название = | убывание = | ссылка = нет | Align = нет | ширина = 440 | Высота = 163]
Не изменяя ничего, то же самое должно быть верно для вылетов «Портфолио». Большой! так что это работает хорошо, но нам нужно добавить некоторый стиль, чтобы четко отделить нашу выпадающую панель от пунктов меню первого уровня. Здесь я просто добавил правую границу, которая темнее, чем состояния: link и: hover.
#nav li.second-level li
{
border-left:5px solid #376D00;
}
Теперь это создает хорошее разделение для наших ссылок второго уровня:
[Img_assist | NID = 5072 | название = | убывание = | ссылка = нет | Align = нет | ширина = 441 | Высота = 162]
Я признаю, что это много зелени, но, если вы следовали этому уроку с помощью Firefox, вы можете подумать: Отлично! Теперь я могу пойти дальше и реализовать это на моем новом сайте. Но прежде чем это сделать, остановитесь, бросьте и катитесь. Боль вот-вот начнется. Теперь нам нужно протестировать это меню в четырех основных браузерах: Firefox, Opera, Safari и Internet Explorer, а затем нам нужно посмотреть, как ведет себя наш старый друг IE6. Во второй части этой серии статей я расскажу, как обеспечить работу раскрывающегося и выпадающего меню во всех браузерах, используя проверенное и надежное решение Son Of Suckerfish, а также узнаю, как мы можем это сделать с помощью jQuery.