How to Use js and JQuery to define a navigation bar menu

This article mainly uses js or jquery to create a navigation bar menu.

Use js and JQuery to define a navigation bar

Effect:

I. html code:

        
            
menu1
            
menu2
            
menu3
            
menu4
            
menu5
            
menu6
        
    
    
     
111    
    
     
222    
    
     
333    
    
      
444    
    
     
              
    
    
     
666    

Ii. js Code

$(".M_Button").click(function () {        $(".M_Button").removeClass("M_Button_inner");        $(this).addClass("M_Button_inner");        $(".Content").hide();        TabButton = $(this).attr('id');        $('#co' + TabButton).css('display', 'block');    });

Iii. css code

.M_Button {    float: left;    height: 42px;    width: 98px;    cursor: pointer;    line-height: 42px;    color: #FFFFFF;    text-align: center;    font-size: 14px;    background-image: url(../../images/emergency/ReffectRadius/The_pop-up_1.png);    background-repeat: no-repeat;    background-position: right;}    .M_Button:hover {        color: #000;        background-image: url(../../images/emergency/ReffectRadius/The_pop-up_2.png);        background-repeat: repeat-x;    }.M_Button_inner {    color: #000;    background-image: url(../../images/emergency/ReffectRadius/The_pop-up_2.png);    background-repeat: repeat-x;}.Content {    float: left;    height: 438px;    width: 100%;    /*background-image: url(../../../../images/Inspection/Hidden_danger/background.png);*/}.M_Content {    height: 434px;    width: 100%;    z-index: 5;    position: absolute;    /*background-color: #666;*/    right: 2px;    top: 0px;}

The preceding figure shows how to use js and JQuery to define the details of a navigation bar menu. For more information, see other related articles in the first PHP community!