jQuery制作菜单

最新推荐文章于 2020-08-09 22:44:49 发布

Vanqqqq

最新推荐文章于 2020-08-09 22:44:49 发布

阅读量789

点赞数

分类专栏： web 文章标签： css jquery 前端开发

本文链接：https://blog.csdn.net/Vanqqqq/article/details/45696141

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

当然菜单还是用做活的比较好，这样写固定了在实际中并不实用。

下面介绍横向菜单和纵向菜单的做法：（直接复制的以前写的代码，JavaScript就没有另外引用）

HTML代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>菜单效果</title>
    <link type="text/css" rel="Stylesheet" href="caidan.css"/>
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <%--<script type="text/javascript" src="caidan.js"></script>--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".main>a").click(function () {
                 var ulNode = $(this).next("ul");
                ulNode.slideToggle();/*卷帘的感觉 也可以slidedown slideup单独设置*/
                changeIcon($(this));
            });
            $(".mains").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("b.gif")>=0)
                { mainNode.css("background-image", "url('a.gif')");}
                else {
                    mainNode.css("background-image", "url('b.gif')");
                }
            }
        }
    </script>
</head>
<body>
    
    <ul>
        <li class="main">
            <a href="#">菜单项1</a>
            <ul>
                <li>
                    <a href="#">子菜单项1</a>

                </li>
                <li>
                    <a href="#">子菜单项2</a>

                </li>

            </ul>
        </li>
        <li class="main">
            <a href="#">菜单项2</a>
            <ul>
                <li>
                   <a href="#"> 子菜单项1</a>

                </li>
                <li>
                    <a href="#">子菜单项2</a>

                </li>

            </ul>
        </li>
        <li class="main">
           <a href="#"> 菜单项3</a>
            <ul>
                <li>
                   <a href="#"> 子菜单项1</a>

                </li>
                <li>
                   <a href="#"> 子菜单项2</a>

                </li>

            </ul> 
        </li>

    </ul>
    <br/>


    <ul>
        <li class="mains">
            <a href="#">菜单项1</a>
            <ul>
                <li>
                    <a href="#">子菜单项1</a>

                </li>
                <li>
                    <a href="#">子菜单项2</a>

                </li>

            </ul>
        </li>
        <li class="mains">
            <a href="#">菜单项2</a>
            <ul>
                <li>
                   <a href="#"> 子菜单项1</a>

                </li>
                <li>
                    <a href="#">子菜单项2</a>

                </li>

            </ul>
        </li>
        <li class="mains">
           <a href="#"> 菜单项3</a>
            <ul>
                <li>
                   <a href="#"> 子菜单项1</a>

                </li>
                <li>
                   <a href="#"> 子菜单项2</a>

                </li>

            </ul> 
        </li>

    </ul>
</body>
</html>

CSS代码：

ul li{

       list-style:none;
}
ul{
       padding:0;/*去除缩进 IE6,7去不掉，不会向左靠*/
       margin：0；/*现在可以了*/
}
.main,.mains{
        background-image:url(c.gif);
        background-repeat:repeat-x;
        width:120px;
}
li{
        background-color:lightblue;
}
a{
         text-decoration:none;
         padding-left:20px;
         display:block;/*a标记在整个图形上都有超链接手势，除了IE6*/
          display：inline-block;/*IE6样式也同一但*/
          width：100px;/*100=整个宽120减左padding  IE6空的背景也能显示超链接手势*/
           padding-top:3px;
            padding-bottom:3px;
}
.main a,.mains a{
         color:white;
          background-image:url(b.gif);
          background-repeat:no-repeat;
          background-position:3px center;
}
.main li a,.mains li a{
          color:blue;
           background-image:none;
}
.main ul,.mains ul{
           display:none;
}
.mains{
           margin-left:1px;
           float:left;
}