Os menus suspensos nas páginas do site são usados para economizar espaço e fornecer uma apresentação lógica da estrutura de um recurso da web. Existem muitas maneiras de implementar este elemento, uma das mais simples é fornecida abaixo.
É necessário
Conhecimento básico de linguagens HTML e CSS
Instruções
Passo 1
O código HTML do menu usa elementos de lista aninhados (UL e LI), dentro dos quais os links para as páginas são colocados. Não contém nenhuma estrutura complexa. A dinâmica é implementada por meio de CSS, cujo bloco de descrição é colocado diretamente no código-fonte da página. Também não há nada de especial nisso, além disso, o texto contém algumas explicações sobre a finalidade de certos blocos de estilo.
Passo 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu suspenso * {
família de fontes: Verdana;
tamanho da fonte: 14px;
} ul, li, a {
preenchimento: 0;
display: bloco;
fronteira: 0;
margem: 0;
} ul {
borda: 1px sólido #AAA;
largura: 150px;
estilo de lista: nenhum;
fundo: #FFF;
} li {
cor de fundo: #AAA;
posição: relativa;
índice z: 9;
preenchimento: 1px;
}
li.folder {cor de fundo: #AAA;}
li.folder ul {
posição: absoluta;
topo: 5px;
esquerda: 111px; / * para navegadores IE * /
}
li.folder> ul {left: 140px;} / * para outros navegadores * / a {
preenchimento: 2px;
borda: 1px sólido #FFF;
decoração de texto: nenhum;
largura: 100%; / * para navegadores IE * /
cor: # 000;
intensidade da fonte: Negrito;
}
li> a {width: auto;} / * para outros navegadores * / li a {
largura: 140px;
display: bloco;
} li a.submenu {
cor de fundo: amarelo;
} / * Links * /
a: hover {
cor da borda: cinza;
cor de fundo: # FF0000;
cor preta;
}
li.folder a: hover {
cor de fundo: # FF0000;
} / * Pastas * /
ul ul, li: hover ul ul {display: none;}
li.folder: passe o mouse {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Página
-
2. Pasta
- 2.1 Página
-
2.2 Pasta
- 2.2.1 Página
- 2.2.2 Página
- 2.2.3 Página
- 2.3 Página
-
3. Pasta
- 3.1 Página
- 3.2 Página
- 3.3 Página
- 4. Página
etapa 3
Você pode adicionar suporte para versões mais antigas dos navegadores Internet Explorer a este código - ele é implementado usando JavaScript (por Peter Nederlof). Você precisa baixar o arquivo com o código necessário, por exemplo, deste link - https://peterned.home.xs4all.nl/htc/csshover3.htc. Deve ser colocado na mesma pasta da página principal. E na descrição dos estilos da página principal, adicione um link para ela - ele pode ser colocado diretamente após a tag de estilo de abertura: / * para navegadores IE antigos *
body {behavior: url ("csshover3.htc");}
