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

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

Diversos efectos de barra de navegación CSS3Implementación con código de jquery

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

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

1、高亮显示的导航条　

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

效果图如下：

　

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

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Página principal</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;
 padding:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
.nav{
 background-color: #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){
 $(".nav-list li a[href^='"+href+"]").addClass("on");
 }
 $(".nav-list li a[href='index.html']
 }
});

Entre los puntos clave se encuentra cómo detectar la dirección URL actual de la página web y el href del etiqueta a, luego cambiar el estilo en consecuencia. Aquí se utiliza el método window.location.href para obtener el sitio web actual de la página web, se corta con split(), y el contenido final es el que queremos. En condiciones normales, no es necesario que coincida completamente con la dirección URL completa, por lo que aquí se utiliza el método substr() para coincidir con las primeras letras. Añadí la clase on en el archivo css, aumentando la clase del etiqueta a a class=“on”, y completando la función mediante el método addClass() en js.　

2、导航栏中英文切换

Veamos primero el efecto gráfico:　

He utilizado dos métodos para implementar, uno con css3, otra es utilizar jQuery para implementar.　

Primero hablemos de cómo se realiza con css3¿Cómo se realiza?:　

html：　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Página principal</title>
 <link rel="stylesheet" href="../css/demo2.css">
</<head>
<body>
 <div class="nav">
 <ul class="nav-list">
  <li>
  <a href="index.html">
   <b>Página principal</b>
   <i>Página principal</i>
  </a>
  </li>
  <li>
  <a href="index.html">
   <b>Foro</b>
   <i>Foro</i>
  </a>
  </li>
  <li>
  <a href="index.html">
   <b>Blog</b>
   <i>Blog</i>
  </a>
  </li>
  <li>
  <a href="index.html">
   <b>Tienda</b>
   <i>Tienda</i>
  </a>
  </li>
  <li>
  <a href="index.html">
   <b>Descargar</b>
   <i>Descargar</i>
  </a>
  </li>
 </ul>
 </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;
 background-color: #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{
 color:#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;
 color:#fff;
 background-color: #333;
}
.nav-list li a:hover{
 margin-top:-40px;
}

La parte roja es la implementación de este proceso, utilizando el cambio de posición, cuando el ratón se mueve sobre él, se muestra el chino, es decir, se desplaza el inglés, lo que es digno de mencionar es que se debe utilizar la propiedad overflow: hidden para ocultarlo. Si desea que sea más lento, puede utilizar la propiedad transition para configurar el tiempo de cambio, lo que puede ralentizar la velocidad de cambio.　

Luego se utiliza jQuery para implementar:

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;
 background-color: #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{
 color:#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;
 color:#fff;
 background-color: #333;
}

jquery:

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

El punto clave de la implementación de la función es animate(), a través de la configuración de margin-La implementación de top y tiempo realiza, para evitar que se pase rápidamente, todos cambiarán (como se muestra en la imagen siguiente), es necesario agregar la función stop() antes de animate(), es decir, detener primero otras animaciones antes de comenzar esta animación.　

3y la barra de navegación con animación de elasticidad.　

He utilizado tres métodos para implementar, el primero es css3,La segunda opción es jquery, y la tercera es jquery easing. El efecto gráfico se muestra a continuación:　

Dado que los tres diseños son los mismos, se adjunta directamente el código de estructura html.　

html:

  <div class="nav">
  <ul class="nav-list">
   <li>
    <a href="#">Página principal</a>
   </li>
   <li>
    <a href="#">Foro</a>
    <div class="nav-down">
     <a href="#">Foro de java</a>
     <a href="#">Foro de js</a>
     <a href="#">Foro de jquery</a>
     <a href="#">css3Foro</a>
    </div>
   </li>
   <li>
    <a href="#">Blog</a>
    <div class="nav-down">
     <a href="#">Postes interesantes</a>
     <a href="#">Columna de blog</a>
     <a href="#">Experto en blog</a>
     <a href="#">Mi blog</a>
    </div>
   </li>
   <li>
    <a href="#">Tienda</a>
    <div class="nav-down">
     <a href="#">Tienda de software</a>
     <a href="#">Tienda de C币</a>
     <a href="#">Recarga de C币</a>
    </div>
   </li>
   <li>
    <a href="#">Descargar</a>
    <div class="nav-down">
     <a href="#">Categoría de recursos</a>
     <a href="#">Mis recursos</a>
    </div>
   </li>
  </ul>
 </div>

