Simple implementation of drop-down menu using jquery_jquery

Jquery is a lightweight framework that I personally think is very easy to use. Today I will write a very simple example to implement the drop-down menu function;

First of all, be sure to quote jquery.js on the page. The version is not limited;

Next, post the =====================html:

Copy code The code is as follows:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                       

                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                        

                                                                                                                                                                                                                                                                                                                                                   

============================css style:




Copy code


The code is as follows:

/**헤더 메뉴**/ 
.header_menu{ 
    플로트:오른쪽; 
    너비: 50%; 
    높이: 100%; 
    커서: 포인터; 
} 
.header_menu ul{ 
    목록 스타일: 없음; 
    높이: 100%; 
} 
.header_menu ul li{ 
    플로트: 오른쪽; 
    너비: 20%; 
    색상: 흰색; 
    글꼴 크기:14px; 
    패딩 상단: 55px; 
    글꼴 두께: 굵게; 
} 
.디스플레이{ 
    디스플레이: 없음; 
} 
.display ul{ 
    목록 스타일: 없음; 
    너비: 100px; 
} 
.display ul li{ 
    패딩 상단:10px; 
    패딩 하단: 5px; 
    왼쪽 패딩:5px; 
    커서: 포인터; 
    글꼴 크기: 14px; 
} 
.movediv{ 
    위치: 고정; 
    왼쪽: 0px; 
    상단:0px; 
    글꼴 크기: 14px; 
    하얀색; 
    테두리:1px 단색 흰색; 
} 
.redcolor{ 
    #a0c9e6; 
} 

=======================js脚本

复代码 代码如下:

$(함수() { 
    // 菜单绑정사件 
    initMenuListener(); 
    // 下拉菜单绑정사件
    initSubMenuHover(); 
    // 下拉菜单颜color改变 
    initSubMenuLiHover(); 
}); 
/**
* 헤더 메뉴 바인딩 슬라이드 이벤트
​*/ 
함수 initMenuListener() { 
    $(“.menuli”).hover(function() { 
        var hideDivId = $(this).attr(“id”) “_div”; 
        // 得到菜单的位置 
        var left = $(this).offset().left; 
        var top = $(this).offset().top; 
        var height = $(this).outerHeight();//outerHeight是获取高島，包括内边距，height是也是获取高島，不过只包括文本高島 
        $(“#” hideDivId).show(); 
        $(“#” hideDivId).css(“왼쪽”, 왼쪽); 
        $(“#” hideDivId).css(“top”, 상단 높이); 
    }, 함수() { 
        // 将原来的菜单隐藏 
        $(“.display”).hide(); 
    }); 
} 
/**
* 드롭다운 메뉴 바인딩 이벤트
​*/ 
함수 initSubMenuHover() { 
    $(“.display”).hover(function() { 
        $(this).show(); 
    }, 함수() { 
        $(this).hide(); 
    }); 
} 
/**
* 드롭다운 메뉴 색상 변경
​*/ 
함수 initSubMenuLiHover() { 
    $(“.redli”).hover(function() { 
        $(this).addClass(“빨간색”); 
    }, 함수() { 
        $(this).removeClass(“redcolor”); 
    }); 
} 

效果如下：