English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
导航栏的使用非常广泛，每个网站都会设计出具有自己特色的导航栏。最近特意了解了各种类型的导航栏，例如具有高亮显示的导航栏，中英文切换的导航栏，具有弹性动画的导航栏，甚至是具有摩擦运动动画的导航栏（文字下方有横线）等。每种导航栏都有其特色，例如高亮显示的导航栏看起来比较简单，但视觉效果还不错，具有动画效果的导航栏在视觉上也有很好的效果。
接下来将逐一介绍4此类应用较为广泛的导航栏，即：高亮显示的导航栏，中英文切换的导航栏，具有弹性动画的导航栏，具有摩擦运动动画的导航栏。
1、高亮显示的导航栏
此类导航栏：当点击某个导航项时，它会高亮显示，而其他导航项则保持默认样式。也就是说，在不修改菜单CSS代码的情况下，使用JavaScript控制菜单的背景。如果该菜单项被点击，它将获得一个独特的背景颜色或背景图像，这样可以清楚地指引用户浏览网站栏目，简单方便且效果良好。
效果图如下：
html:（这里省略了其他html文件的代码，只贴出一个index.html的代码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Startseite</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){
$(".nav-list li a[href^='"+href+"']").addClass("on");
}
$(".nav-list li a[href='index.html']).addClass("on");
}
});
Der Hauptpunkt liegt darin, wie man die aktuelle Webseiten-URL und das href des a-Tags detektiert und entsprechend das Styling ändert. Hier wurde die Methode window.location.href verwendet, um die aktuelle Website der Webseite zu erhalten, durch split() zerteilt, und das letzte Teil ist das, was wir wollen. Unter normalen Umständen ist es nicht erforderlich, die gesamte URL vollständig zu passen, daher wurde die Methode substr() verwendet, um die ersten paar Buchstaben zu passen. Ich habe im css-Datei die Klasse on hinzugefügt und die Klasse "on" dem a-Tag hinzugefügt, und die Funktion addClass() im js hat die Funktion erfüllt.
2、Navigationsleiste für chinesisch-englische Umstellung
Zunächst einmal das Screenshot:
Ich habe zwei Methoden verwendet, eine mit css3, eine andere Methode ist die Verwendung von jQuery.
Zunächst einmal über die Verwendung von css3Wie kann man es umsetzen:
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Startseite</title> <link rel="stylesheet" href="../css/demo2.css"> </head> <body> <div class="nav"> <ul class="nav-list"> <li> <a href="index.html"> <b>Start</b> <i>Startseite</i> </a> </li> <li> <a href="index.html"> <b>Foren</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>Shops</b> <i>Shop</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;
}
Der rote Teil ist die Implementierung dieses Prozesses, durch die Änderung der Positionen, wenn der Mauszeiger darauf bewegt wird, wird Chinesisch angezeigt, d.h. das Englische wird entfernt. Es ist zu beachten, dass das Attribut overflow: hidden verwendet werden muss, um es zu verbergen. Wenn eine langsamerer Geschwindigkeit gewünscht wird, kann die Geschwindigkeit der Änderung durch die Einstellung des Attributes transition verlangsamt werden.
Dann wird mit jQuery implementiert:
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)
});
});
Der Schwerpunkt der Implementierung der Funktion ist die Implementierung der Funktion animate(), durch die Einstellung des Margins-Um die schnelle Durchquerung zu verhindern, ändern sich alle (wie im folgenden Bild gezeigt), daher muss vor der Funktion animate() die Funktion stop() hinzugefügt werden, d.h. alle anderen Animationen müssen vor dieser Animation gestoppt werden.
3、 mit elastischer Animation versehene Navigationsleiste
Ich habe drei Methoden verwendet, erster ist css3,Zweiter ist jquery, Dritter ist durch jquery easing umgesetzt. Das Ergebnis der Darstellung ist wie folgt:
Da die Layouts der drei Arten gleich sind, wird hier der HTML-Strukturcode direkt beigelegt.
html:
<div class="nav"> <ul class="nav-list"> <li> <a href="#">Startseite</a> </li> <li> <a href="#">Forum</a> <div class="nav-down"> <a href="#">java-Forum</a> <a href="#">js-Forum</a> <a href="#">jquery-Forum</a> <a href="#">css3Forum</a> </div> </li> <li> <a href="#">Blog</a> <div class="nav-down"> <a href="#">Schöne Artikel</a> <a href="#">Blog-Spalte</a> <a href="#">Blog-Experte</a> <a href="#">Mein Blog</a> </div> </li> <li> <a href="#">Geschäft</a> <div class="nav-down"> <a href="#">Softwaregeschäft</a> <a href="#">C-Währungsgeschäft</a> <a href="#">C-Währung aufladen</a> </div> </li> <li> <a href="#">Herunterladen</a> <div class="nav-down"> <a href="#">Ressourcencategorisierung</a> <a href="#">Meine Ressourcen</a> </div> </li> </ul> </div>
Erster Typ: css3Implementierung
*{
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>
Die Methode zur Implementierung ist sehr einfach. Es wird am Anfang das Dropdown-Menü versteckt und dann wird das versteckte Menü angezeigt, wenn der Mauszeiger darüber bewegt wird. Der spezifische Implementierungscode ist im roten Teil erwähnt, hier wird nicht im Detail erläutert, der Code ist einfach.
Zweiter Typ: Durch Verwendung von jquery umgesetzt.
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
});
});
Die Methode zur Implementierung wurde bereits erwähnt. Bei der Nachahmung der Funktion von Baidus Skin-Wechsel hier wird die Methode slideDown() und slideUp() verwendet. Wenn Sie die Änderungszeit einstellen möchten, geben Sie einfach die Zeit in Klammern ein.
Dritter Typ: Durch Verwendung von jquery.easing umgesetzt.
The CSS style is the same as the style implemented by jQuery, so there is no need to duplicate it again.
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"})
});
});
Remember to import the package jquery.easing. when implementing this method1.3.min.js (I use this version, everyone can download it from the Internet). Here, the focus is on the idea: when the mouse moves, the elastic dropdown menu follows the slide down, and when the mouse is moved away, the elastic dropdown menu slides up, which also uses the aforementioned slideDown() and slideUp() methods, the only difference is that animation is added here, that is, using easing to achieve this, which is actually similar to the format of json, you can insert duration and easing method by inserting it, if you do not understand the implementation process inside, you can check the relevant documentation, and you will understand it.
4、Animation of friction motion navigation bar following
The implementation idea is: when the mouse moves, move the horizontal bar to the position below the current text. Therefore, it is necessary to obtain the current position where the mouse is moved, that is, top and left, and then change the top and left of the horizontal bar accordingly to achieve this, the specific implementation is as follows.
html: (Here is only the code of one page)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Animation of friction motion navigation bar following</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"});
});
});
Hier werden die Funktionen einiger Methoden besprochen:
1outerwidth() um die Breite des Elements zu erhalten (da die Anzahl der Zeichen unterschiedlich ist, ist die Breite unterschiedlich. Um schön auszusehen, muss die Leiste der Breite des Textes angepasst werden);
2position().left, um den Wert von left im Position der Elemente zu erhalten;
3animate() um Animationseffekte zu erreichen;
4duration und easing sind Inhalte des jQuery easing Plugins, d.h. die Einstellung der Animationseffekte.
Das oben Gesagte ist die von mir vorgestellte jQuery+CSS3Diese vier häufig verwendeten Navigationsleisten-Beispielanleitungen werden hier detailliert erläutert, hoffentlich helfen sie Ihnen weiter. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht, der Herausgeber wird umgehend antworten. Ich danke auch sehr für die Unterstützung der Website "Rufen Sie die Anleitung aus"!
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Diese Website übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit Urheberrechtsverletzungen finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine Beschwerde einreichen, und fügen Sie relevante Beweise bei. Sobald die Beanstandung bestätigt wird, wird diese Website den beschuldigten Inhalt sofort löschen.)