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

StackOverflow https://stackoverflow.com/questions/233251

  •  04-07-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

Я делал что-то подобное раньше, и это хитрость, которая заключается в размещении пунктов меню в тегах привязки, с подменю в скрытых элементах 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. и большинство любых тегов.

Другие советы

Ознакомьтесь с создателем меню CSS .

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

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

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

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

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

a:link {
 color: blue;
}

a:hover {
  color: red;
}

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top