Totalmente compatível com menu dobrável de buffer secundário destacável

Tenho estado bastante ocupado recentemente e não cuido do meu blog há vários meses. Agora vou separar um exemplo de menu feito recentemente no projeto e compartilhá-lo.

O layout mais comumente usado no back-end ou sistema OA geralmente é um layout de tela inteira, que geralmente é um layout com três linhas e duas colunas na parte superior, intermediária e inferior, com cabeçalho, rodapé, menu esquerdo e um quadro ifame página à direita. Portanto, o menu secundário dobrável é frequentemente usado. Este exemplo é para implementar um menu de dobramento de buffer secundário mais geral, totalmente compatível e destacável.

Características :

1. Totalmente compatível, navegador testado: IE5.5, IE6, IE7, IE8, FF3.0, Google, Safari 4.0, Opera9.0.
2. A estrutura HTML é elegante e concisa, sem tags redundantes, o que favorece a saída do loop do programa.
3. O estilo e a estrutura são separados e você pode modificar diferentes estilos na folha de estilos.
4. O item atualmente selecionado é destacado Tanto o menu de primeiro nível quanto o menu de segundo nível podem ser destacados.
5. Animação buffer elegante de camadas dobráveis.
6. Mais adequado para back-end e algumas interfaces de sistema OA.

deficiência :

1. A anti-atualização não é suportada. Esta função não deve ser muito útil no sistema de aplicativos em segundo plano, portanto, esta função não foi adicionada.
2. O efeito de buffer não aparece no IE6. Para o IE6, o efeito será enfraquecido.

3. Vamos falar brevemente sobre algumas ideias simples e problemas encontrados na elaboração de tal menu.

   Geralmente, ao criar um efeito, meu processo de produção é primeiro desenhar o conteúdo da camada de estrutura HTML, depois escrever o estilo e, em seguida, adicionar alguns efeitos de cereja no bolo, como efeitos especiais JS e assim por diante. Não sei qual modelo de processo os especialistas têm.

   Camada estrutural :

   A ideia da camada estrutural geralmente é baseada em uma compreensão perceptual, geralmente com uma renderização, e com base nesta renderização é construída a estrutura HTML mais concisa. Conforme mostrado na imagem acima, a primeira impressão que surge é a de usar uma lista não ordenada de UL, mas... esta é uma lista aninhada de dois níveis. Esta é a primeira questão que precisamos considerar.

   Então a estrutura deve ficar assim:

   Quando há um menu de segundo nível, é uma estrutura UL aninhada. Quando não há menu de segundo nível, é o seguinte:

   <ul class="menu">
   <li><a href="#none">Itens de menu de primeiro nível</a></li>
   </ul>

   Claro, você também pode usar o método de lista ordenada dl-dt-dd para criar essa estrutura aninhada, dependendo da sua situação real.

   Com a camada estrutural mais original, você precisa adicionar alguns ganchos necessários para CSS e JS para controlar estilos e efeitos. Sempre me opus ao método de adicionar muitos nomes de classes, o que aumentará o tamanho da página, portanto, ao máximo. simplificado A abordagem é aplicar um ou dois nomes de classe necessários ao contêiner pai e, em seguida, usar o seletor filho (grupo) para definir várias configurações personalizadas na folha de estilos. Na estrutura acima, quantos nomes de classes você pensaria em usar para definir todos os estilos?

   Minha abordagem é usar apenas três nomes de classes para controlar todas as exibições de estilo. Um é o UL de nível superior, definido como class = "menu", o outro é o contêiner do menu de segundo nível, ou seja, o UL aninhado define uma classe = "nível 2" e, finalmente, o item de menu de primeiro nível li define um class="level1" , com esses três ganchos você pode manipular o estilo de toda a estrutura.

   Camada de apresentação :

   A configuração da folha de estilo é muito simples. A única coisa a notar é que para facilitar o JS a controlar a exibição e ocultação do menu secundário e registrar o status de destaque do item atualmente selecionado, não utilizo o pseudo hover. -class para obter o efeito de deslizamento do mouse e use JS para simulá-lo. Os códigos-chave para controlar estilos usando JS são os seguintes:

   Estilo de menu de primeiro nível

   /*Menu de primeiro nível estilo três estados, para chamada JS*/
   .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif ) sem repetição no canto superior esquerdo;}
   .menu li.level1 a.hove{posição de fundo:esquerda -31px;}
   .menu li.level1 a.cur{posição de fundo:esquerda -62px;}

   Estilo de menu secundário

   /*Estilo de três estados do menu secundário para chamadas JS*/
   .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif ) sem repetição no canto superior esquerdo;}
   .menu li.level1 a.hove{posição de fundo:esquerda -31px;}
   .menu li.level1 a.cur{posição de fundo:esquerda -62px;}

   Camada comportamental :

   Conforme mencionado anteriormente, não definimos o efeito de três estados do menu na folha de estilos, portanto, precisamos vincular os eventos onmouseover, onmouseout e onclick a cada item de menu para simular esse efeito. Na camada de estrutura, não definimos o ID deste contêiner total, mas apenas definimos um nome de classe, então adicionamos um método getElementsByClassName() estendido em JS (graças ao meu amigo Situ Zhengmei) para obter este objeto com base na classe nome. Use fechamentos de loop para vincular esses três eventos.

   Não vou explicar o código detalhado um por um. Os comentários na demonstração são muito claros. Faça o download para o seu computador local para navegar.

   Se você tiver alguma dúvida, poste e discuta neste blog. Desejo-lhe um bom uso!

   <li><a href="#none">Itens de menu de primeiro nível</a>
   <ul>
   <li><a href="#none">Itens de menu de segundo nível</a></li>
   </ul>
   </li>