O efeito de destaque do menu é um método de design frequentemente usado em todas as páginas da web. Ele pode permitir que os usuários saibam com eficácia em que coluna estão. Este também é o método que uso com frequência. Geralmente, as páginas da web têm pelo menos dois níveis de menu. O primeiro é o menu geral da barra de navegação na parte superior e o outro é o menu de navegação por categoria à esquerda. Geralmente é necessário que o status atual também possa ser registrado no menu de segundo nível quando o menu de primeiro nível estiver destacado.
Se a área do cabeçalho que contém o menu superior for fixa, ou seja, não precisa ser recarregada todas as vezes, neste caso pode ser facilmente implementado usando CSS ou JS puro, mas hoje não vou falar sobre isso,. O que estamos falando hoje é que o menu de primeiro nível e o menu de segundo nível são carregados dinamicamente em cada página , ou seja, são carregados como controles de usuário. Neste caso, é difícil registrar o status destacado do menu.
Claro, você pode dizer que pode usar cookies para registrar o último estado destacado registrado quando cada página é carregada. Sim, isso pode realmente ser gravado, mas este método causará problemas em alguns aplicativos complexos que contêm muitas subpáginas. muita confusão e problemas para os usuários. Por exemplo, durante o ciclo de vida do cookie, quando o projeto é reaberto, o ciclo de vida do cookie não terminou completamente. Ele também registra o último estado salvo e o endereço da página mudou neste momento, então o menu atualmente destacado A página apontada. to não é o que o usuário deseja ver. A prática provou que não importa quanto tempo você defina o ciclo de vida desse cookie, ele não pode resolver perfeitamente o problema de os usuários atualizarem a página de forma maliciosa. Isso é realmente uma coisa ruim!
Então, existe uma maneira melhor de resolver esta situação?
A resposta é sim. Sabemos que a maneira ideal de resolver este problema é definir explicitamente o estilo de destaque do menu atual de acordo com o endereço URL da página quando cada página é carregada . Isso resolve perfeitamente esse tipo de problema e, desta forma, por mais maliciosamente que o usuário clique no botão atualizar, o estado destacado permanece inalterado. Depois de conhecer o princípio, será muito mais fácil implementá-lo.
camada estrutural
Camada de estrutura de menu de primeiro nível:
Pode-se observar que neste menu de primeiro nível o endereço do link geralmente não possui valor de parâmetro. A camada estrutural do menu secundário:
Diferente do menu de primeiro nível, adicionamos dois valores de parâmetro ao endereço do link no menu de segundo nível. O parâmetro pId aponta para o número de série do menu superior de primeiro nível e sId é o número de sequência do. próprio menu. Definimos dois IDs diferentes para o contêiner total ul desses dois menus. Eles precisam ser chamados em JS, portanto não devem faltar.
camada de estilo
Em relação ao estilo, na verdade não há nada de especial nele. Você pode configurá-lo para o estilo desejado. A única coisa que precisa ser observada é que precisamos definir os três estilos de status do destaque do menu separadamente para chamada dinâmica por JS. .
/*Três configurações de estilo para o menu de primeiro nível*/
#menu li a.normal{background:#fff;}//estilo normal
#menu li a.over{background:#00ff00;} //Estilo rolante
#menu li a.cur{background:#ff0000;color:#fff;} //Estilo de destaque
/*Três configurações de estilo para o menu secundário*/
#othermenu li a.normal{background:#fff;} //Estilo normal
#othermenu li a.over{background:#AA7F00;color:#fff;} //Estilo de rolamento
#othermenu li a.cur{background:#7F0000;color:#fff;} //Estilo de destaque