Step by step to teach you to write cool navigation bar JS+CSS implementation _jquery

Step-by-Step learning to make navigation bar, the end of the article to do a comprehensive page, to share to everyone a cool navigation bar for everyone's reference, the specific contents are as follows

1. The navigation bar highlighted on the current page

First is the HTML code, very simple, ul+li implementation menu

<! DOCTYPE html>
 
 

Basic effect:

Next set the CSS properties, here to note that tag A is a row-level element, so you need to use display to convert block-level elements, this is very common, there is a common use of line-height

*{margin:0; padding:0;}
a{Text-decoration:none}
. nva{width:100%; height:40px margin-top:70px; Background-color: #222;
list{width:80%; height:40px; margin:0 auto; list-style-type:none;
List li{Float:left}
. List Li a{padding:0 30px; color: #aaa; line-height:40px; display:block;}
. List Li a:hover{background: #333; color: #fff;}
. List Li a.on{background: #333; color: #fff;}
h1{margin:20px Auto; text-align:center;}

Effect of implementation:

The last is JS dynamic add positioning effect
JS inside such consideration, page jump will have a link, according to the link suffix to match the attributes, matching the change style can achieve the desired effect
What you need to be aware of is how to get the URL and how to find the href information from the URL

$ (function () {
  ///Current link with/after the last element index of
  var index = window.location.href.split ("/"). Length-1;
  The last element is the first four letters, preventing the back with the parameter
  var href = window.location.href.split ("/") [Index].substr (0,4);
 
  if (href.length>0) {
    ///If the match begins successfully, change the style
    $ (". List li a[href^= '" +href+ ")"). AddClass ("on");
    [Attribute^=value]: matches the given property to be an element that starts with some value.
  }else {
    //default home page highlight
    $ (". List li a[href^= ' index ']"). AddClass ("on");
  }
);

Effect chart

2. Automatically switch the navigation bar

On the basis of 1, modify the HTMLA label content, and then set the animation effect through CSS

 <ul class= "list" > <li><a href= "index01.html" > <b> Home </b> <i>Index</i> </a></li> <li><a href= "android.html"
          ; <b>Android</b> <i> android </i> </a></li> <li><a href= "C + + . html "> <b>C++</b> <i> who gaga </i> </a></li> <li& Gt;<a href= "ios.html" > <b>IOS</b> <i> Apple </i> </a></li>
        ; <li><a href= "java.html" > <b>Java</b> <i> java </i> </a>& 
        lt;/li> <li><a href= "ruby.html" > <b>Ruby</b> <i> such as Army Day </i> </a></li> </ul> 

CSS animation effect, first of all the B and I tags are set to block-level elements, so that you can distribute vertically, and then give a set a transition, the so-called animation, that is, after the change to move a up, and then add a border good observation, look at the figure

Finally want to achieve results, the package menu div set an overflow hidden properties can be

*{margin:0; padding:0;}
a{Text-decoration:none}
. nva{width:100%; height:40px margin-top:70px; Background-color: #222; overflow:hidden;
list{width:80%; height:40px; margin:0 auto; list-style-type:none;
List li{Float:left}
. List Li a{padding:0 30px; color: #aaa; line-height:40px; display:block; transition:0.3s;}
              . List b,.list i{display:block;
List Li a:hover{margin-top: -40px background: #333; color: #fff;
List Li a.on{background: #333; color: #fff;}
h1{margin:20px Auto; text-align:center;}

You can also use JQ to implement the following code

$ (function () {
  $ (. List a). Hover (function () {//stop)
    stops the current $ (this) when other animations are performed.
    stop (). Animate ({
      " Margin-top ": -40
    }, +);
  }, Function () {
    $ (this). Stop (). Animate ({
      " margin-top ": 0
    }, +);
  });
});

3. Elastic submenu Implementation

First, the submenu uses Div wrap, which is all a tag, as follows

<li><a href= "android.html" >
  <b>Android</b>
</a>
  <div class= "down ">
    <a href=" # "> submenu 1</a>
    <a href=" # "> submenu 2</a> <a href=
    " # "> submenu 3< /a>
    <a href= "#" > submenu 4</a>
  </div>
</li>

Next set the style, since it is a submenu, it is necessary to detach from the document page, so use the absolute property, so the parent container will be relative

*{margin:0; padding:0;}
a{Text-decoration:none}
. nva{width:100%; height:40px margin-top:70px; Background-color: #222; position:relative;
list{width:80%; height:40px; margin:0 auto; list-style-type:none;
List li{Float:left}
. List Li a{padding:0 30px; color: #aaa; line-height:40px; display:block; transition:0.3s;}
. List b{Display:block}
. List Li a:hover{background: #333; color: #fff;}
. List Li a.on{background: #333; color: #fff;}
. List. down{position:absolute top:40px background-color: #222;/*display:none;*/}
. list. Down a{color: #aaa p adding-left:30px; Display:block; }
h1{margin:20px auto; text-align:center;}

The following effects:

Next, use the JQ and easing plug-ins to control animations
The Find method is typically used to look up the descendant elements of an action element.

$ (function () {
  $ (". List Li"). Hover (function () {
    //The easing plug-in $ (this) is used here
    . Find (". Down"). Stop (). Slidedown ({duration:1000,easing: "Easeoutbounce"});
  }, Function () {
    $ (this). Find (". Down"). Stop (). Slideup ( {duration:1000,easing: "Easeoutbounce"});});

effect, picture recording is not very good, in fact, are elastic animation.

The above is the entire content of this article, I hope to help you learn.