English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La barra de navegación se utiliza ampliamente, cada sitio web crea una barra de navegación con su propio estilo. Recientemente, he investigado varios tipos de barras de navegación, como la barra de navegación resaltada, la barra de navegación que cambia entre chino e inglés, la barra de navegación con animación elástica, incluso la barra de navegación con animación de fricción (con una línea debajo del texto). Cada tipo de barra de navegación tiene sus propias características, por ejemplo, la barra de navegación resaltada parece bastante simple, pero tiene un buen efecto visual. La barra de navegación con animación también tiene un buen efecto visual.
A continuación, se presentará uno por uno4Este tipo de barra de navegación es muy utilizado, es decir, la barra de navegación resaltada, la barra de navegación que cambia entre chino e inglés, la barra de navegación con animación elástica, la barra de navegación con animación de fricción.
1、resaltada en la barra de navegación
Este tipo de barra de navegación: cuando hace clic en un elemento de navegación, se le muestra en color resaltado, los demás se mantienen en su estilo original, es decir, sin cambiar el código CSS del menú, se usa Js para controlar el fondo del menú. Si el elemento del menú se hace clic, se le otorga un color de fondo o una imagen de fondo diferente, lo que permite identificar claramente el área de navegación que el usuario está viendo en el sitio web. Es simple, conveniente y efectivo.
La imagen de efecto es como sigue：
html:（ aquí se omiten otros códigos de archivos html, solo se muestra el código de index.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Página de inicio</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: #504d;4d;
}
<span style="color:#ff0000;">.nav-list li a.on{
color: #fff;
background: #504d;4d;
}/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']
}
});
Entre los puntos clave se encuentra cómo detectar la dirección URL actual de la página web y la correspondencia de href en los etiquetas 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 utiliza split() para cortar, y el contenido de la última parte es lo 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, añadiendo class=“on” a las etiquetas a, y se completó la función mediante el método addClass() en js.
2, barra de navegación de cambio de chino e inglés
Veamos primero el gráfico:
He utilizado dos métodos para implementar, uno con css3, otra es implementarla con jQuery.
Primero hablemos de cómo se realiza con css3¿Cómo implementarlo?:
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Página de inicio</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 de inicio</b> <i>Página de inicio</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 desplaza sobre él, se muestra chino, es decir, se desplaza el inglés, lo que es importante destacar es que se necesita 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() {
-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, para evitar que se pase rápidamente, todos cambiarán (como se muestra en la imagen siguiente), se necesita agregar la función stop() antes de animate(), es decir, detener primero otras animaciones antes de comenzar esta animación.
3、navegación con animación de elasticidad
He implementado de tres formas, la primera es css3, la segunda es jquery, la tercera es implementada con jquery easing. La imagen de efecto es como sigue:
Dado que los diseños de los tres son iguales, 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="#">Artículos destacados</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="#">Descarga</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, ocultar el menú desplegable al principio, luego mostrar el menú oculto cuando el ratón pasa por encima. La implementación específica del código como se muestra en la parte roja del código anterior, aquí no se explicará en detalle, el código es muy simple.
Segunda opción: usando 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
},function(){
$(this).find(".nav-down
});
});
Antes también se ha mencionado el método de implementación, 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 configurar 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 estilos implementados con jquery, por lo que no se añade espacio para volver a copiarlos.}}
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 usar este método, recuerda importar el paquete jquery.easing.1.3.min.js (estoy usando esta versión, todos pueden descargarla por su cuenta). 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 desplaza, 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 de manera que, si no entiendes el proceso de implementación, puedes buscar la documentación relevante y verás.
4、Animación de deslizamiento de barra de navegación por fricción
La idea es: cuando el ratón se mueve, se mueve la barra horizontal debajo del texto actual. Por lo tanto, se necesita 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 por 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;
--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"});
});
});
Se describe el propósito de varios métodos:
1）outerwidth() obtener el ancho del elemento (debido a que el número de caracteres es diferente, el ancho también 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 el contenido del plugin easing de jquery, es decir, configurar el efecto de animación.
Lo que se ha mencionado anteriormente es el que el editor les ha presentado jQuery+CSS3Se detallan cuatro ejemplos de navegación de uso común, esperando que sean útiles para todos. Si tienen alguna pregunta, déjenme un mensaje y editaré a tiempo. ¡Gracias también por el apoyo a la página web de tutorial de grito!
Declaración: El contenido de este artículo se ha obtenido de la red, y los derechos de autor pertenecen al propietario original. El contenido se ha subido por los usuarios de Internet de manera autónoma y no ha sido editado por humanos. Este sitio no posee los derechos de propiedad y no asume responsabilidad alguna por las responsabilidades legales. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.