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>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">Home</a></li>
<li><a href="bbs.html">Forum</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="mall.html">Shop</a></li>
<li><a href="download.html">Download</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;
}/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']
}
});
Der Hauptpunkt des Wissens darin liegt darin, wie man die aktuelle URL der Webseite und das href des a-Tags überprüft und entsprechend das Stil ändert. Hier wurde die Methode window.location.href verwendet, um die aktuelle Webseite 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 matchen, daher wurde hier die Methode substr() verwendet, um die ersten paar Buchstaben zu matchen. Ich habe im CSS-Datei die Klasse on hinzugefügt und die Klasse class="on" dem a-Tag hinzugefügt, und durch das Methoden addClass() im js wurde die Funktion abgeschlossen.
2、Navigationsleiste mit chinesisch-englischer Umstellung
Zunächst einmal schauen wir uns das Ergebnisbild an:
Ich habe zwei Methoden verwendet, eine mit CSS3, eine andere Methode ist die Implementierung mit jQuery.
Zunächst einmal über CSS3Wie kann man es erreichen:
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>index</b> <i>Startseite</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>Shops</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, die durch die Veränderung des Positions verwendet wird, wenn der Mauszeiger darauf bewegt wird, wird chinesisch angezeigt, das heißt, das Englische wird entfernt. Es ist zu beachten, dass es erforderlich ist, die Eigenschaft overflow:hidden zu verwenden, um es zu verstecken. Wenn man eine langsamere Geschwindigkeit haben möchte, kann man die Eigenschaft transition verwenden, um die Zeit der Veränderung zu setzen, und so die Geschwindigkeit der Veränderung verlangsamen.
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 zur Erreichung der Funktion ist die Implementierung der Funktion animate(), durch die Einstellung des Margins-Um sicherzustellen, dass die Animation nicht zu schnell passiert, ändern sich alle Elemente (wie im folgenden Bild gezeigt), und es ist erforderlich, vor der Funktion animate() die Funktion stop() hinzuzufügen, um alle anderen Animationen zu stoppen, bevor diese Animation gestartet wird.
3und eine Navigationsleiste mit elastischer Animation}}
Ich habe drei Methoden verwendet, die Erste ist CSS3,Zweiteres ist jQuery, Drittes ist jQuery Easing-Implementierung. Das Bildergebnis ist wie folgt:
Da die three Arten von Layouts gleich sind, wird hier direkt der HTML-Strukturcode 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>
Erstes: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 Implementierungsmethode ist sehr einfach, d.h. am Anfang das Dropdown-Menü verstecken und dann das versteckte Menü anzeigen, wenn der Mauszeiger darüber geht. Das spezifische Implementierungscode ist im roten Teil oben dargestellt, dies wird hier nicht im Detail erläutert, der Code ist einfach.
Zweiteres:durch 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
});
});
Bevor zur Implementierungsmethode übergegangen wird, wurde auch die Methode für die Umsetzung der Funktion 'Baidus Hautveränderung' erwähnt. Hier wird die Methode slideDown() und slideUp() verwendet. Wenn die Änderungszeit eingestellt werden soll, kann sie direkt in Klammern angegeben werden.
The third one:}implemented with jQuery.easing.
The CSS style is the same as the style implemented by jQuery, so there is no need to copy it again here.
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 method.1.3.min.js (I use this version, everyone can download it from the Internet). Here, the idea is emphasized: when the mouse moves, the elastic dropdown menu follows the downward movement, 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 it, 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, you can check the relevant documentation, and you will understand it.
4, animation of friction motion following navigation bar
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, i.e., 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 a single page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Animation of friction motion following navigation bar</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">Shop</a></li>
<li><a href="download.html">Download</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
$(".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"});
});
});
主要说几个方法的作用：
1）outerwidth()获取元素的宽度（因为文字的个数不同，宽度就不一样，为了美观，横条需要适应文字的宽度）；
2）position().left获取元素的位置中left的值；
3）animate()实现动画效果；
4）duration和easing都是jQuery easing插件的内容，即设置动画的效果。
在这里，所有的分享就结束了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
声明：本文内容来源于网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发邮件时，请将#更换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）