横向纵向菜单

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>横向纵向菜单</title>

    <script type="text/javascript" src="jquery-1.4.1.js"></script>

    <style type="text/css">
        .css_menu ul, li
        {
            list-style: none;
            padding: 0;
            margin: 0; /*float: left;  启用此项则变成横向菜单 */
        }
        .css_menu_title
        {
            background-color: Gray;
            width: 120px;
            margin: 1px;
        }
        .css_menu_title ul
        {
            background-color: Silver;
            display: none;
            width: 100%;
        }
        .css_menu_title ul li
        {
            display: block;
            width: 100%;
        }
        .css_menu a
        {
            text-decoration: none;
            text-align: center;
            display: block;
            width: 100%;
        }
        .css_menu_title a
        {
            color: White;
        }
        .css_menu_title li a
        {
            color: Black;
            display: block;
            width: 100%;
        }
    </style>

    <script type="text/javascript">
        $(function() {

            $(".css_menu_title > a").click(function() {
                //主菜单项对应的子菜单项
                var ulNode = $(this).next("ul");
                //                if (ulNode.css("display") == "none") {
                //                    ulNode.show("slow");
                //                }
                //                else {
                //                    ulNode.hide("slow");
                //                }
                ulNode.slideToggle();
            });
        });
    </script>
</head>
<body>
    <div class="css_menu">
        <ul>
            <li class="css_menu_title"><a href="#">菜单项1 </a>
                <ul>
                    <li><a href="#">子菜单项1-1</a></li>
                    <li><a href="#">子菜单项1-2</a></li>
                </ul>
            </li>
            <li class="css_menu_title"><a href="#">菜单项2</a>
                <ul>
                    <li><a href="#">子菜单项2-1</a></li>
                    <li><a href="#">子菜单项2-2</a></li>
                </ul>
            </li>
            <li class="css_menu_title"><a href="#">菜单项3</a>
                <ul>
                    <li><a href="#">子菜单项3-1</a></li>
                    <li><a href="#">子菜单项3-2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

posted @ 2010-02-18 14:06 xyj 阅读(699) 评论(0) 编辑收藏举报

刷新页面返回顶部

横向纵向菜单

公告