Как я могу создать меню в HTML без использования Javascript?

Question

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

Answer 1

Я делал что-то подобное раньше, и это хитрость, которая заключается в размещении пунктов меню в тегах привязки, с подменю в скрытых элементах div ВНУТРИ этих тегов привязки. Хитрость CSS заключается в том, чтобы заставить внутренний div появляться во время события a: hover.

Это выглядит примерно так:

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

Ваш пробег может варьироваться ...

РЕДАКТИРОВАТЬ: Internet Explorer 6 и ниже НЕ поддерживает псевдокласс: hover для других элементов, кроме A. В более «современных» браузерах принято использовать этот трюк с LI, TD, DIV, SPAN и большинство любых тегов.

Answer 2

Взгляните на CSS Menu Maker .

Answer 3

Самым известным методом является меню suckerfish . Поиск этого приведет к множеству интересных меню. Требуется только JavaScript в IE6 и ниже.

Вот список сыновей меню сосунков.

Answer 4

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

*: конечно, не все сценарии меню на самом деле пытаются это сделать ...

Answer 5

Существует также Оригинальная статья Эрика Мейера о чистых меню CSS .

Должны быть гораздо более надежные и современные модели, упомянутые другими, но я подумал, что упомяну это для потомков. :)

Answer 6

Вы можете использовать псевдокласс: hover, чтобы получить эффект наведения.

a:link {
 color: blue;
}

a:hover {
  color: red;
}

Я могу привести более обширный пример, но не прямо сейчас (нужно привести детей к стоматологу).