English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La barra di navigazione è molto utilizzata, ogni sito web crea una barra di navigazione con il proprio carattere. Recentemente, ho studiato vari tipi di barre di navigazione, come la barra di navigazione evidenziata, la barra di navigazione che cambia tra cinese e inglese, la barra di navigazione con animazioni elastiche, e persino la barra di navigazione con animazioni di scorrimento a sfere (tratteggio sotto il testo). Ogni tipo di barra di navigazione ha le sue caratteristiche, come la barra di navigazione evidenziata che sembra semplice, ma ha un buon effetto visivo, e la barra di navigazione con animazioni ha anche un ottimo effetto visivo.
In seguito, verranno presentati singolarmente i 4 tipi di barre di navigazione più diffusi, ovvero: la barra di navigazione evidenziata, la barra di navigazione che cambia tra cinese e inglese, la barra di navigazione con animazioni elastiche, e la barra di navigazione con animazioni di scorrimento a sfere.
1. Barra di navigazione evidenziata
Questo è il tipo di barra di navigazione: quando si clicca su un navigazione, diventa evidenziata, mentre gli altri mantengono lo stile predefinito, ovvero senza modificare il codice CSS del menu, si utilizza JavaScript per controllare lo sfondo del menu. Se l'elemento del menu viene cliccato, viene assegnato un colore di sfondo o un'immagine di sfondo diverso, il che rende chiaro all'utente la sezione del sito che sta navigando, è semplice, conveniente ed efficace.
Ecco l'effetto visivo:}}
html:（qui sono stati omessi altri codici html, è stato riportato solo il codice di 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;
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;
}
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");
}
}
});
Il punto principale è come rilevare l'indirizzo del sito web corrente della pagina web e l'href corrispondente agli elementi a, quindi modificare il estilo in modo appropriato. In questo caso, è stato utilizzato il metodo window.location.href per ottenere l'indirizzo del sito web corrente, diviso con split(), e l'ultimo contenuto è ciò che vogliamo. Di solito, non è necessario abbinare l'intero indirizzo del sito web, quindi qui è stato utilizzato il metodo substr() per abbinare i primi caratteri. Ho aggiunto la classe on nel file css, aggiungendo class=
2、switching between Chinese and English navigation bar
先来看一下效果图：
我采用了两种方式实现，一种用css3,另一种是用jquery实现。
首先说一下用css3如何实现：
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>mall</i> </a> </li> <li> <a href="index.html"> <b>download</b> <i>download</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;
}
红色部分就是这个过程的实现，利用位置的变化，当鼠标移上去的时候，显示中文，也就是将英文移开，值得注意的是，需要利用overflow:hidden属性，将其隐藏。如果想要速度慢一点的话，可以利用transition属性设置变化时间，就可以减慢变化速度。
接着是用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;
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)
});
});
Il punto chiave dell'implementazione della funzione è la funzione animate(), attraverso la impostazione di margin-top e tempo. Per prevenire che tutti i cambiamenti accadano rapidamente (come mostrato nell'immagine), è necessario aggiungere la funzione stop() prima della funzione animate(), ovvero fermare prima tutte le altre animazioni e poi iniziare questa animazione.
3, barra di navigazione con animazione elastica
Ho utilizzato tre metodi per implementare, il primo è CSS3, il secondo è jQuery, il terzo è jQuery easing. L'effetto visivo è come segue:
Poiché le tre布局 sono le stesse, è stato aggiunto direttamente il codice della struttura HTML.
html:
<div class="nav"> <ul class="nav-list"> <li> <a href="#">Pagina iniziale</a> </li> <li> <a href="#">Forum</a> <div class="nav-down"> <a href="#">Forum Java</a> <a href="#">Forum JS</a> <a href="#">Forum jQuery</a> <a href="#">Forum CSS3</a> </div> </li> <li> <a href="#">Blog</a> <div class="nav-down"> <a href="#">Articoli interessanti</a> <a href="#">Sezione del blog</a> <a href="#">Esperto di blog</a> <a href="#">Il mio blog</a> </div> </li> <li> <a href="#">Negozio</a> <div class="nav-down"> <a href="#">Negozio di software</a> <a href="#">Negozio C币</a> <a href="#">Ricarica C币</a> </div> </li> <li> <a href="#">Download</a> <div class="nav-down"> <a href="#">Categorie delle risorse</a> <a href="#">Le mie risorse</a> </div> </li> </ul> </div>
Primo: implementato con CSS3
*{
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;
}
.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;
}
Il metodo di implementazione è molto semplice, ovvero all'inizio nascondere il menu a discesa, quindi quando il mouse passa sopra, mostrare il menu nascosto. Il codice di implementazione specifico è come la parte rossa sopra, non verrà spiegato in dettaglio qui, il codice è molto semplice.
Secondo: implementato 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()
});
});
Il metodo di implementazione è stato spiegato in precedenza, nella parte di imitazione della funzione di cambio di skin di Baidu, qui viene utilizzato il metodo slideDown() e slideUp(). Se si desidera impostare il tempo di transizione, è sufficiente inserire il tempo tra parentesi.
Terza opzione: utilizzare jQuery.easing.
La stile CSS è lo stesso dello stile implementato con jQuery, quindi non ripeterò qui.
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"})
});
});
Quando si utilizza questo metodo, ricordati di importare il pacchetto jquery.easing.1.3.min.js (io uso questa versione, tutti possono scaricare autonomamente da internet). Ecco il punto chiave: quando il mouse si muove, il menu a discesa elastico segue il movimento, e quando il mouse si allontana, il menu a discesa elastico si solleva, utilizzando anch'esso i metodi slideDown() e slideUp() menzionati in precedenza. L'unica differenza è che qui è stata aggiunta un'animazione, utilizzando l'easing. Questo è proprio come il formato json, è sufficiente inserire duration e il metodo di easing. Se non capisci il processo di implementazione, puoi cercare la documentazione correlata e vedrai che è facile.
4、Animazione della barra di navigazione seguita dal movimento di attrito
Il metodo di realizzazione è: quando il mouse si muove, spostare la posizione della barra orizzontale sotto il testo corrente. Pertanto, è necessario ottenere la posizione corrente del mouse mobile, ossia top e left, e cambiare corrispondentemente la top e left della barra per realizzarlo. La realizzazione dettagliata è come segue.
html: (qui si inserisce solo il codice di una pagina)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animazione della barra di navigazione seguita dal movimento di attrito</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"});
});
});
Principali: l'azione di alcuni metodi:
1) outerwidth() ottiene la larghezza dell'elemento (poiché il numero di caratteri è diverso, la larghezza è diversa, per renderla più bella, la barra orizzontale deve adattarsi alla larghezza del testo);
2) position().left ottiene il valore di left nella posizione dell'elemento;
3) animate() realizza l'effetto animazione;
4) duration e easing sono contenuti dell'estensione easing di jQuery, ovvero impostare l'effetto dell'animazione.
Il seguito è un'analisi dettagliata di quattro esempi di navigazione di ampia applicazione realizzati con jQuery+CSS3, spero possa essere utile a tutti. Se avete qualsiasi domanda, lasciate un messaggio, il curatore risponderà prontamente. In questo momento, anche grazie per il supporto al sito Web di Anlao Tutorial!
Dichiarazione: il contenuto di questo articolo è stato preso dalla rete, i diritti d'autore sono degli autori, il contenuto è stato contribuito e caricato dagli utenti di Internet autonomamente, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale pertinente. Se trovi contenuti sospetti di copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare e fornire prove pertinenti. Una volta verificata, questo sito cancellerà immediatamente i contenuti sospetti di copyright.