English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

Efeitos de barra de navegação de todos os tipos de CSS3Implementação com código do jQuery

导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条（文字下面有横线）等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。　

接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，具有摩擦运动动画的导航条。　

1、高亮显示的导航条　

这种导航条：当你点击某一个导航时，就让他高亮显示，其他的默认原来的样式，也就是说在不改变菜单CSS代码的情况下，用Js控制菜单的背景，假如该菜单项被点击后，将赋予它一个与众不同的背景颜色或背景图像，这样可以清楚地指引用户下在浏览的网站栏目，简单方便而且效果好。　

效果图如下：

　

html:（这里省略了其他html文件的代码，只贴出一个index.html的代码）

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Home</title>
 <link href="../css/demo1.css" rel="stylesheet" type="text/css">
 <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8></script>
 <script src="../js/demo1.js" language="javascript" charset="utf-8></script>
</<head>
<body>
 <div class="nav">
 <ul class="nav-list">
  <li><a href="index.html">首页</a></li>
  <li><a href="bbs.html">论坛</a></li>
  <li><a href="blog.html">博客</a></li>
  <li><a href="mall.html">商城</a></li>
  <li><a href="download.html">下载</a></li>
 </ul>
 </div>
 <div class="content">首页</div>
</body>
</html>css：
 *{
 margin:0px;
 preenchimento:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
.nav{
 background-cor: #222;
 height: 40px;
 width:100%;
 margin-top:50px;
}
.nav-list{
 width: 1000px;
 margin: 0 auto;
}
.nav-list li{
 list-style: none;
 float: left;
}
.nav-list li a{
 color: #aaa;
 padding:0 40px;
 text-decoration: none;
 line-height: 40px;
 display: block;
 border: none;
}
.content{
 margin:20px auto;
 text-align: center;
}
.nav-list li a:hover{
 color: #fff;
 background: #504d4d;
}
<span style="color:#ff0000;">.nav-list li a.on{
 color: #fff;
 background: #504d4d;
}/span>jquery:
$(function() {
 var index = (window.location.href.split("/").length)-1;
 var href = window.location.href.split("/")[index].substr(0,4);
 if (href!=null){
 -list li a[href^='"+href+"]").addClass("on");
 }
 -list li a[href='index.html']
 }
});

O ponto crucial aqui está em como detectar a URL atual da página da web e o href correspondente do tag a, e mudar o estilo conforme necessário, aqui usamos o método window.location.href para obter o site atual da página da web, usamos split() para cortar, e o conteúdo final é o que queremos. Normalmente, não é necessário correspondência completa da URL, então usamos o método substr() para correspondência dos primeiros caracteres. Adicionei a classe on no arquivo css, aumentando a classe=“on” do tag a, e completando a função com o método addClass() do js. }}　

2、Navigation Bar Switching Between Chinese and English

Vamos olhar para o efeito visual:　

Eu usei dois métodos para implementar, um com css3, outra é com jQuery.　

Primeiro, vamos falar sobre a implementação com css3Como implementar:　

html：　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Home</title>
 <link rel="stylesheet" href="../css/demo2.css">
</<head>
<body>
 <div class="nav">
 <ul class="nav-list">
  <li>
  <a href="index.html">
   <b>index</b>
   <i>Home</i>
  </a>
  </li>
  <li>
  <a href="index.html">
   <b>bbs</b>
   <i>Forum</i>
  </a>
  </li>
  <li>
  <a href="index.html">
   <b>blog</b>
   <i>Blog</i>
  </a>
  </li>
  <li>
  <a href="index.html">
   <b>mall</b>
   <i>Loja</i>
  </a>
  </li>
  <li>
  <a href="index.html">
   <b>download</b>
   <i>Download</i>
  </a>
  </li>
 </ul>
 </div>
</body>
</html>

css:

*{
 margin:0px;
 preenchimento:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 background-cor: #222;
 margin-top:100px;
 overflow: hidden;
}
.nav-list{
 width:1000px;
 margin:0 auto;
 height: 40px;
}
.nav-list li {
 float: left;
}
.nav-list li a{
 display: block;
 transition: 0.2s;
}
.nav-list li b,.nav-list li i{
 cor:#aaa;
 line-height: 40px;
 display: block;
 padding:0 30px;
 text-align: center;
}
.nav-list li b{
 font-weight:normal;
}
.nav-list li i{
 font-style: normal;
 cor:#fff;
 background-cor: #333;
}
.nav-list li a:hover{
 margin-top:-40px;
}

A parte vermelha é a implementação deste processo, utilizando a mudança de posição, ao passar o mouse, mostra o chinês, ou seja, move o inglês, o que é digno de nota é que é necessário usar a propriedade overflow: hidden para ocultar. Se quiser que a velocidade seja mais lenta, pode usar a propriedade transition para ajustar o tempo de mudança, então pode diminuir a velocidade de mudança.　

