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

  1. Posizione attuale
  2. Pagina iniziale
  3. Appunti di esperienza
  4. Testo principale

各式各样的导航条效果css3结合jquery代码实现

La barra di navigazione è molto utilizzata, ogni sito crea una barra di navigazione con il proprio stile. Di recente, ho approfondito varie tipologie di barre di navigazione, come la barra di navigazione evidenziata, la barra di navigazione a scambio cinese-inglese, la barra di navigazione con animazione elastica, e persino la barra di navigazione con animazione di movimento di attrito (testo con trattino sotto). Ogni tipo di barra di navigazione ha le sue caratteristiche, come la barra di navigazione evidenziata che sembra semplice, ma ha un effetto visivo decente, e la barra di navigazione con animazione che ha un buon 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 a scambio cinese-inglese, la barra di navigazione con animazione elastica, e la barra di navigazione con animazione di movimento di attrito.　

1、Evidenziare la barra di navigazione　

Questo barra di navigazione: quando si clicca su uno dei navigatori, diventa evidenziato, mentre gli altri mantengono lo stile predefinito, ossia senza modificare il codice CSS del menu, utilizzare Js per controllare lo sfondo del menu. Se l'elemento del menu viene cliccato, gli viene assegnato un colore di sfondo o un'immagine di sfondo diverso, il che permette di indicare chiaramente all'utente la sezione del sito in cui si trova, in modo semplice e funzionale, con un effetto visivo gradevole.　

效果图如下：

　

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

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>home</title>
 
 <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script>
 
</head>
<body>
 <div class="nav">
 <ul class="nav-list">
  <li><a href="index.html">Home</a></li>
  <li><a href="bbs.html">Forum</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="mall.html">Negozio</a></li>
  <li><a href="download.html">Scarica</a></li>
 </ul>
 </div>
 
首页

</body>
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;
}
.nav-list li a.on{
 color: #fff;
 background: #504d4d;
}jquery:
$(function(){
 
 
 
 $(".nav-list li a[href^='
 }
 
 }
});

I principali punti di interesse sono come rilevare l'indirizzo del sito web corrente della pagina web e l'href corrispondente agli elementi a, quindi modificare il loro stile. In questo caso, è stato utilizzato il metodo window.location.href per ottenere il sito web corrente della pagina web, diviso con split(), e il contenuto dell'ultima parte è ciò che vogliamo. Di solito, non è necessario abbinare l'intero indirizzo del sito web, quindi in questo caso è stato utilizzato il metodo substr() per abbinare le prime lettere. Ho aggiunto la classe on nel file css, aggiungendo class=　

2、Chinese-English switch 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(), che viene implementata tramite la impostazione di margin-top e tempo, per prevenire che tutti i cambiamenti accadano rapidamente (come mostrato nell'immagine seguente), è necessario aggiungere la funzione stop() prima della funzione animate(), ossia fermare tutte le altre animazioni prima di 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, è sufficiente allegare 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 JavaScript</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 eccezionali</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:Implementazione 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;
}</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>

Il metodo di implementazione è molto semplice, è sufficiente nascondere il menu a discesa all'inizio e poi mostrare il menu nascosto quando il mouse passa sopra, come mostrato nel codice rosso sopra, senza spiegazioni dettagliate, il codice è molto semplice.

Secondo: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 slideDown() e slideUp(). Se si desidera impostare il tempo di transizione, è possibile inserire direttamente il tempo tra parentesi.　

Terza opzione:Implementato con jQuery.easing.　

Il CSS di stile è lo stesso di quello implementato con jQuery, quindi non è necessario ripetere la copia 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, ricordate di includere il pacchetto jquery.easing.1.3.min.js (io uso questa versione, tutti possono scaricarla 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 anche i metodi slideDown() e slideUp() menzionati in precedenza. L'unica differenza è che qui è stato aggiunto un'animazione, ovvero l'uso di easing, che è un formato simile a JSON. Basta inserire duration e il metodo di easing per farlo. Se non si capisce il processo di implementazione, si può consultare la documentazione relativa per capire meglio.　

4、Animazione di scorrimento della barra di navigazione di movimento di frizione　

L'idea di implementazione è: quando il mouse si muove, spostare la posizione della barra orizzontale sotto il testo corrente. Pertanto, è necessario ottenere la posizione corrente del mouse che si muove, ossia top e left, e cambiare corrispondentemente le proprietà top e left della barra per realizzare il funzionamento, come illustrato di seguito.　

html:（Qui viene riportato solo il codice di una pagina）　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Animazione di scorrimento dell'animazione del movimento di frizione della barra di navigazione</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">Home</a></li>
    <li><a href="bbs.html">Forum</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="mall.html">Negozio</a></li>
    <li><a href="download.html">Scarica</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"});
 });
});

Parliamo delle funzioni di alcuni metodi:

1) outerwidth() ottiene la larghezza dell'elemento (poiché il numero di caratteri è diverso, la larghezza non è la stessa, per renderla più attraente, la barra orizzontale deve adattarsi alla larghezza del testo);　

2) position().left ottiene il valore di left della 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.　

Ecco la fine delle condivisioni qui.

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial URL.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

教程基础
猜你喜欢