English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The navigation bar is widely used, and each website will make a navigation bar with its own characteristics. Recently, I have specially studied various types of navigation bars, such as highlighted navigation bars, navigation bars with switching between Chinese and English, navigation bars with elastic animation, and even navigation bars with friction motion animation (with a horizontal line under the text). Each type of navigation bar has its own characteristics. For example, the highlighted navigation bar looks relatively simple, but it has a good visual effect. The navigation bar with animation also has a good visual effect.
Next, we will introduce them one by one4This type of navigation bar is widely used, that is, highlighted navigation bar, navigation bar with switching between Chinese and English, navigation bar with elastic animation, and navigation bar with friction motion animation.
1, highlighted navigation bar
This type of navigation bar: when you click on a navigation item, it will be highlighted, and the others will remain in their original style. That is to say, 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.
The effect is as follows:
html: (Here is omitted other html file code, only paste the code of 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">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: #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']
}
});
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 web page of the website, 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 substr() method 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 completed the function through the addClass() method in js.
2、Switchable navigation bar in Chinese and English
First, let's take a look at the effect diagram:
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>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;
}
The red part is the implementation of this process, which uses position changes. When the mouse moves over it, Chinese characters are displayed, that is, the English characters are moved away. It is worth noting that overflow: hidden property needs to be used to hide it. If you want the speed to be slower, you can use the transition attribute to set the change time, which can slow down the speed of change.
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, which is achieved by setting the margin-To prevent rapid passage, all elements will change (as shown in the figure below). You need to add the stop() function before the animate() function, that is, stop other animations before starting this animation.
3and with elastic animation navigation bar
I have implemented it in three ways, the first is css3, the second is jquery, and the third is implemented using jquery easing. The effect diagram is as follows:
Since the layouts of the three are 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="#">Forums</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="#">Featured 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>
The 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 hovers over it. The specific implementation code is shown in the red part above, which will not be explained in detail here, as the code is very simple.
The second method: implemented 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;
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
});
});
As mentioned before, in the part of imitating Baidu's skin changing function, slideDown() and slideUp() methods are used here. If you want to set the transition time, you can simply fill in the time in the parentheses.
The third method: implemented using jquery.easing.
The CSS style is the same as the style implemented by jQuery, so there is no need to add space to copy 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 key point is to talk about the idea: 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 here is that animation is added, that is, using easing to achieve this. It 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, Navigation Bar with Friction Animation Follows
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, and 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>Navigation Bar with Friction Animation Follows</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").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"});
});
});
Mainly talk about the functions of several methods:
1The outerwidth() gets the width of the element (because the number of characters is different, the width is not the same. To make it look good, the horizontal bar needs to adapt to the width of the text);
2The position().left gets the value of left in the element's position;
3The animate() function realizes the animation effect;
4duration and easing are both content of the jQuery easing plugin, which is to set the animation effect.
The above is what the editor has introduced to everyone about jQuery+CSS3This article introduces four widely used navigation bar examples, hoping to be helpful to everyone. If you have any questions, please leave me a message, and the editor will reply to everyone in time. Here, I also want to express my heartfelt thanks to everyone for supporting the Naoa tutorial website!
Declaration: The content of this article is from the network, 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 manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @ when sending an email) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.