A seguir, a implementação com jQuery:

css：　

*{
 margin:0px;
 preenchimento:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 background-cor: #222;
 margin-top:100px;
 overflow: hidden;
}
.nav-list{
 width:1000px;
 margin:0 auto;
 height: 40px;
}
.nav-list li {
 float: left;
}
.nav-list li a{
 display: block;
}
.nav-list li b,.nav-list li i{
 cor:#aaa;
 line-height: 40px;
 display: block;
 padding:0 30px;
 text-align: center;
}
.nav-list li b{
 font-weight:normal;
}
.nav-list li i{
 font-style: normal;
 cor:#fff;
 background-cor: #333;
}

jquery:

$(function() {
 -list li a").hover(function(){
 $(this).stop().animate({"margin-top":-40},200)
 },function(){
 $(this).stop().animate({"margin-top":0},200)
 });
});

O ponto crucial da implementação da função é a função animate(), através da configuração de margin-A implementação de top e tempo, para evitar que o passageiro passe rapidamente, todos os itens mudam (como mostrado na figura a seguir), é necessário adicionar a função stop() antes da função animate(), ou seja, parar todos os outros animações antes de começar essa animação.　

3e a barra de navegação com animação elástica　

Adotei três métodos para implementar, o primeiro é css3,A segunda opção é jQuery, e a terceira é jQuery easing.　

Como os três layouts são iguais, diretamente anexamos o código de estrutura html.　

html:

  <div class="nav">
  <ul class="nav-list">
   <li>
    <a href="#">Página Inicial</a>
   </li>
   <li>
    <a href="#">Fórum</a>
    <div class="nav-down">
     <a href="#">Fórum java</a>
     <a href="#">Fórum js</a>
     <a href="#">Fórum jQuery</a>
     <a href="#">css3Fórum</a>
    </div>
   </li>
   <li>
    <a href="#">Blog</a>
    <div class="nav-down">
     <a href="#">Postagens Excelentes</a>
     <a href="#">Coluna de Blog</a>
     <a href="#">Especialista de Blog</a>
     <a href="#">Meu Blog</a>
    </div>
   </li>
   <li>
    <a href="#">Loja</a>
    <div class="nav-down">
     <a href="#">Loja de Software</a>
     <a href="#">Loja de C-Bits</a>
     <a href="#">Recarga de C-Bits</a>
    </div>
   </li>
   <li>
    <a href="#">Download</a>
    <div class="nav-down">
     <a href="#">Classificação de Recursos</a>
     <a href="#">Meus Recursos</a>
    </div>
   </li>
  </ul>
 </div>

Primeira opção:css3Implementação

 *{
 margin:0px;
 preenchimento:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 margin-top:50px;
 background-cor: #222;
}
.nav .nav-list{
 width: 1000px;
 height: 40px;
 margin:0 auto;
}
.nav .nav-list li{
 float: left;
 position: relative;
}
.nav .nav-list li > a{
 display: block;
 height: 40px;
 line-height: 40px;
 padding:0 30px;
 cor:#aaa;
 width:60px;
}
.nav .nav-list li:hover>a{
 cor:#fff;
 background-cor: #333;
}
<span style="cor:#ff0000;">.nav .nav-list li:hover .nav-down{
 display: block;
}/span>
.nav-down{
 width:150px;
 background-cor: #333;
 position: absolute;
 top:40px;
 left:0px;
 display: none;
}
.nav .nav-list .nav-down a{
 display: block;
 line-height: 30px;
 cor:#aaa;
 preenchimento-esquerda:30px;
}
<span style="cor:#ff0000;">.nav .nav-list .nav-down a:hover{
 cor:#fff;
 background-cor: #333;
}/span>

O método de implementação é muito simples, ou seja, inicialmente ocultar o menu suspenso e, quando o mouse passar por cima, mostrar o menu oculto. O código específico de implementação está na parte vermelha acima, aqui não será explicado em detalhes, o código é muito simples.

Segunda opção:Implementado com jQuery.
　css:　

*{
 margin:0px;
 preenchimento:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 margin-top:50px;
 background-cor: #222;
}
.nav .nav-list{
 width: 1000px;
 height: 40px;
 margin:0 auto;
}
.nav .nav-list li{
 float: left;
 position: relative;
}
.nav .nav-list li > a{
 display: block;
 height: 40px;
 line-height: 40px;
 padding:0 30px;
 cor:#aaa;
 width:60px;
}
.nav .nav-list li:hover>a{
 cor:#fff;
 background-cor: #333;
}
.nav-down{
 width:150px;
 background-cor: #333;
 position: absolute;
 top:40px;
 left:0px;
 display: none;
}
.nav .nav-list .nav-down a{
 display: block;
 line-height: 30px;
 cor:#aaa;
 preenchimento-esquerda:30px;
}
.nav .nav-list .nav-down a:hover{
 cor:#fff;
 background-cor: #333;
}

