菜单效果实例

浅浅的花香味﹌ 2022-05-31 10:49 204阅读 0赞

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

**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 （分别是向右和向下的箭头图标）

效果如下：

![20180222152917529][]

感谢您的阅读~

[20180222152917529]: /images/20220531/7dbb6cd42fca4c29b0a9bc48e4974b75.png