JQuery实例3：横向纵向菜单

来源：互联网发布：淘宝好评返现卡怎么写编辑：程序博客网时间：2024/05/20 15:10

♢ 最终运行的结果：

♢ css文件夹下的menu.css文件代码：

ul, li{    /*清除ul和li上默认的小圆点*/    list-style: none;}ul{    /*清除子菜单的缩进值*/    padding: 0;    margin: 0;}.main, .hmain{    background-image: url(../images/title.gif);    background-repeat: repeat-x;    width: 120px;}li{    background-color: #eeeeee;}a{    /*取消所有的下划线*/    text-decoration: none;    padding-left: 20px;    display: block;    display: inline-block;    width: 100px;    padding-top: 3px;    padding-bottom: 3px;}.main a, .hmain a{    color: White;    background-image: url(../images/collapsed.gif);    background-repeat: no-repeat;    background-position: 3px center;}.main li a, .hmain li a{    color: Black;    background-image: none;}.main ul, .hmain ul{    display: none;}.hmain{    float: left;    margin-right: 1px;}

♢ images文件夹下的三个图片：

分别是：title.gif，collapsed.gif，expanded.gif （见下方）

♢ js文件夹下的menu.js文件代码：

$(document).ready(function () {    //页面中的DOM已经装载完成时，执行的代码    $(".main > a").click(function () {        //找到主菜单项对应的子菜单项        var ulNode = $(this).next("ul");        //        if (ulNode.css("display") == "none") {        //            ulNode.css("display", "block");        //        }        //        else {        //            ulNode.css("display", "none");        //        }        //ulNode.show("slow");//slow normal fast        //ulNode.hide();        //ulNode.toggle();        //ulNode.slideDown("slow");        //ulNode.slideUp();        ulNode.slideToggle();        changeIcon($(this));    });    //    $(".hmain > a").hover(function () {    //        $(this).next("ul").slideDown();    //    }, function () {    //        var ulNode = $(this).next("ul");    //        var timeoutId = setTimeout(function () {    //            ulNode.slideUp();    //        }, 300);    //        ulNode.hover(function () {    //            clearTimeout(timeoutId);    //        }, function () {    //            $(this).slideUp();    //        });    //    });    $(".hmain").hover(function () {        $(this).children("ul").slideDown();        changeIcon($(this).children("a"));    }, function () {        $(this).children("ul").slideUp();        changeIcon($(this).children("a"));    });});/***修改主菜单的指示图标*/function changeIcon(mainNode) {    if (mainNode) {        if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {            mainNode.css("background-image", "url('images/expanded.gif')")        } else {            mainNode.css("background-image", "url('images/collapsed.gif')")        }    }}

♢ js文件夹下jquery.js文件：

http://download.csdn.net/detail/wm9901/7113527

♢ menu.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>JQuery实战</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <link type="text/css" rel="stylesheet" href="css/menu.css" />    <script type="text/javascript" src="js/jquery.js"></script>    <script type="text/javascript" src="js/menu.js"></script></head><body>    <ul>        <li class="main"><a href="#">菜单1</a>            <ul>                <li><a href="#">子菜单项11</a> </li>                <li><a href="#">子菜单项12</a></li>            </ul>        </li>        <li class="main"><a href="#">菜单2</a>            <ul>                <li><a href="#">子菜单项21</a> </li>                <li><a href="#">子菜单项22</a> </li>            </ul>        </li>        <li class="main"><a href="#">菜单3</a>            <ul>                <li><a href="#">子菜单项31</a> </li>                <li><a href="#">子菜单项32</a></li>            </ul>        </li>    </ul>    <br />    <br />    <br />    <ul>        <li class="hmain"><a href="#">菜单1</a>            <ul>                <li><a href="#">子菜单项11</a> </li>                <li><a href="#">子菜单项12</a></li>            </ul>        </li>        <li class="hmain"><a href="#">菜单2</a>            <ul>                <li><a href="#">子菜单项21</a> </li>                <li><a href="#">子菜单项22</a> </li>            </ul>        </li>        <li class="hmain"><a href="#">菜单3</a>            <ul>                <li><a href="#">子菜单项31</a> </li>                <li><a href="#">子菜单项32</a></li>            </ul>        </li>    </ul></body></html>

0 0