Introdução: Este artigo irá ensiná-lo passo a passo como criar um menu de navegação de porta deslizante padrão separado em três camadas. A partir de ideias, princípios, etapas e métodos, pode-se dizer que "tudo é possível". você é, acredito que depois de ler este artigo, você também pode criar seu próprio menu de navegação padrão super bonito. Este menu não possui estrutura redundante e é propício à saída dinâmica de dados. É muito adequado para uso em projetos comuns. Este tutorial fala sobre os princípios básicos das portas de correr, acredito que será útil para aqueles amigos que ainda estão tateando nessa estrada! Claro, se houver algum erro ou problema, você poderá discuti-lo.
O objetivo ideal deste menu de navegação é
Vamos implementar este menu ideal passo a passo!
Costumo ver muitos amigos fazendo menus em fóruns, mas para ser sincero, ou a estrutura é redundante, ou tem forma, mas não tem espírito, ou tem espírito, mas não tem aparência. E o que queremos criar agora é o melhor cardápio. Seja você um novato ou um veterano, você encontrará algo útil neste tutorial.
A estrutura de um menu ideal deve ser limpa, livre de redundância e separada. Porém, por diversos motivos, muitas coisas sem sentido serão acrescentadas a ele e, no final, estará cada vez mais longe de ser “limpo”. . Portanto, antes de elaborar um cardápio, existem alguns princípios que devem ser levados em consideração durante todo o processo produtivo e não podem ser prejudicados por nenhuma força externa.
Estrutura:
Na minha impressão, o menu padrão ideal deveria ter a seguinte estrutura:
A estrutura original do menu está agora disponível. Você pode ver que não há tags sem sentido nele. Cada tag tem sua própria semântica. Vamos dar uma olhada no navegador. Ah, é muito simples. É apenas um texto original, tipo, é como o menu que usamos para pedir comida em um restaurante. Provavelmente é mais simples que isso, e há algo na frente de cada menu. .Um pontinho! Ai meu Deus, estamos tão longe do nosso lindo cardápio!
Estilo:
Bem, agora é apenas um esqueleto. Vamos embelezá-lo um pouco e adicionar alguns estilos simples. Pelo menos devemos remover os pequenos pontos e organizá-lo horizontalmente!
Ok, vamos adicionar um pouco de estilo!
Bem, veja bem, alcançamos nosso pequeno objetivo.
Agora que o esqueleto está no lugar, o próximo passo é colocar roupas lindas em cada item do cardápio.
Para atender ao primeiro requisito, primeiro você deve ter um botão lindo e desenhar um você mesmo. Ah, não sou artista, é difícil! No entanto, não seja tão impaciente. A Internet é tão vasta que há muitas maravilhas. Talvez alguém já tenha feito algo de bom. (As lágrimas estão chegando...) Código fonte do botão: http://bbs.blueidea.com/thread-2860891-1-1.html
Com o código fonte do botão projetado, ele salva a parte do design, o que é ótimo. Mas para torná-lo um botão de três estados, precisamos modificá-lo. Você viu o sétimo objetivo? Vamos fazer um botão adaptativo, então precisamos fazer alguns processamentos neste botão.
Mostramos esses três botões como três estados: quando o mouse é afastado, após clicar e quando o mouse é movido para cima. Para fazer um menu de porta deslizante, você precisa cortar um botão do meio. colocado à esquerda e a imagem à direita é Coloque-o no lado direito. Para se adaptar ao alongamento do texto, a largura desta camada precisa ser esticada um pouco. Porém, esta imagem tem um efeito de sombra muito complexo e não pode ser esticada casualmente, caso contrário o efeito não será o mesmo. Vamos cortá-lo ao meio e esticar o lado esquerdo da imagem para a frente. Conforme mostrado na Figura 2
Figura 1
Então, primeiro cortamos em seis pedaços, como mostrado na imagem, e depois mesclamos essas seis imagens. Por que isso acontece? Dê uma olhada no princípio dos sprites CSS! Não vou entrar em detalhes aqui. Você pode ler meu outro artigo "Fazendo uma Série de Cartas de Poker 1 --- Tecnologia de Otimização de Fundo de Imagem de Sprites CSS"
Figura 2
Na imagem acima, a primeira e a segunda imagens formam o estilo de menu normal (estilo padrão), a terceira e a quarta imagens formam o estilo de rolagem e a quinta e a sexta imagens formam o estilo do item de menu clicado.
Extraímos especificamente a imagem sombreada e a transformamos em uma pequena imagem de fundo.
Os gráficos exigidos na
Figura 3
estão todos prontos. A seguir, vamos adicionar esta imagem ao item de menu.Um botão requer que duas imagens sejam exibidas. Todo mundo sabe que uma tag HTML só pode conter uma imagem (se você descobrir que uma tag pode conter duas fotos, por favor, me avise a tempo e eu o convidarei para jantar!). oh! Cada item na minha estrutura de menu tem exatamente duas tags, uma é li e contém uma tag A, que pode ser usada para armazenar as imagens esquerda e direita. Li é usado para segurar a imagem à esquerda e A é usado para segurar a imagem à direita. Eu me admiro muito, posso ter ideias tão boas e sou uma auto-indulgência complacente ...
Não se preocupe, meu Deus, se eu instalar fotos dessa forma, como posso conseguir o três estados de rolagem do mouse? Todos nós deveríamos saber que, exceto o maldito IE6, outros navegadores atualmente suportam a pseudoclasse li:hover. Porém, para ser compatível com todos os principais navegadores (este é o nosso 8º objetivo, não se esqueça!), este método não funciona. O IE6 só pode aplicar a pseudoclasse hover na tag A e ignora outras tags!
Como o IE6 só pode aplicar a pseudoclasse hover na tag A, se quisermos fazer um menu de porta deslizante adaptável, precisamos fazer algumas mudanças estruturais. Parece que só podemos adicionar outra tag à tag A, então. a estrutura do menu Ficará assim. (Observação: é aqui que a estrutura começa a mudar. Embora eu sempre tenha desejado evitar que isso acontecesse, parece que essa tag deve ser adicionada para atender aos requisitos.)
Adicionamos um contêiner span à tag A, que inclui o conteúdo do texto. Agora existem duas etiquetas, que podem conter duas fotos. Colocamos a imagem da direita no fundo da tag A e alinhamos à direita, e colocamos a imagem da esquerda na tag SPAN e alinhamos à esquerda. Isso mostrará um formato de botão completo.
Felizmente, embora uma tag extra seja adicionada, ela não é completamente semântica.
Pronto, nossos preparativos estão quase prontos, é hora de dar uma nova roupagem ao cardápio.
Se quisermos fazer um menu com largura adaptável, não podemos definir o valor da largura do menu, portanto não podemos definir a largura e depois flutuá-lo para a esquerda como normalmente fazemos ao fazer um menu horizontal com largura fixa. Se for esse o caso, quando a largura de cada item de menu é diferente, você precisa definir a largura de cada item separadamente, então você deve definir um ID ou CLASSE para cada item de menu, e este método não conduz ao loop dinâmico saída do programa em segundo plano.
O que precisamos é organizar automaticamente cada item de menu em uma linha da esquerda para a direita como um elemento inline. Então precisamos que o menu seja exibido inline. OK, vamos usar display:inline. Este é um Atributo muito útil: sua disposição analisada. pode atender aos nossos requisitos básicos: organizar automaticamente os elementos do rótulo da esquerda para a direita em uma linha e a largura de cada item pode ser diferente.
Se o uso dos atributos acima puder realmente atender às nossas necessidades, não haverá conteúdo de texto como o seguinte.
Embora este atributo possa atender às necessidades básicas do nosso projeto, ele tem uma fraqueza muito fatal: ele não pode definir os valores de largura e altura. Se você não acredita, pode tentar. Ele aparece apenas como altura e largura padrão do texto. Ele será automaticamente ocultado após exceder esse valor de largura e altura. Desta forma, tenho aqui uma imagem de fundo. Para mostrar o efeito desta imagem, precisamos dar uma largura e uma altura. Isso significa que não podemos alcançar o nosso efeito, o que é frustrante! Felizmente, existe outro atributo: display:inline-block, seu desempenho é o que precisamos.
Mas... este atributo também tem uma fraqueza fatal, só pode ser reconhecido por navegadores avançados como o FF3. Outros navegadores só podem fazer um desvio. Uh-oh! Portanto, quão importante é unificar os padrões dos navegadores! Parece que HACK também é uma forma de alívio que não temos escolha a não ser fazer.
Felizmente, alguns especialistas já encontraram uma solução. Por favor, leia estes dois artigos primeiro.
Tutoriais relacionados:
" Dois exemplos de aplicação de display:inline-block " (Qin Ge)
Todos nós entendemos o princípio de
" Atributos de bloco embutido para simular compatibilidade " (Yi Fei).
Podemos fazer um menu adaptativo com base nas técnicas fornecidas nos dois artigos acima.Vamos primeiro escrever o estilo da imagem à direita, que é aplicado à tag A do nó filho do elemento li.
Primeiro definimos display:inline-block e depois usamos padding para expandir a distância dos lados para dê algum espaço para preencher a imagem. Observe que o caminho da imagem aqui é substituído pelo seu próprio caminho. Em seguida, defina outros estilos, como remoção de sublinhados, cor da fonte, tamanho da fonte, etc. Defina a imagem para ser alinhada à direita.
A imagem no lado esquerdo do botão é colocada no elemento SPAN. apoie-o. Abra sua largura e altura.
e depois colocá-los de volta no modo inline inline, acionando o recurso haslayout do IE.
No código acima, também vemos uma aplicação HACK, *padding-bottom: 0; e *padding-top: 0;, que são usados para resolver os diferentes efeitos de navegadores como IE e FF. Se você não acredita em mim, pode excluí-lo e ver o efeito que terá. Há um problema com a extensão de altura no IE.
Ok, agora é hora de escrever o efeito quando o mouse é movido.
O próximo é o efeito após o clique do mouse.
ok, parece que você terminou em diferentes navegadores. , parece que pode alcançar resultados satisfatórios. Abaixo está uma captura de tela:
Figura 4
A versão CSS pura do menu da porta deslizante está basicamente pronta.