Como posso criar um menu em HTML sem usar Javascript?

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

  •  04-07-2019
  •  | 
  •  

Pergunta

Desde há muitos anos um GUI-padrão são as menu-bares de aplicações com menus aparecendo, se você clicar ou passar uma entrada no menu do bar. Alguns sites implementar esse recurso também, mas eles estão usando Javascript, tanto quanto eu posso ver. Por razões diferentes Javascript pode ser um problema, então a questão:? Isso é possível implementar sem Javascript, usando apenas HTML e CSS

Foi útil?

Solução

Eu fiz algo assim antes, e é um truque puxado para fora, colocando os itens de menu em marcas de âncora, com submenus em divs escondido dentro dessas marcas de âncora. O truque CSS é fazer com que as div internas aparecem durante o um:. Evento pairar

Parece algo como: 

<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>

Sua milhagem pode variar ...

EDIT: Internet Explorer 6 e inferiores não apoiar a: hover pseudo-classe sobre outros elementos além A. Em mais navegadores 'modernos', aceita-se para ser capaz de usar esse truque com LI, TD, DIV, SPAN , e mais qualquer tag.

Outras dicas

Tenha um olhar em CSS Menu Maker .

Melhor técnica conhecida é a suckerfish menus . Procurando que irá resultar em um monte de interessante Menu. Ele só precisa de javascript no IE6 e inferiores.

Aqui está uma lista dos filhos dos menus Suckerfish.

Considere o uso de métodos de CSS como um backup para quando o JavaScript não está disponível. JavaScript pode * proporcionar uma melhor experiência de usuário para drop-down menus porque você pode adicionar alguns fatores de atraso para menus parar imediatamente desaparecendo se deixa o brevemente do mouse sua área de foco. menus Pure-CSS às vezes pode ser um pouco mimado para uso, especialmente se as metas do pairo são pequenos.

*: Claro, nem todos os scripts de menu realmente se preocupam em fazer isso ...

Você pode usar o pseudoclass:. Pairar para obter um efeito hover 

a:link {
 color: blue;
}

a:hover {
  color: red;
}

Eu posso dar um exemplo mais extenso, mas não agora (necessidade de levar as crianças ao dentista).

Há também Eric Meyer 's artigo original em puro CSS .

Não são obrigados a ser muito mais robusta e moderna leva lá fora agora mencionado por outros, mas eu pensei que eu iria falar isso para a posteridade. :)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top