菜单效果实例

横向菜单与纵向菜单实例：

menu.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery实战3---菜单效果</title>
    <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 /><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>

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;   /*ie6的显示好看一些*/
    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;
}

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");
        }
        */

        /*方法2：
        ulNode.show("slow");  //normal，fast
        ulNode.hide();        
        */

        //方法3：
        //ulNode.toggle();

        //方法4：
        //ulNode.slideDown("normal");  //fast，slow
        ////ulNode.slideUp("slow");

        ulNode.slideToggle();
        changeIcon($(this));
    });

    $(".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)");
        }
    }
}

images文件夹中两张图片：collapsed.gif 和 expanded.gif （分别是向右和向下的箭头图标）

效果如下：

感谢您的阅读~

猜你喜欢