jquery下拉菜单代码（jq css)

JQuery

1个成员

jquery下拉菜单代码（jq css)

发表于 2016-12-24 • 3583 次查看

创建html
<ul class="topnav">
    <li><a href="#">home</a></li>
    <li>
    <a href="#">about me</a>
    <ul class="subnav">
    <li><a href="#">sub nav link</a></li>
    <li><a href="#">sub nav link</a></li>
    </ul>
    </li>
    <li>
    <a href="#">portfolio</a>
    <ul class="subnav">
    <li><a href="#">sub nav link</a></li>
    <li><a href="#">sub nav link</a></li>
    <li><a href="#">sub nav link</a></li>
    <li><a href="#">sub nav link</a></li>
    <li><a href="#">sub nav link</a></li>
    </ul>
    </li>
    <li><a href="#">blog</a>
    <ul class="subnav">
    <li><a href="#">sub nav link</a></li>
    <li><a href="#">sub nav link</a></li>
    <li><a href="#">sub nav link</a></li>
    </ul>
    </li>
    <li><a href="#">contact me</a></li>
    <li><a href="#">rss</a></li>
</ul>

step2. 创建css教程

div.examples_body_wrap {
    width: 750px;
    margin: 50px auto 0 auto;
    clear: both;
}
div.examples_body_wrap h3 {
     color: #f9f66d;
     font-size: 130%;
     padding-bottom: 15px;
     margin-bottom: 15px;
     background: url(http://sunflowamedia.com/images/solid-line-news.gif) repeat-x bottom;
}
ul.topnav {
    width: 710px;
    padding: 0 0 200px 0;
    float: left;
    background: #222;
    background: url(../images/topnav_bg.gif) repeat-x;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 10px 0 15px;
    position: relative; /*--declare x and y axis base for sub navigation--*/
    display: inline;
}
ul.topnav li a {
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.topnav li a:hover {
    background-color: #333;
    -moz-border-radius: 3px; /*--css3 rounded corners--*/
    -khtml-border-radius: 3px; /*--css3 rounded corners--*/
    -webkit-border-radius: 3px; /*--css3 rounded corners--*/
}
ul.topnav li span { /*--drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: left;
    background: url(../images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover { /*--hover effect for trigger--*/
    background-position: center bottom; cursor: pointer;
}
ul.topnav li ul.subnav {
    width: 170px;
    position: absolute; /*--important - keeps教程 subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    width: 170px;
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--create bevel effect--*/
    border-bottom: 1px solid #444; /*--create bevel effect--*/
    clear: both;
}
html ul.topnav li ul.subnav li a {
    width: 145px;
    float: left;
    background-color: #333;
    padding-left: 20px;
    font-size: 0.9em;
}
html ul.topnav li ul.subnav li a:hover { /*--hover effect for subnav links--*/
    background-color: #222;
}

插入jquery和脚本包

$(document).ready(function(){

    $("ul.subnav").parent().append("<span></span>"); //only shows drop down trigger when 网页特效 is enabled (adds empty span tag after ul.subnav*)

    $("ul.topnav li span").mouseo教程ver(function() { //when trigger is clicked...

        //following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slidedown('fast').show(); //drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideup('slow'); //when the mouse hovers out of the subnav, move it back up
        });

        //following events are applied to the trigger (hover events for the trigger)
        }).hover(function() {
            $(this).addclass("subhover"); //on hover over, add class "subhover"
        }, function(){ //on hover out
            $(this).removeclass("subhover"); //on hover out, remove class "subhover"
    });

});