Various navigation bar effects CSS3 with jquery code to achieve _jquery

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

Next, we will introduce 4 kinds of widely used navigation bar, namely: the highlighted navigation bar, the Chinese and English switch between the navigation bar, has the elastic animation navigation bar, has the friction motion animation navigation bar.

1, the highlighted navigation bar

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

The effect chart is as follows:

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

 <! DOCTYPE html>  

The main point of knowledge is how to detect the current Web page URL and a label of the href corresponding, and then change the style accordingly, where the Window.location.href method to get the Web page of the current site, with split () cut, the last part of the content is what we want. Under normal circumstances, there is no need to completely match the entire Web site, so here you use the 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 using the AddClass () method in JS to complete the function.

2, the Chinese and English switch navigation bar

Let's take a look at the effect chart:

I have implemented two ways, one with CSS3 and the other with jquery.

First of all, how to use CSS3 to achieve:

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, the use of position changes, when the mouse moved up, display Chinese, that is, the English move away, it is noteworthy 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 in 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 a fast pass, all will change (as shown in the figure below), you need to precede the animate () function with the Stop () function, that is, before all animations, Stop the other animations before you start the animation.

3, with elastic animation of the navigation bar

I have implemented three ways, the first is CSS3, the second is jquery, and the third is the jquery easing implementation. The effect chart is as follows:

Because the three layouts are the same, the HTML structure code is attached directly.

Html:

  <div class= "NAV" > <ul class= "nav-list" > <li> <a href= "#" > Home </a> </li>
     <li> <a href= "#" > Forum </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= "#" > Wonderful blog </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 currency mall </a> <a href=" # ">c Currency recharge &LT;/A&G
    T </div> </li> <li> <a href= "#" > Download </a> <div class= "Nav-down" > <a H ref= "#" > Resource classification &LT;/a> <a href= "#" > My resources </a> </div> </li> </ul> </div> 

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 of the method is very simple, that is, just start to pull down the menu hidden, and then when the mouse passed, will be hidden menu display, the specific implementation of code such as the red part, here does not give detailed explanation, the code is very simple.

The second type: 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"). Stop (). Slidedown ()
 },function () {
  $ (this). Find (". Nav-down"). Stop (). Slideup ()
 });

The implementation method has also been said before, in imitation of the part of Baidu's skin-changing function, where the use of Slidedown () and Slideup () method, if you want to set the change time, you can fill in parentheses directly in time.

The Third Kind: use jquery.easing to realize.

The CSS style is the same as the one implemented with jquery, where there is no additional space to replicate.

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 you remember to introduce package jquery.easing.1.3.min.js (I use this version, you can download on the Internet). Here's how to focus on thinking about: When the mouse moves, the elastic pull-down menu will follow along with the slide, and when the mouse moves away, the elastic pull-down menu will slide, using the Slidedown () and Slideup () methods mentioned earlier, the only difference being that the animation is added here, That is, the implementation of easing, it is similar to the format of JSON, insert duration and easing way, if you do not understand the inside of the implementation process, you can check the relevant documentation, see will be.

4, Friction motion animation follow the navigation bar

The realization of the idea is: the mouse movement, the position of the bar moved to the bottom of the current text. So you need to get the current mouse to move to the position, that is, top and left, and then the top and left of the bar corresponding changes can be achieved, specifically implemented as follows.

HTML: (only one page is pasted 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 says the function of several methods:

1 outerwidth () Get the width of the element (because the number of characters is different, the width is not the same, in order to look good, the bar needs to adapt to the width of the text);

2) position (). Left gets the value of the left in the position of the element;

3) animate () to achieve the animation effect;

4 duration and easing are the content of the jquery easing plug-in, that is, the effect of setting the animation.

Here, all the sharing is over.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.