Какова лучшая практика для разметки меню в стиле CSS?

Question

Итак, я некоторое время «собирал» CSS-меню (другим термином было бы «заимствование», другим - «нагло сдирать»), чтобы учиться у них и потенциально повторно использовать некоторые из них. в моих собственных проектах.

Будучи приверженцем старой школы HTML, мне нравится идея стилизованных <ul> s и <ol> s, и лучшие интерфейсы меню и вкладок, как правило, используют этот метод для обеспечения доступности или смысловой надежности или по любой другой причине. Мне в основном нравится этот метод, потому что он сохраняет мой источник HTML красивым и чистым.

Теперь я фактически реорганизовал свою коллекцию CSS-меню, чтобы она соответствовала одному «основному» шаблону разметки, который я экстраполировал из самых гибких примеров, таких как CSS Zen Garden. Это выглядит так:

<div class="menustyle">
<ul>
    <li class="current"><a href="#" title="Page 1"><span>Home</span></a></li>
    <li><a href="#" title="Page 2"><span>Toys</span></a></li>
    <li><a href="#" title="Page 3"><span>About Us</span></a></li>
    <li><a href="#" title="Page 4"><span>Contact</span></a></li>
</ul>
</div>

<span class="clearit" /><br />

(диапазон 'clearit' в конце используется для установки clear:both после меню, которое требует этого)

Во всяком случае, я видел варианты этой разметки на многих сайтах, некоторые с дополнительным включением <div>, некоторые с использованием слова, отличного от current, некоторые присоединения класса current к тегу <a> чем <li>, а некоторые упускают изнутри <span>. У каждого, кажется, есть свой собственный способ сделать разметку меню, которая немного отличается.

В любом случае, после работы с лотом меню, я придумал вышеизложенное, но я пытаюсь выяснить, существует ли реально установленная лучшая практика для этого. Я хотел бы в какой-то момент настроить простой литейный пункт меню CSS, и было бы неплохо получить некоторую информацию о разметке, прежде чем идти дальше.

РЕДАКТИРОВАТЬ: Вопрос не о меню Javascript. Я знаю, есть отличные скриптовые меню, и они позволяют вам иметь подменю, более продвинутые анимации и время наведения, сочетания клавиш, тени и все остальное. Но 90% меню не нуждаются в этих функциях , и гораздо лучше использовать CSS для стилей и эффектов наведения.

Answer 1

Кроме удаления тегов span, я думаю, что это нормально.

Нет причин иметь их, потому что с вашими настройками вы можете оформить текст так, как вы хотите, с помощью

li a {/*styles*/}

Вы также сможете удалить

<span class="clearit" /><br />

раздел, а также. Если вы пытаетесь пропустить только ul внутри div, вы также можете удалить div. Если вам нужна очистка по какой-то другой причине, вы можете сделать

<br clear="all"/>

Answer 2

Вы можете использовать clearfix класс для UL (вместо диапазона очистки):

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}

Теперь ваше меню будет выглядеть так:

<div class="menustyle">
<ul class="clearfix">
.....

Конечно, вы можете добавить эти свойства непосредственно в UL, чтобы избежать каких-либо изменений HTML-кода:)

Answer 3

Если вам интересно иметь подменю, я бы порекомендовал проверить библиотеку YUI. Он предоставляет вам совместимое с браузером подменю из разметки.

http://developer.yahoo.com/yui/examples/menu/index.html

Answer 4

CSS-меню - это боль в тылу и т. Д. 2005. Все это кросс-браузерная совместимость, IE исправляют файлы JavaScript и так далее. В частности, чтобы ответить на ваш вопрос: сегодня они ничем не отличаются от тех, что были три года назад, потому что IE7 не поддерживает: наведите курсор на не-ссылки и IE6 все еще необходимо поддерживать.

В эти дни просто скачайте jQuery, установите плагин Superfish и включите этот код:

$(function() {
  $("ul.menu").superfish();
});

и готово. Даже работает на IE6 (с меньшим количеством функций).