Как я могу создать меню в HTML без использования Javascript?
На протяжении многих лет стандартом графического интерфейса пользователя являются строки меню приложений с меню, всплывающим при нажатии или наведении курсора на запись в строке меню. Некоторые веб-сайты также реализуют эту функцию, но, насколько я понимаю, они используют Javascript. По разным причинам Javascript может быть проблемой, поэтому вопрос: возможно ли это реализовать без Javascript, только используя HTML и CSS?
Ответы 6
Вы можете использовать псевдокласс: hover, чтобы получить эффект наведения.
a:link {
color: blue;
}
a:hover {
color: red;
}
Я могу привести более развернутый пример, но не сейчас (нужно отвести детей к стоматологу).
@ Ядынь: я знаю, это смешно. ... Что случилось с отправкой детей без плащей, чтобы поправить их ...?
Я делал что-то подобное раньше, и это уловка, которую удалось реализовать, поместив элементы меню в теги привязки, а подменю - в скрытых блоках 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 и большинством любой тег.
Спасибо за эту огромную помощь и даже за упоминание IE6. Поскольку я использую Linux, я бы даже не стал тестировать IE6. Или я должен специально взломать сайт для IE6, чтобы у людей была мотивация перейти на современный браузер? ;-)
По моему опыту, лучше избегать взлома любого браузера, когда вы разрабатываете веб-приложение для массового использования.
Взгляните на CSS Menu Maker.
Вау ... Я искал что-то в точности такое. Отличный пост :).
Интересно ... Я посмотрел на этот: cssmenumaker.com/builder/menu_info.php?menu=007# в IE6, и он не работал, несмотря на то, что на боковой панели утверждается совместимость с IE6. Покупатель, будь осторожен.
Самый известный метод - меню из рыбы-присоски. Поиск этого приведет к появлению множества интересных меню. Ему нужен только javascript в IE6 и ниже.
Рассмотрите возможность использования методов CSS в качестве резервной копии, когда JavaScript недоступен. JavaScript может * обеспечить лучший пользовательский интерфейс для раскрывающихся меню, потому что вы можете добавить некоторые факторы задержки, чтобы меню не исчезало немедленно, если мышь ненадолго покинет область наведения. Меню на чистом CSS иногда может быть немного привередливым в использовании, особенно если цели наведения невелики.
*: конечно, не все скрипты меню действительно этим занимаются ...
Также есть оригинальная статья Эрик Мейер о меню на чистом CSS.
Наверное, будут гораздо более надежные и современные варианты, о которых сейчас упоминают другие, но я подумал, что упомяну об этом для потомков. :)
Подождите, подождите ... позвольте мне рассказать эту историю прямо. У вас был скорый визит к детскому стоматологу, дети в пальто от осеннего холода в конце октября, и, с ключами в руках, решили: «Подождите, мне лучше проверить Stack Overflow, прежде чем мы уйдем ... может быть вопрос CSS, на который я могу ответить ! " Меня это забавляет ...