jquery: 

$(function() {
 $(".nav .nav-list li").hover(function(){
  $(this).find(".nav-down
 },function(){
  $(this).find(".nav-down
 });
});

Antes de explicar o método de implementação, também foi mencionado que, na parte de imitar a função de mudança de skin do Baidu, aqui é usado o método slideDown() e slideUp(). Se desejar ajustar o tempo de transição, basta inserir o tempo dentro dos parênteses.　

Third kind:Implemented by jQuery.easing.　

The CSS style is the same as the style implemented by jQuery, so there is no need to copy it again here.　

jquery:　

<pre name="code" class="javascript">$(function(){
 $(".nav .nav-list li").hover(function(){
  $(this).find(".nav-down").stop().slideDown({duration:500,easing:"easeOutBounce"})
 },function(){
  $(this).find(".nav-down").stop().slideUp({duration:500,easing:"easeOutBounce"})
 });
});

Remember to import the package jquery.easing when implementing this method.1.3.min.js（I use this version, everyone can download it from the Internet）. Here, let's focus on the idea: when the mouse moves, the elastic dropdown menu follows down, and when the mouse is moved away, the elastic dropdown menu slides up, which also uses the aforementioned slideDown() and slideUp() methods, the only difference is that animation is added here, that is, using easing to achieve, which is actually similar to the format of json, you can insert duration and easing method by inserting it, if you don't understand the implementation process inside, you can check the relevant documentation, and you will understand it.　

4、Motion Animation Follow Navigation Bar　

The implementation idea is: when the mouse moves, move the horizontal bar to the bottom of the current text. Therefore, it is necessary to obtain the current position where the mouse moves, that is, top and left, and then change the top and left of the horizontal bar accordingly to achieve this, the specific implementation is as follows.　

html:（Here is only the code of one page）　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Motion Animation Follow Navigation Bar</title>
 <link href="../css/demo7.css" rel="stylesheet">
 <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8></script>
 <script src="../js/jquery.easing.1.3.min.js" language="javascript" charset="utf-8></script>
 <script src="../js/demo7.js" language="javascript" charset="utf-8></script>
</<head>
<body>
 <div class="nav">
  <div class="nav-content">
   <ul class="nav-list">
    <li><a href="index.html">首页</a></li>
    <li><a href="bbs.html">论坛</a></li>
    <li><a href="blog.html">博客</a></li>
    <li><a href="mall.html">商城</a></li>
    <li><a href="download.html">下载</a></li>
   </ul>
   <div class="nav-line"></div>
  </div>
 </div>
</body>
</html>

css: 

*{
 margin:0px;
 padding: 0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height:40px;
 margin-top:50px;
 background-color: #f6f6f6;
}
.nav .nav-content{
 width:1000px;
 margin:0 auto;
 height: 40px;
 position: relative;
}
.nav .nav-list li{
 float: left;
}
.nav .nav-list li a{
 color:#333;
 height: 40px;
 line-height: 40px;
 display: block;
 padding:0 30px;
}
.nav .nav-line{
 height:3px;
 background: #35b558;
 width:100px;
 position: absolute;
 top:40px;
 left:0px;
}
.nav .nav-list li a:hover{
 color:#35b558;
}
.nav .nav-list li a.on{
 color:#35b558;
}

jquery: 

$(function () {
 var index = window.location.href.split("/").length-1;
 var href = window.location.href.split("/"][index];
 $(".nav .nav-list li a[href='"+href+"]").addClass("on");
 var li_width = $(".nav .nav-list li a.on").outerWidth();
 var li_left = $(".nav .nav-list li a.on").position().left;
 --line").css({width:li_width,left:li_left});
 $(".nav .nav-list li").hover(function(){
  var li_width = $(this).outerWidth();
  var li_left = $(this).position().left;
  --line\1500, easing: "easeOutElastic"});
 },function(){
  --line\1500, easing: "easeOutElastic"});
 });
});

Vou explicar o efeito de várias funções:

1）outerwidth() obtém a largura do elemento (devido ao número de caracteres variável, a largura também é diferente. Para um aspecto bonito, a barra horizontal precisa se adaptar à largura do texto);　

2）position().left obtém o valor de left da posição do elemento;　

3）animate(）realiza o efeito de animação;　

4）duration e easing são conteúdos do plugin easing do jQuery, ou seja, configuram o efeito da animação.　

Aqui, todas as partilhas terminaram.

Isso é tudo o que há no artigo. Espero que ajude no seu aprendizado e que você apoie fortemente o tutorial Gargalhadas.

Declaração: O conteúdo deste artigo é proveniente da Internet, pertence ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Atingido, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)

Manual básico
Você também pode gostar