jQuery小试之菜单栏

最新推荐文章于 2024-12-23 16:50:22 发布

「已注销」

最新推荐文章于 2024-12-23 16:50:22 发布

阅读量2k

点赞数 14

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lidatgb/article/details/7752821

本文详细介绍了如何使用HTML、CSS和JavaScript实现一对横纵交错的菜单栏，具有淡入淡出效果，并随鼠标点击进行动态修改。通过定制化的样式和JavaScript事件监听，实现菜单栏的展开和折叠，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次要写的是一对菜单栏：一横一纵，有淡入淡出的效果，同时随着鼠标点击指示图标修改。

前台界面：

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <link href="css/menu.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/menu.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul>
                <li class="main">
                <a href="#">文件</a>
                        <ul>
                        <li><a href="#">新建</a></li>
                        <li><a href="#">保存</a></li>
                        </ul>
                </li>
                <li class="main"><a href="#">编辑</a>
                <ul>
                        <li><a href="#">复制</a></li>
                        <li><a href="#">查找</a></li>
                        </ul>
                </li>
                <li class="main"><a href="#">帮助</a>
                <ul>
                        <li><a href="#">检查更新</a></li>
                        <li><a href="#">版本说明</a></li>
                        </ul>
                </li>
        </ul>
    </div>
    <p>分割线————————分割线</p>
 <div>
        <ul>
                <li class="hmain">
                <a href="#">文件</a>
                        <ul>
                        <li><a href="#">新建</a></li>
                        <li><a href="#">保存</a></li>
                        </ul>
                </li>
                <li class="hmain"><a href="#">编辑</a>
                <ul>
                        <li><a href="#">复制</a></li>
                        <li><a href="#">查找</a></li>
                        </ul>
                </li>
                <li class="hmain"><a href="#">帮助</a>
                <ul>
                        <li><a href="#">检查更新</a></li>
                        <li><a href="#">版本说明</a></li>
                        </ul>
                </li>
        </ul>
    </div>
    </form>
</body>
</html>

CSS代码：

ul
{
        /*去掉左缩进*/
        padding:0px;
        margin:0px;
        /*去掉圆点*/
        list-style :none;
        }
.main,.hmain
{
        background-image:url("../images/title.gif");
        background-repeat:repeat-x;
        width:120px;
          }
li
{
                /*去掉圆点*/
        list-style :none;
        background-color :#eeeeee;
        }
.main a,.hmain a
{
        color:White;
        background-image:url("../images/collapsed.gif");
        background-repeat:no-repeat ;
        /*调整三角位置*/
        background-position :5px center;
          /*取消下划线更改颜色*/
        text-decoration:none;
        padding-left:20px;
        display :block;
        /*为了兼容ie6*/
        display:inline-block ;
        }
.main li  a,.hmain li a
{
        color:black;
        background-image:none;
        }
.main ul,.hmain ul
{
        /*隐藏子菜单*/
       display:none;
        }
.hmain
{
        float:left;
        }

JavaScript代码：

$(document).ready(function () {
        $(".main > a").click(function () {
                //找到对应子项
                var ulNode = $(this).next("ul");
                //多种隐藏方式，第一种通过css
                /*if (ulNode.css("display") == "none") {
                ulNode.css("display", "block");
                }
                else {
                ulNode.css("display", "none");
                }*/
                //第二种方法 show() 和hide() //ulNode.show("slow");
                //第三种方法 toggle()   //ulNode.toggle("slow");
                // 第四种方法 slidedown()和slideup()  //ulNode.slideDown();
                //第五种方法 slideToggle()
                ulNode.slideToggle();
                changeIcon($(this));
            })
        //可以这样达到出现小手的动作
        //        $(".hmain > a").hover(function () {
        //                //找到对应子项
        //                var ulNode = $(this).next("ul");
        //                ulNode.slideToggle();
        //        })
        /*更简单的思路*/
        $(".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')");
                 }
            }
 }

效果图：