Primera opción:css3Implementación

 *{
 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: #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;
 color:#aaa;
 width:60px;
}
.nav .nav-list li:hover>a{
 color:#fff;
 background-color: #333;
}
<span style="color:#ff0000;">.nav .nav-list li:hover .nav-down{
 display: block;
}/span>
.nav-down{
 width:150px;
 background-color: #333;
 position: absolute;
 top:40px;
 left:0px;
 display: none;
}
.nav .nav-list .nav-down a{
 display: block;
 line-height: 30px;
 color:#aaa;
 padding-left:30px;
}
<span style="color:#ff0000;">.nav .nav-list .nav-down a:hover{
 color:#fff;
 background-color: #333;
}/span>

El método de implementación es muy simple, es decir, al principio hacer que el menú desplegable se oculte, y luego cuando el ratón pasa por encima, mostrar el menú oculto. El código de implementación específico está en la parte roja superior, aquí no se explicará en detalle, el código es muy simple.

Segunda opción:Implementado con jquery.
　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: #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;
 color:#aaa;
 width:60px;
}
.nav .nav-list li:hover>a{
 color:#fff;
 background-color: #333;
}
.nav-down{
 width:150px;
 background-color: #333;
 position: absolute;
 top:40px;
 left:0px;
 display: none;
}
.nav .nav-list .nav-down a{
 display: block;
 line-height: 30px;
 color:#aaa;
 padding-left:30px;
}
.nav .nav-list .nav-down a:hover{
 color:#fff;
 background-color: #333;
}

jquery: 

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

Antes de explicar el método de implementación, también se ha mencionado que en la parte de imitar la función de cambio de skin de Baidu, aquí se utiliza el método slideDown() y slideUp(). Si desea establecer el tiempo de cambio, simplemente ingrese el tiempo en los corchetes.　

Tercera opción: }}Implementado con jquery.easing.　

Los estilos de css son los mismos que los implementados con jquery, aquí no se duplicarán más.　

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"})
 });
});

Al implementar este método, recuerda importar el paquete jquery.easing.1.3.min.js（uso esta versión，todos pueden descargarla por su cuenta en línea）。Aquí quiero destacar la idea: cuando el ratón se mueve, el menú desplegable elástico se deslizará hacia abajo, y cuando el ratón se mueva, el menú desplegable elástico se deslizará hacia arriba, también se utiliza el método mencionado anteriormente slideDown() y slideUp(), la única diferencia aquí es que se ha agregado una animación, es decir, se utiliza easing, que es similar al formato json, se puede insertar duration y easing, si no entiendes el proceso de implementación, puedes buscar la documentación relevante para ver, y luego entenderás.　

4、Animación de deslizamiento de barra de navegación de fricción　

La idea es: cuando el ratón se mueve, mover la posición horizontal debajo del texto actual. Por lo tanto, es necesario obtener la posición actual del ratón, es decir, top y left, y luego cambiar el top y left de la barra horizontal respectivamente para lograrlo, la implementación específica es como sigue.　

html:（ aquí solo se muestra el código de una página ）　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Animación de deslizamiento de barra de navegación de fricción</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;
 $(".nav-content .nav-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;
  $(".nav-content .nav-line ").stop().animate({"width":li_width,"left":li_left},{duration:1500, easing: "easeOutElastic"});
 },function(){
  $(".nav-content .nav-line ").stop().animate({"width":li_width,"left":li_left},{duration:1500, easing: "easeOutElastic"});
 });
});

Hablemos de los efectos de varios métodos:

1）outerwidth() obtener el ancho del elemento (debido a que el número de caracteres es diferente, el ancho es diferente, para que se vea bien, la barra horizontal necesita adaptarse al ancho del texto);　

2）position().left obtener el valor de left en la posición del elemento;　

3）animate(）realizar efectos de animación;　

4）duration y easing son contenido del plugin easing de jquery, es decir, configurar el efecto de la animación.　

Aquí, todas las comparticiones han terminado.

Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos los demás lo apoyen en el tutorial de grito.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado manualmente y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @ para denunciar y proporcionar evidencia. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.)

Tutoriales básicos
Te gustará