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. Os objetivos ideais que este menu de navegação deseja alcançar são: Linda, com personalidade. A estrutura é clara, a semântica é clara e não há tags redundantes. Desempenho, estrutura e comportamento são separados em três níveis, sem qualquer intrusão. Propício à saída de dados de programas em segundo plano. O menu tem alterações de efeito de três estados. Pode destacar e registrar os itens de menu clicados. Largura de texto adaptável. Quando o conteúdo do texto muda de comprimento, o botão pode mudar com o tempo. Compatível com todos os principais navegadores. Vamos implementar este menu ideal passo a passo! Estrutura Na minha opinião, o menu padrão ideal deveria ter a seguinte estrutura: <div id="nav"> A estrutura original do menu está agora disponível. Você pode ver que não há rótulos sem sentido nele. Cada rótulo 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 Ok, agora é só um esqueleto, vamos embelezar um pouco, adicionar alguns estilos simples, pelo menos remover os pontinhos e arrumá-lo horizontalmente! Ok, vamos adicionar um pouco de estilo! *{margin:0;padding:0;}/*Unifique-o em uma única aparência, caso contrário, ficará feio em vários navegadores*/ Bem, olhe agora, alcançamos nosso pequeno objetivo. Com o código-fonte do botão projetado, é ótimo salvar a parte do design. Mas para torná-lo um botão de três estados, precisamos modificá-lo. Você viu o sétimo objetivo? Estamos fazendo 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. 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" 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. Os gráficos necessários estão 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, consigo ter ideias tão boas e sou tão complacente comigo mesmo... Não se preocupe, oh meu Deus, se eu instalar imagens como esta, como posso alcançar os 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 querido evitar que isso acontecesse, parece que para atender aos requisitos, este rótulo deve ser adicionado.) <li><a href="#none" title="Bingjifeng"><span>Bingjifeng</span></a></li> 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. Pronto, nossos preparativos estão quase prontos, é hora de dar uma nova roupagem ao cardápio. Se quisermos fazer um menu de 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 criar 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 do 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: os elementos do rótulo são organizados automaticamente 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. 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 o HACK também é uma forma de alívio com a qual temos que lidar. Felizmente, alguns especialistas já encontraram uma solução. Por favor, leia estes dois artigos primeiro. Tutoriais relacionados: Todos entendemos o princípio e 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. li a{display:inline-block;padding-right:30px;padding-top:10px; /button.gif) sem repetição à direita -36px; text-decoration:none; font-size:12px; cor:#fff;} Primeiro definimos display:inline-block e depois usamos padding para expandir suas margens para que haja uma certa quantidade de 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. li um intervalo{display:inline-block;padding-left:30px; padding-top:10px; ; background:url(images/button.gif) sem repetição no topo esquerdo; A imagem do lado esquerdo do botão é colocada no elemento SPAN, alinhe sua imagem à esquerda e defina o preenchimento para expandir sua largura e altura. li a,li a span{display:inline;cursorointer;} Em seguida, coloque-os de volta no modo inline, acionando o recurso haslayout do IE. li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;} O próximo é o efeito após o clique do mouse. li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;} ok, parece que você terminou. Se você olhar em diferentes navegadores, parece que você pode obter resultados satisfatórios. Agora a versão CSS pura do menu da porta deslizante está basicamente pronta.
Muitas vezes vejo muitos amigos criando menus em fóruns, mas, para ser sincero, ou eles são estruturalmente redundantes, ou têm forma, mas não têm espírito, ou têm espírito, mas não têm 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.
<ul id="menu">
<li><a href="#none" title="Blog Garden">Blog Garden</a></li>
<li><a href="#none" title="Community">Comunidade</a></li>
<li><a href="#none" title="Home">Página inicial</a></li>
<li><a href="#none" title="Nova redação">Nova redação</a></li>
<li><a href="#none" title="Contact">Contato</a></li>
<li><a href="#none" title="Gerenciamento">Gerenciamento</a></li>
<li><a href="#none" title="Subscribe">Inscrever-se</a></li>
<li><a href="#none" title="Pico Bingji">Pico Bingji</a></li>
</ul>
</div>
ul{list-style:none}/*Remova os pontos*/
li{float:left;margin-left:10px;}/*Organize-o horizontalmente e use algum espaçamento. */
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 para serem encontradas. Talvez alguém já tenha feito algo de bom. Eu apenas pesquisei no Google e encontrei uma. (As lágrimas estão chegando...) Código fonte do botão: http://bbs.blueidea.com/thread-2860891-1-1.html
Extraímos especificamente a imagem sombreada e criamos uma pequena imagem de fundo.
Felizmente, embora uma tag extra seja adicionada, ela não é completamente semântica.
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.
"Dois exemplos de aplicação de display:inline-block" (Qin Ge)
"Atributo de bloco embutido para compatibilidade de simulação" (Yi Fei)
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.
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}