O menu suspenso é frequentemente encontrado no meu desenvolvimento, mas nenhum projeto precisa ser reescrito. Embora seja simples, mas muito problemático, modificá -lo, ainda sou relativamente preguiçoso. Hoje tenho tempo para organizar os menus no meu desenvolvimento anterior de projeto e escrever uma versão geral. Não precisarei ser tão problemático no futuro.
Características
O menu compilado hoje é desenvolvido pelo JQuery+CSS com as seguintes características:
1. VERSATILIDADE FORTE
Havia um problema com um menu suspenso que eu usei antes, e a navegação principal e o submenu precisam ser definidos separadamente. Por exemplo, o menu de segundo nível é class = "First_menu", o menu de terceiro nível é class = "Second_menu" ... e assim por diante. Há um problema com este método de escrita, que é que não é propício para os programadores que executam a saída do loop. Este menu precisa apenas introduzir um estilo CSS, sem a necessidade de definir um menu de vários níveis.
2. Belas instruções automáticas de retirada de chamada automática
No passado, adicionávamos uma classe suspensa ao menu suspenso manualmente. Agora, precisamos definir apenas o estilo do efeito suspenso no CSS, e o código procurará automaticamente o menu suspenso e adicionará setas indicadoras;
3. CHAMADA PELASA
A lista de saída do programador é simples e não requer muito julgamento, basta ligar para os dados do menu recursivamente.
concluir
1. Código HTML
Primeiro, produzimos dados de menu na página, que consistem em UL e LI para formar uma lista de menus. O código de estrutura específico é o seguinte:
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> menu um </a> <ul> <li> <a href = "#"> montanha -rochas </a> </li> <li> <a href = "#"> vulcano erupção </a> </" Pássaro </a> </li> </li> </li> <li> <a href = "#"> menu dois </a> <ul> <li> <a href = "#"> sobre nós </a> <ul> <li> <a href = "#"> geográfico <woLa> href = "#"> nascimento e eterno </a> </li> <li> <a href = "#"> href = "#"> bem -sucedido </a> </li> </li> </li> <li> <a href = "#" toca -dados </a> <ul> <li> <ahref = "#"> tapta de dados <ul> <li> <a> href = "#"> Criptografia de dados </a> </li> <li> <a href = "#"> modelagem de dados </a> </li> </li> </li> <li> <a href = "#" c câmera </a> </li> </li> </li> </li> <li> <a> </li> </ul>
Alguns códigos HTML básicos são simples e não precisam explicar o significado do código. Eles enfatizam a estrutura do código: se o segundo nível, o terceiro nível ou vários menus de nível são principalmente aninhados UL; O nome da folha de estilo também é muito solteiro, e o submenu é o estilo "sub_menu", que é muito propício às chamadas de loop de código do programa.
2. Estilo CSS
O código do estilo CSS também é muito simples, o código específico é o seguinte:
A {Decoração de texto: Nenhum; } ul, li {estilo de lista: nenhum; margem: 0; preenchimento: 0; }/*Menu de definição*/. Menue li {Background:#111; Cor: #FFF; Altura: 30px; altura de linha: 30px; Posição: relativa; flutuar: esquerda; Margem-direita: 5px; Largura: 100px; Alinhamento de texto: centro; Font-Family: Arial, Helvetica, Sans-Serif; } .Mue li a {color: #fff; Size da fonte: 14px; exibição: bloco; }/* Estilo de menu suspenso*/ul.sub_menu {Posição: Absoluto; largura: 100px; Exibir: Nenhum; Z-Index: 999; } .Mue li ul.sub_menu li {background: Nenhum; Cor:#555; tamanho de fonte: 12px; fundo de borda: 1px #333 sólido; Posição: relativa; Largura: 100px; Altura: 30px; } .Mue li ul.sub_menu li.last {Border-Bottom: Nenhum; } /*JS adicionará esta classe à última li, remova o efeito do fundo da borda* /. Menue li ul.sub_menu li a {background:#222; Cor:#888; Exibição: bloco; altura: 30px; } .Mue li ul.sub_menu li a: mouse, .mue li ul.sub_menu li a.low {background:#f90; cor: #fff;}. Menue li.now, .muee li. Antecedentes: URL (Arrow.png) sem repetição à direita; Potding-Right: 15px;}/*A seta de navegação principal está abaixo*/. Menue li A.Hasmenu {Background: URL (Arrow.png) sem repetir à direita; Potding-Right: 15px; Posição de fundo: direita -30px;}/*A seta do menu suspenso está à direita*/. Menue li ul.sub_menu li a.hasmenu {background:#222 URL (Arrow.png) No-repetir TOPOL;}. sem repetir o topo direito;}. Cor: #ffff;}Aqui vou enfatizar apenas duas precauções:
1. A diferença entre absoluto e relativa na posição
Absoluto: posicionamento absoluto, o CSS é escrito como "posição: absoluto", e seu posicionamento é dividido em duas situações, como segue:
R. Se a parte superior, direita, inferior e esquerda não estiver definida, o padrão está no ponto original com base no "ponto original da área de conteúdo" do pai.
B. Existem casos em que são definidos os casos superior, direita, inferior e esquerda. Existem duas situações da seguinte maneira:
(1). O pai não tem atributo de posição e o canto superior esquerdo do navegador (ou seja, corpo) está posicionado como o "ponto de coordenada original". A posição é determinada pelos atributos superior, direita, inferior e esquerda.
(2). O pai tem um atributo de posição e o "ponto original de coordenadas" do pai é o ponto original.
Relativo: Posicionamento relativo, o CSS é escrito como "Posição: relativa", referindo -se ao "ponto original da área de conteúdo" do pai como o ponto original, e sem os pais, o "ponto original da área de conteúdo do corpo" como ponto original. A posição é determinada pelos atributos superior, direita, inferior e esquerda, e tem a função de "alongamento ou altura de ocupação".
As duas diferenças acima são muito importantes e são uma técnica muito comum. Você deve distingui -los. Perdi muito tempo no desenvolvimento e encontrei problemas. De fato, é causado por esses dois atributos.
2. Use a posição de fundo
Às vezes, para melhorar a velocidade do site e facilitar o gerenciamento de sites, geralmente colocamos algumas imagens pequenas comumente usadas em uma imagem grande. Quando o CSS precisa de pequenas imagens correspondentes, ele pode ser alcançado através desse método. Enquanto entendermos o que significa, é muito conveniente ligar. Este método explica que o ponto branco é a função de interceptação da imagem e os detalhes de uso são os seguintes:
gramática:
Posição de fundo: comprimento || comprimento
Posição de fundo: Posição || posição
Valor:
Comprimento: porcentagem | O valor do comprimento que consiste em números de ponto flutuante e identificadores de unidade.
Posição: topo | centro | inferior | Esquerda | centro | certo
ilustrar:
Define ou recupera o local da imagem de fundo do objeto. A propriedade de imagem de fundo deve ser especificada primeiro. Esse posicionamento de atributo não é afetado pelas configurações do atributo de patch do objeto (preenchimento). O valor padrão é: 0% 0%. Nesse momento, a imagem em segundo plano será posicionada no canto superior esquerdo da área de conteúdo, onde o objeto não inclui patches (preenchimento). Se apenas um valor for especificado, o valor será usado para as coordenadas horizontais. A ordenada será inadimplente para 50%. Se dois valores forem especificados, o segundo valor será usado para a ordenada. Se o valor estiver definido como o centro direito, pois à direita, pois o valor do eixo horizontal substituirá o valor central, a imagem de fundo será posicionada para a direita. Aqui estão algumas equações
Superior esquerdo, o topo esquerdo é equivalente a 0% 0%.
Top, superior central, o topo central é equivalente a 50% 0%.
Top direito, o canto superior direito é equivalente a 100% 0%.
esquerda, centro esquerdo, centro esquerdo é equivalente a 0% 50%.
Center, Center Center é equivalente a 50% 50%.
Direita, centro direita, centro à direita é equivalente a 100% 50%.
Destacado esquerdo, a parte inferior esquerda é equivalente a 0% 100%.
Inferior, inferior central, o fundo central é equivalente a 50% 100%.
inferior direito, o fundo direito é equivalente a 100% 100%
3. Código JS
Este menu é baseado no jQuery, então primeiro você deve apresentar a base do código jQuery e, em seguida, escreva o código JS a seguir para implementar o menu suspenso.
<script src = "js/jQuery.min.js"> </script> <cript> $ (document) .ready (function () {// Definir o destaque padrão para a navegação não tem nada a ver com este menu $ ("ul.mue. Removendo o último sublinhado $ (". if ($ (this) .find ("ul"). comprimento! = 0) {$ (this) .find ("a: primeiro"). addclass ("hasmenu")}}) // $ (". Menue li"). MENU.FIND ("UL.SUB_MENU: Primeiro"). Show (); submenu.css ({esquerda: "100px", top: "0px"}) $ (". $ (this) .find ("A: primeiro"). removeclass ("agora") $ (this) .find ("ul: primeiro"). hide ()});/*jQuery menu End*/}) </sCript>Através das etapas acima, um menu geral de vários níveis é realizado. O código acima é o acúmulo do meu desenvolvimento diário. Devido ao meu nível limitado, pode haver muitos erros. Espero que meus colegas critiquem e corrigem ou proporão códigos mais otimizados para minha referência. Obrigado.
O código de implementação acima do menu suspenso universal Infinitus é todo o conteúdo que compartilhei com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.