Step by step, we will teach you how to compile the cool navigation bar js + css implementation _ jquery

We will teach you how to write a cool navigation bar step by step. js + css provides a black and classic navigation bar, which has some reference value. Interested friends can refer to the step-by-step learning and production navigation bar, at the end of the article, I will create a comprehensive page to share with you a cool navigation bar for your reference. The details are as follows:

1. The highlighted navigation bar on the current page

The first is the HTML code, which is very simple. ul + li implements the menu

  
   Navigation Bar 1  
     
  
      
  
 
        
   
  
Android
        
   
  
C ++
        
   
  
IOS
        
   
  
Java
        
   
  
Ruby
      
  
 
    
  
  
 Homepage

Basic results:

Next, set the CSS attribute. Here we should note that label a is a row-level element, so we need to convert it into a block-level element using display. This is very common, and there is a common usage 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; }

Implementation results:

Finally, JS dynamically adds the positioning effect.
In js, the page Jump will have a link, matching the Attribute Based on the Link suffix, and changing the style to achieve the desired effect.
It should be noted that how to obtain the URL and how to find the href information from the URL

$ (Function () {// The current link is separated by a slash (/) and the last element index var index = window. location. href. split ("/"). length-1; // the first four letters of the last element. The parameter var href = window is not followed. location. href. split ("/") [index]. substr (0, 4); if (href. length> 0) {// If the match starts successfully, change the style $ (". list li a [href ^ = '"+ href +"'] "). addClass ("on"); // [attribute ^ = value]: matches the given attribute with elements starting with some values. } Else {// default homepage highlighted $ (". list li a [href ^ = 'index']"). addClass ("on ");}});

2. Move the automatically switched navigation bar

On the basis of 1, modify the content of the HTMLa tag and set the animation effect through CSS.

 
 
        
  
  
 Homepage Index 
        
  
  
 Android Android 
        
  
  
 C ++ Who added 
        
  
  
 IOS Apple 
        
  
  
 Java Java 
        
  
  
 Ruby For example, Bayi 
      
 
 

CSS to achieve the animation effect, first set the B and I labels as block-level elements, so that they can be vertically distributed, and then set a transition for a, the so-called animation, it is to move a up after it is marked, and then add a border to afor observation.

To achieve the effect, set an overflow hidden attribute for p in the package menu.

*{ 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. The Code is as follows:

$ (Function () {$ (". list "). hover (function () {// stop is to stop the current $ (this) when other animations are executed ). stop (). animate ({"margin-top":-40}, 300) ;}, function () {$ (this ). stop (). animate ({"margin-top": 0}, 300 );});});

3. Implement elastic sub-menu

First, use the p package in the sub-menu, which contains the label, as shown below:

  Android  
Sub menu 1 sub menu 2 sub menu 3 sub menu 4

Next, set the style. Since it is a sub-menu, it is necessary to leave the document page, so using the absolute attribute, 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; padding-left: 30px; display: block; }h1{ margin: 20px auto; text-align: center; }

The following results:

Next we will use the JQ and easing plug-ins to control the animation.
The find method is generally used to find the descendant element of the Operation element.

$ (Function () {$ (". list li "). hover (function () {// here the easing plug-in $ (this) is used ). find (". down "). stop (). slideDown ({duration: 1000, easing: "easeOutBounce"}) ;}, function () {$ (this ). find (". down "). stop (). slideUp ({duration: 1000, easing: "easeOutBounce "});});});

The Effect and image recording are not very good. In fact, they are all flexible animations.

The above is all the content of this article, hoping to help you learn.