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;
marge:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
.nav{
background-couleur : #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']).addClass("on");
}
});
The main knowledge points are how to detect the current web page URL and the href corresponding to the a tag, and then change the style accordingly. Here, the method window.location.href is used to obtain the current website of the web page, and split() is used to cut it. The last part of the content is what we want. In normal circumstances, it is not necessary to match the entire URL completely, so the method substr() is used to match the first few letters. I added the on class in the css file, and then through the class=“on” added to the a tag, and the function addClass() in js completes the function.
2Navigation bar with Chinese and English switching
First, let's look at the effect diagram:
I have used two methods to implement it, one using css3, another way is to use jQuery.
First, let's talk about using css3How to implement:
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>Store</i> </a> </li> <li> <a href="index.html"> <b>download</b> <i>Download</i> </a> </li> </ul> </div> </body> </html>
css:
*{
margin:0px;
marge:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
background-couleur : #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{
couleur:#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;
couleur:#fff;
background-couleur : #333;
}
.nav-list li a:hover{
margin-top:-40px;
}
La partie rouge est la mise en œuvre de ce processus, utilisant les changements de position, lorsque le curseur est déplacé, le texte chinois est affiché, c'est-à-dire que le texte anglais est déplacé. Il est important de noter que l'attribut overflow: hidden doit être utilisé pour le cacher. Si vous souhaitez ralentir un peu, vous pouvez utiliser l'attribut transition pour définir le temps de changement, ce qui ralentit la vitesse de changement.
Ensuite, voici la mise en œuvre avec jQuery :
css：
*{
margin:0px;
marge:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
background-couleur : #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{
couleur:#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;
couleur:#fff;
background-couleur : #333;
}
jquery:
$ (function () {
$(".nav-list li a").hover(function(){
$(this).stop().animate({"margin-top":-40},200)
},function(){
$(this).stop().animate({"margin-top":0},200)
});
});
Le point clé de la mise en œuvre de la fonctionnalité est la mise en œuvre de la fonction animate(), en définissant la marge-Pour éviter de passer rapidement, tous les changements se produisent (comme indiqué dans l'image suivante), il est nécessaire d'ajouter la fonction stop() avant la fonction animate(), c'est-à-dire d'arrêter toutes les autres animations avant de commencer cette animation.
3、barre de navigation avec animation élastique
J'ai utilisé trois méthodes pour l'implémentation, la première étant css3, Deuxième est jquery, troisième est implémenté par jquery easing. L'effet visuel est le suivant :
Comme les trois types de mise en page sont les mêmes, je joins directement le code de structure html.
html:
<div class="nav"> <ul class="nav-list"> <li> <a href="#">Accueil</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="#">css3Forum</a> </div> </li> <li> <a href="#">Blog</a> <div class="nav-down"> <a href="#">Articles remarquables</a> <a href="#">Chronique du blog</a> <a href="#">Expert du blog</a> <a href="#">Mon blog</a> </div> </li> <li> <a href="#">Magasin</a> <div class="nav-down"> <a href="#">Magasin de logiciels</a> <a href="#">Magasin de C币</a> <a href="#">Rechargement de C币</a> </div> </li> <li> <a href="#">Télécharger</a> <div class="nav-down"> <a href="#">Catégorie de ressources</a> <a href="#">Mes ressources</a> </div> </li> </ul> </div>
Première méthode : css3implémentation
*{
margin:0px;
marge: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-couleur : #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;
couleur:#aaa;
width:60px;
}
.nav .nav-list li:hover>a{
couleur:#fff;
background-couleur : #333;
}
<span style="couleur:#ff0000;">.nav .nav-list li:hover .nav-down{
display: block;
}/span>
.nav-down{
width:150px;
background-couleur : #333;
position: absolute;
top:40px;
left:0px;
affichage: none;
}
.nav .nav-list .nav-down a{
display: block;
line-height: 30px;
couleur:#aaa;
marge-gauche:30px;
}
<span style="couleur:#ff0000;">.nav .nav-list .nav-down a:hover{
couleur:#fff;
background-couleur : #333;
}/span>
La méthode d'implémentation est très simple, c'est-à-dire que le menu déroulant est caché au début, puis il suffit de montrer le menu caché lorsque le curseur de la souris passe dessus, comme le code d'implémentation rouge ci-dessus, ce n'est pas détaillé ici, le code est très simple.
Deuxième méthode : utilisant jquery.
css:
*{
margin:0px;
marge: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-couleur : #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;
couleur:#aaa;
width:60px;
}
.nav .nav-list li:hover>a{
couleur:#fff;
background-couleur : #333;
}
.nav-down{
width:150px;
background-couleur : #333;
position: absolute;
top:40px;
left:0px;
affichage: none;
}
.nav .nav-list .nav-down a{
display: block;
line-height: 30px;
couleur:#aaa;
marge-gauche:30px;
}
.nav .nav-list .nav-down a:hover{
couleur:#fff;
background-couleur : #333;
}
jquery:
$ (function () {
$(".nav .nav-list li").hover(function(){
$(this).find(".nav-down
},function(){
$(this).find(".nav-down
});
});
Avant de parler de la méthode d'implémentation, cela a été mentionné précédemment dans la partie de copie de la fonction de changement de peau de Baidu, ici, nous utilisons les méthodes slideDown() et slideUp(). Si vous souhaitez régler le temps de transition, vous pouvez le faire directement en insérant le temps dans les parenthèses.
Troisième méthode : utilisant jquery.easing.
Les styles CSS sont les mêmes que ceux mis en œuvre avec jQuery, donc il n'est pas nécessaire de les recopier ici.
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"})
});
});
En utilisant cette méthode, n'oubliez pas d'importer le package jquery.easing.1.3.min.js (je l'utilise dans cette version, chacun peut le télécharger en ligne). Ici, nous allons parler en détail de l'idée : lorsque le curseur de la souris est déplacé, le menu déroulant élastique suit le déplacement, et lorsque le curseur de la souris est déplacé, le menu déroulant élastique monte, ce qui utilise également les méthodes mentionnées précédemment, c'est-à-dire slideDown() et slideUp(), la seule différence ici est qu'il a été ajouté une animation, c'est-à-dire en utilisant easing, qui est en quelque sorte un format similaire à json, vous pouvez insérer duration et easing en insérant duration et easing, si vous ne comprenez pas le processus de mise en œuvre, vous pouvez consulter les documents de description pertinents pour voir.
4、Animation de défilement de la barre de navigation
L'idée de mise en œuvre est la suivante : lorsque le curseur de la souris est déplacé, le positionnement horizontal est déplacé sous le texte actuel. Par conséquent, il est nécessaire de récupérer la position actuelle du curseur de la souris, c'est-à-dire top et left, puis de modifier le top et left de la barre horizontale de manière correspondante pour réaliser cela, comme spécifié ci-dessous.
html: (ci-dessous, seules les codes d'une page sont affichés)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Animation de défilement de la barre de navigation</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"});
});
});
Je vais parler de l'effet de plusieurs méthodes :
1）outerwidth() pour obtenir la largeur de l'élément (parce que le nombre de caractères est différent, la largeur est différente, pour que cela soit joli, la barre horizontale doit s'adapter à la largeur du texte);
2）position().left pour obtenir la valeur de left de la position de l'élément;
3）animate(）pour réaliser l'effet d'animation;
4）duration et easing sont tous deux des contenus du plugin easing jquery, c'est-à-dire définir l'effet de l'animation.
Ce que j'ai présenté à l'heure actuelle est jQuery, que j'ai présenté à l'éditeur.+CSS3Je vais vous expliquer en détail quatre exemples de navigation bars couramment utilisées, j'espère que cela vous aidera. Si vous avez des questions, n'hésitez pas à me laisser un message, l'éditeur répondra à temps. Je tiens également à remercier chaleureusement tous ceux qui soutiennent le site Web de l'enseignement de l'agonie !
Déclaration : Le contenu de cet article est tiré d'Internet, propriété de l'auteur original, le contenu est apporté par les utilisateurs d'Internet de manière volontaire et téléversé, ce site n'a pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (lorsque vous envoyez un e-mail, veuillez remplacer # par @ pour signaler des abus, et fournissez des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)