Este é um menu muito simples. Embora simples, podemos aprender alguns conhecimentos relevantes sobre CSS e JavaScripts com este exemplo, o que é de grande benefício para a compreensão dos princípios e fundamentos da criação de menus suspensos. Neste exemplo, usei uma tag DIV como coluna do menu suspenso e uma TABLE como cabeçalho do menu. O princípio é mudar os atributos de exibição da coluna do menu suspenso identificando os movimentos do mouse.
A seguir está o efeito deste menu DIV. Você pode clicar em qualquer espaço em branco na página para cancelar a exibição do menu suspenso.
Site de tecnologia de revista site de portal site de coleção pessoal
Yesky. com
Informações do revendedor de computadores
eletrônica moderna
Sina
Sohu Sohu
Netease Netease
Estação de programação de rede de mouse
Recorde de colega de classe chinês
Bem,
China Software Development Network
, se eu lhe dissesse que tal efeito levaria apenas dezenas de linhas de código, você acreditaria?De qualquer forma, vamos aprender como fazer esse cardápio passo a passo. Passo a passo, vamos lá.
O primeiro passo é definir as folhas de estilo CSS em cascata para itens de menu e colunas de menu. Aqui, se você não sabe o que significa CSS, consulte o tutorial sobre CSS em "Site de Notícias de Computador". Definimos duas classes CSS, uma é Meun e a outra é SubMenu. Menu define o estilo exibido na parte superior do menu e Submenu define o estilo de exibição da coluna do menu suspenso. Aqui, o que precisa ser observado é o atributo CSS "position:absolute;width:200" no Submenu. Isso é necessário porque determina a posição onde exibimos o Submenu. Outras propriedades CSS são opcionais. A seguir está a descrição dessas duas classes CSS. Você pode colocar o seguinte parágrafo entre <head></head> ou <body></body> do site.
<ESTILO>
<!--
.menu {cor de fundo: verde; largura: 120; altura: 20; cor: branco; alinhamento do texto: centro; tamanho da fonte: 9pt; peso da fonte: mais escuro}
.submenu {posição:absoluta;topo:40;cor de fundo:amarelo claro;largura:180;tamanho da fonte:9pt}
-->
</STYLE>
Na segunda etapa, vamos dar uma olhada no código Javascript para ocultar e mostrar colunas do menu suspenso. Este código é muito simples e deve ser fácil de entender para quem já aprendeu um pouco de JavaScript. Se você não entende Javascript, consulte também os artigos sobre JavaScripts no "Site de Notícias de Computador". O significado deste código é que sempre que o mouse entrar no elemento do menu (Menu), sua coluna do menu suspenso será exibida por uma função chamada Show. A principal função desta função Mostrar é exibir a coluna do menu suspenso atual, ocultar outras colunas do menu e colocar o item de menu exibido atualmente na variável cm. Além disso, aqui também adicionei um manipulador de evento de clique do mouse simples (onclick). Quando o mouse clica na página da web, todas as colunas do menu suspenso serão ocultadas. Abaixo, apresento todo o programa Javascript, que inclui uma função chamada getPos, que é usada para obter a posição de exibição da coluna do menu suspenso.
<ROTO>
varcm=nulo;
document.onclick = nova Função("mostrar(nulo)")
função getPos(el,sProp)
{var iPos = 0
enquanto (el!=nulo)
{iPos+=el["deslocamento" + sProp]
el = el.offsetParent}
retornar iPos}
função mostrar(el,m)
{se (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"Esquerda")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='none' cm=m }
</SCRIPT>