English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The navigation bar is widely used, and each website will have its own characteristic navigation bar. Recently, I have specially learned about various types of navigation bars, such as the highlighted navigation bar, the navigation bar with Chinese and English switching, the navigation bar with elastic animation, and even the navigation bar with friction motion animation (under the text there is a line). Each type of navigation bar has its own characteristics. For example, the highlighted navigation bar looks relatively simple, but the visual effect is still good. The navigation bar with animation effect also has a good visual effect.
The following will be introduced one by one4This type of navigation bar is widely used, that is, the highlighted navigation bar, the navigation bar with Chinese and English switching, the navigation bar with elastic animation, and the navigation bar with friction motion animation.
1, Highlighted navigation bar
This type of navigation bar: when you click on a navigation item, it will highlight, and others remain in their original style. That is, without changing the menu CSS code, use Js to control the menu background. If the menu item is clicked, it will be given a different background color or background image, which can clearly guide the user to the column they are browsing on the website. It is simple, convenient, and effective.
Effect diagram as follows:
html: (Here is omitted other html file code, only post the index.html code)
<!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">Home</a></li>
<li><a href="bbs.html">Forum</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="mall.html">Mall</a></li>
<li><a href="download.html">Download</a></li>
</ul>
</div>
<div class="content">Home</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']
}
});
The main knowledge points are how to detect the current web page URL and the corresponding 'href' in 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 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, increased the class='on' to the 'a' tag, and then completed the function with the 'addClass()' method in the JavaScript.
2English and Chinese switchable navigation bar
First, let's take a look at the effect picture:
I have adopted two methods to implement, one using CSS3, and 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;
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;
}
The red part is the implementation of this process, using changes in position, when the mouse moves over it, it displays Chinese, that is, to move the English away. It is worth noting that 'overflow: hidden' property needs to be used to hide it. If you want to slow down the speed, you can use the 'transition' property to set the change time to slow down the speed.
Next is the implementation using 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)
});
});
The key to implementing the function is the implementation of the 'animate()' function, through setting the 'margin'-The implementation of 'top' and 'time' to prevent rapid passage, all changes (as shown in the figure below), need to add the 'stop()' function before the 'animate()' function, that is, stop other animations before starting this animation.
3, with elastic animation navigation bar
I have implemented it in three ways, the first is CSS3, The second is jQuery, and the third is jQuery easing implementation. The effect diagram is as follows:
Because the layout of the three is the same, the html structure code is directly appended.
html:
<div class="nav">
<ul class="nav-list">
<li>
<a href="#">Home Page</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="#">Excellent Articles</a>
<a href="#">Blog Column</a>
<a href="#">Blog Expert</a>
<a href="#">My Blog</a>
</div>
</li>
<li>
<a href="#">Mall</a>
<div class="nav-down">
<a href="#">Software Mall</a>
<a href="#">C Coin Mall</a>
<a href="#">C Coin Recharge</a>
</div>
</li>
<li>
<a href="#">Download</a>
<div class="nav-down">
<a href="#">Resource Categories</a>
<a href="#">My Resources</a>
</div>
</li>
</ul>
</div>
First method:css3Implementation
*{
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>
The implementation method is very simple, that is, initially hide the dropdown menu, and then display the hidden menu when the mouse passes over it. The specific implementation code is shown in the red part above, and this will not be explained in detail, as the code is very simple.
Second method:Implemented with 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(){
-.stop().slideDown()
},function(){
-.stop().slideUp()
});
});
Before the implementation method is mentioned, in the part of emulating Baidu's skin changing function, slideDown() and slideUp() methods are used here. If you want to set the change time, you can directly fill in the time in the parentheses.
第三种：用jquery.easing实现。
css的样式跟用jquery实现的样式一样，这里就不增加空间再复制一遍了。
jquery:
$(function(){ $(".nav .nav-list li.hover(function(){ -down").stop().slideDown({duration:500, easing:"easeOutBounce"}) },function(){ -down500, 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 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 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 inside, you can check the relevant documentation to see it.
4, Friction Animation 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 moves, 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 a single page)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Friction Animation 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">Home</a></li> <li><a href="bbs.html">Forum</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="mall.html">Mall</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"}); }); });Mainly talk about the function of several methods:
1outerwidth() to get the width of the element (because the number of characters is different, the width is different, in order to be beautiful, the horizontal strip needs to adapt to the width of the text);
2position().left to get the value of left in the element's position;
3animate() to achieve animation effects;
4duration and easing are both content of the jQuery easing plugin, which sets the effect of the animation.
That's the end of all the sharing here.
That's all for the content of this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yelling Tutorial more.
Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)