Multiple types of navigation bar to make "Css3,jquery"

The navigation bar is very widely used, each site will make its own special navigation bar. Recently specifically to understand the various types of navigation bar, such as with the highlight of the navigation bar, the Chinese and English to switch between the navigation bar, with elastic animation of the navigation bar, or even with friction motion animation navigation bar (text below the line), etc. Each navigation bar has its own characteristics, such as the highlighted navigation bar looks relatively simple, but the visual effect is good, the animated navigation bar has a good visual effect.

Next, we will introduce 4 kinds of navigation bars with wide application, namely: highlighted navigation bar, Chinese and English toggle navigation bar, navigation bar with elastic animation, navigation bar with friction motion animation.

1 . Highlighted navigation bar

This navigation bar: When you click on a navigation, let him highlight, the other default original style, that is, without changing the menu CSS code, with JS control the background of the menu, if the menu item is clicked, will give it a different background color or background image, This can clear the guidance of the user under the Navigation site column, simple and convenient and good effect.

As follows:

HTML: (the code for other HTML files is omitted, only one index.html code is posted)

<! 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");}    });
One of the main points of knowledge is how to detect the current Web page URL and the href corresponding in a tag, and then change the style accordingly, here using the Window.location.href method to get the Web page current site, with split () cut, the last part of the content is what we want. Under normal circumstances, there is no need to match the entire URL exactly, so here's a substr () method to match the first few letters. I added the on class to the CSS file by adding class= "on" to the a tag and then completing the function by using the AddClass () method in JS.

2. Toggle navigation bar in English and Chinese
Let's take a look:

I implemented it in two ways, one with CSS3 and the other with jquery.
First of all, how to achieve 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 realization of this process, using the change of position, when the mouse moves up, the display of Chinese, that is, the English is removed, it is worth noting that the need to use the Overflow:hidden attribute, to hide it. If you want to slow down, you can use the Transition property to set the change time, you can slow down the speed of change.

Then it is 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;    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 implementation of the function is focused on the implementation of the Animate () function, by setting the Margin-top and time implementation, in order to prevent rapid passing, all will change (as shown), you need to precede the animate () function with the Stop () function, that is, before all animations, stop the other animations , and then start the animation again.
3. Navigation bar with elastic animationI implemented it in three ways, the first is CSS3, the second is jquery, and the third is the implementation of jquery easing. As follows:
Because the three layouts are the same, the structure code of the HTML is attached directly. Html:
    <div class= "NAV" > <ul class= "nav-list" > <li> <a href= "#" > Home &L  t;/a> </li> <li> <a href= "#" > Forums </a> <div class= "Nav-down" > <a href= "#" >java Forum </a> <a href= "#" &GT;JS Forum </                A> <a href= "#" >jquery Forum </a> <a href= "#" &GT;CSS3 Forum </a>                </div> </li> <li> <a href= "#" > Blog </a> <div class= "Nav-down" > <a href= "#" > Great posts </a> <a href= "#" &G                T blog column </a> <a href= "#" > Blog expert </a> <a href= "#" > My blog </a>                </div> </li> <li> <a href= "#" > Marketplace </a> <div class= "Nav-down" > <a href= "#" > Software store </a> <a href= "#" >c Bitcoin mall </a>                 <a href= "#" >c Reload </a> </div> </li> <li> <a href= "#" > Download </a> <div class= "Nav-down" > <a href= " # "> Resources </a> <a href=" # "> My resources </a> </div> </li&gt        ; </ul> </div>
The first type: 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, just start to let the drop-down menu hidden, and then when the mouse passes, the hidden menu can be displayed, the specific implementation of code such as the red part, here is not detailed explanation, the code is very simple. The second type: 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 () {        $ (this). Find (". Nav-down"). Stop (). Slidedown ()    },function () {        $ (this). Find (". Nav-down"). Stop (). Slideup ()    });});
The implementation of the method before also said, in the imitation of Baidu skin function part, here is the Slidedown () and the Slideup () method, if you want to set the change time, you can directly in parentheses to fill in the time. The third kind: realize with jquery.easing. CSS styles are the same as those implemented in jquery, where there is no additional space to copy 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 "})    });


Use this method to realize when the introduction of the package jquery.easing.1.3.min.js (I use this version, you can download them on the Internet). Here is the focus on the idea: when the mouse movement, the elastic drop-down menu will follow with the decline, when the mouse moves away, the elastic drop-down menu will slide, the same use of the previous saidSlidedown () and Slideup () method, the only difference is that the animation is added here, that is, using the easing implementation, it is actually similar to the JSON format, inserting duration and easing way, if you do not understand the implementation process inside, You can check the relevant documentation and see what happens. 4, the friction motion animation follows the navigation barThe realization of the idea is: Move the mouse, the position of the horizontal bar to move to the bottom of the current text. So you need to get the current mouse moved to the position, that is, top and left, and then the horizontal bar top and left corresponding changes can be achieved, the implementation of the following. HTML: (This is the code that only has one page attached)
<! 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"});})    ;
Mainly say several methods of effect: 1) outerwidth () Gets the width of the element (because the number of words is different, the width is not the same, in order to look good, the horizontal bar needs to adapt to the width of the text);
2) position (). Left to get the position of the element, 3) animate () to animate, 4) duration and easing are the contents of the jquery easing plugin, that is, the effect of animating.
Here, all the sharing is over.
Multiple types of navigation bar to make "Css3,jquery"