JQuery + CSS3 provides detailed examples of four widely used navigation bar production instances, jquerycss3

JQuery + CSS3 provides detailed examples of four widely used navigation bar production instances, jquerycss3

Navigation bar is widely used, and each website will make a navigation bar with its own characteristics. Recently, I have learned about various types of navigation bars, such as the highlighted navigation bar, the navigation bar that switches between Chinese and English, and the navigation bar with elastic animation, it is even a navigation bar with a 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 simple, but the visual effect is not bad. The Animated navigation bar also has a good visual effect.

Next, we will introduce four kinds of navigation bars that are widely used: highlighted navigation bars, navigation bars that switch between Chinese and English, navigation bars with elastic animations, and navigation bars with Friction motion animations.

1. Highlighted navigation bar

This type of navigation bar: When you click a navigation bar, you can highlight it. Other Default original styles, that is, without changing the menu CSS code, use Js to control the background of a menu. If this menu item is clicked, it will be given a distinctive background color or background image. In this way, you can clearly guide users to browse the Website Section, it is simple, convenient, and effective.

As follows:

Html: (the Code of another html file is skipped, and only the code of index.html is pasted)

<! DOCTYPE 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"); }else{ $(".nav-list li a[href='index.html']").addClass("on"); } });
The main knowledge point is how to check that the current webpage URL corresponds to the href in tag a, and then change the style accordingly. Here window is used. location. the href method is used to obtain the current website of the webpage, and split () is used. The last part of the content is what we want. Under normal circumstances, you do not need to match the entire URL completely, so here we use the substr () method to match the first few letters. I added the on class to the css file, added class = "on" to the label, and completed the function through the addClass () method in js.
2. navigation bar for switching between Chinese and English
Let's take a look:


I have implemented it in two ways: css3 and jquery.
First, let's talk about how to implement it with css3:
Html:
<! DOCTYPE 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. When you move the mouse over the location, the Chinese language is displayed, that is, the English language is removed. It is worth noting that overflow is required: hidden property. If you want to slow down a bit, you can use the transition attribute to set the change time to slow down the change speed.
The following is 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; 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 focus of the implementation function is the implementation of the animate () function, which is achieved by setting the margin-top and time. To prevent the rapid passage, all the changes will be made (as shown in ), you need to add the stop () function before the animation () function, that is, stop other animations before starting the animation.

3. navigation bar with elastic Animation
I have implemented three methods: css3, jquery, and easing. As follows:
Because the three la s are the same, the html Structure Code is directly attached.
Html:
<Div class = "nav"> <ul class = "nav-list"> <li> <a href = "#"> homepage </a> </li> <li> <a href = "#"> Forum </a> <div class = "nav-down"> <a href = "#"> java Forum </a> 
First: css3 implementation
*{ 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, to hide the drop-down menu at the beginning, and then display the hidden menu when the mouse passes. The specific implementation code is the red part above, the code is very simple.

Method 2: implement 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(){ $(this).find(".nav-down").stop().slideDown() },function(){ $(this).find(".nav-down").stop().slideUp() }); });
As mentioned before, the slideDown () and slideUp () methods are used to simulate the Baidu skin replacement function. If you want to set the Change Time, you can simply enter the time in brackets.

Method 3: Use jquery. easing.
The css style is the same as the style implemented by jquery, so there is no 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"}) }); });
When using this method, remember to introduce the jquery. easing.1.3.min. js package (I use this version, you can download it online ). Here we will focus on the idea: When the mouse moves, the elastic drop-down menu will slide along with the drop-down. When the mouse moves away, the elastic drop-down menu will slide, the slideDown () and slideUp () methods mentioned above are also used. The only difference is that the animation is added here, that is, the easing method is used, which is actually similar to the json format, insert the duration and easing methods. If you do not understand the implementation process, you can check the relevant instructions and documents.
4. Navigation Bar Following friction Motion Animation


The idea is to move the horizontal bar below the current text while moving the mouse. Therefore, you need to obtain the position of the current mouse, that is, top and left, and then change the top and left of the horizontal bar accordingly. The specific implementation is as follows.
Html :( only one page code is attached here)
<! DOCTYPE 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"}); }); });
It mainly describes the functions of several methods:
1) outerwidth () gets the width of the element (because the number of characters is different, the width is different. To be nice, the horizontal bar needs to adapt to the width of the text );

2) position (). left: Obtain the left value of the element's position;

3) Animations;

4) duration and easing are the content of the jquery easing plug-in, that is, setting the animation effect.
The above is a detailed description of jQuery + CSS3, which is widely used in four kinds of navigation bar production examples. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner, and I would like to thank you for your support for the help House website!