1. Visão geral
O uso de um menu flutuante pop-up pode não apenas tornar o conteúdo de navegação do site mais claro, mas também não afeta o efeito geral da página. Execute este exemplo, como mostrado na Figura 1, quando o mouse se mover para o título do menu de navegação de primeiro nível, o menu flutuante será exibido para exibir o submenu correspondente ao menu. Quando o mouse se move, o menu flutuante será oculto.
2. Pontos técnicos
Este exemplo está principalmente no JavaScript, alterando dinamicamente o valor do atributo de exibição do atributo de estilo do objeto de tag <div> para exibir e ocultar dinamicamente o menu de navegação secundário. De fato, o conteúdo do menu secundário em cada menu de nível um foi adicionado à tag <div> da página da web, mas o <div> está definido neste momento e não será exibido. Portanto, no JavaScript, quando o mouse passa por um título de navegação, ele só precisa chamar o objeto especificado <div> e modificar dinamicamente seu atributo de exibição. O atributo de exibição contém dois valores de atributo para exibição e oculto, ou seja, nenhum (oculto) e bloco (exibição).
Por exemplo: Existe uma tag <div> com ID do MyDiv na página da web, e este <div> está definido para ocultar. Em JavaScript, o método de escrita para controlar a exibição deste <div> é o seguinte:
document.getElementById ("mydiv"). style.display = "bloco";3. Implementação específica
(1) Escreva métodos JavaScript para exibição e ocultar. O menu secundário será exibido quando o mouse passar pelo título do menu primário, e o menu secundário ficará oculto quando o mouse se saí. O código -chave é o seguinte:
Mudança de função (IMG, submenu, caminho, tipo) {img.src = "imagens/"+caminho+". gif"; if (submenu! = null) {if (type == 0) {submenu.style.display = "nenhum";} else {submenu.style.display = ";(2) Na página, adicione o conteúdo do menu secundário a cada menu de navegação primária na tag <div> com antecedência e defina a tag <div> do menu secundário a se esconder. O código -chave é o seguinte:
<div id = "nUser" style = "Background-Color:#f3ffd5; borda:#75A102 1px Solid; largura: 200px; posição: absoluto; display: nenhum; esquerda: 1px; top: 34px;"> <tabela celular = "0" CellPadding = "0"> <tr>> <tign; href = "#"> adicione novos funcionários </a> </td> </tr> </ tabela> </div> ... // O conteúdo de outros menus secundários é omitido aqui
(3) Defina os eventos OnMouseOver e OnMouseOut no <td> da tabela do menu primário, ligue para o método JavaScript Change () definido na etapa (1) e altere dinamicamente a exibição e o esconderijo do menu secundário <div>. O código -chave é o seguinte:
<td onmouseover = "altere (imguser, nusser, 'nuser_r', 1)" onmouseout = "altere (imguser, nusser, 'nuser_b', 0)" style = "cursor: hand;"> <img id = "imguser" src = "imagens/ner_b.f; omitido </td>
O acima é o menu flutuante pop-up da barra de navegação apresentada pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!