English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条（文字下面有横线）等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。
接下来将会一一介绍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: #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){
$(".nav-list li a[href^='"+href+"']").addClass("on");
}
$(".nav-list li a[href='index.html']
}
});
O ponto principal aqui está em como detectar a URL atual da página da web e o href correspondente no a标签, e mudar o estilo de acordo, aqui usamos o método window.location.href para obter o site atual da página da web, usar split() para cortar, o conteúdo final é o que queremos. Normalmente, não é necessário correspondência completa da URL, então aqui usamos o método substr() para correspondência dos primeiros caracteres. Adicionei a classe on no arquivo css, aumentando a classe=“on” no a标签, e completando a função com o método addClass() no js.]}
2、中文和英文切换的导航栏
Vamos primeiro olhar para o efeito visual:
Adoptei dois métodos para implementar, um usando css3, outra maneira é usar jQuery.
Primeiro, vamos falar sobre como usar 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 para longe. É importante notar 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() {
$(".nav-list li a").hover(function(){
$(this).stop().animate({"margin-top":-40},200)
},function(){
$(this).stop().animate({"margin-top":0},200)
});
});
O ponto focal 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 passe rapidamente, todos eles 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 barra de navegação com animação elástica
Adotei três métodos de implementação, o primeiro é css3, o segundo é jquery, o terceiro é implementado com jquery easing. O efeito gráfico é como follows:
Como os três layouts são os mesmos, diretamente anexa 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 em Blog</a> <a href="#">Meu Blog</a> </div> </li> <li> <a href="#">Mall</a> <div class="nav-down"> <a href="#">Mall de Software</a> <a href="#">C-Bits Mall</a> <a href="#">Recarga de C-Bits</a> </div> </li> <li> <a href="#">Baixar</a> <div class="nav-down"> <a href="#">Classificação de recursos</a> <a href="#">Meus recursos</a> </div> </li> </ul> </div>
Primeiro tipo: css3implementar
*{
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;
exibição: 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 então, quando o mouse passar, mostrar o menu oculto. A implementação específica do código está na parte vermelha acima, aqui não será explicado em detalhes, o código é muito simples.
Segundo tipo: 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;
exibição: 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).stop().slideDown()
},function(){
$(this).find(".nav-down).stop().slideUp()
});
});
Antes de explicar o método de implementação, também foi mencionado na parte de imitação da função de troca de tema do Baidu, aqui é usado o método slideDown() e slideUp(). Se quiser ajustar o tempo de transição, pode simplesmente inserir o tempo dentro dos parênteses.
Terceiro tipo: implementado com jquery.easing.
Os estilos css são os mesmos que os estilos implementados com jquery, então não adicionarei mais espaço para repeti-los.}}
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"})
});
});
Ao usar este método, lembre-se de importar o pacote jquery.easing.1.3.min.js (esta é a versão que uso, você pode baixar gratuitamente na internet). Aqui, vamos destacar a ideia: quando o mouse se move, o menu suspenso se move para baixo, e quando o mouse sai, o menu suspenso se move para cima, usando os métodos slideDown() e slideUp() mencionados anteriormente, a única diferença é que aqui foi adicionada uma animação, usando easing, que é semelhante ao formato json, inserindo duration e easing para que funcione. Se não entender o processo de implementação, consulte o documento de descrição relacionado, e você entenderá.
4、Animação de deslize de fricção do menu de navegação
A ideia é: quando o mouse se move, o local da barra horizontal é movido para baixo do texto atual. Portanto, é necessário obter a posição atual do mouse, ou seja, top e left, e alterar o top e left da barra horizontal para que funcione, conforme especificado abaixo.
html: (aqui está apenas o código de uma página)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Animação de deslize de fricção do menu de navegação</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"});
});
});
Vou explicar o efeito de várias métodos:
1）outerwidth() obtém a largura do elemento (devido ao número de caracteres diferente, a largura também é diferente, para que seja bonito, a barra horizontal precisa se adaptar à largura do texto);
2）position().left obtém o valor de left na posição do elemento;
3）animate(）realiza o efeito de animação;
4）duration e easing são conteúdos do plug-in easing do jQuery, ou seja, configurar o efeito da animação.
O que foi mencionado acima é o jQuery介绍的编辑+CSS3Explicação detalhada de quatro exemplos de navegação de barra com uso frequente, esperando ajudar a todos. Se você tiver alguma dúvida, por favor, deixe um comentário, o editor responderá a todos a tempo. Agradecemos muito o apoio ao site Tutorial de Grito!
Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário, foi submetido 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 por eventuais responsabilidades legais. 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. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)