jquery 菜单效果

最新推荐文章于 2023-03-28 14:14:30 发布

让时间留下来

最新推荐文章于 2023-03-28 14:14:30 发布

阅读量470

点赞数

分类专栏： jquery 文章标签： jquery 菜单效果 dock

本文链接：https://blog.csdn.net/LittleBoy1996/article/details/52156820

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.实现功能：

竖标签，点击的时候放下，在次点击的时候收回。
横标签，鼠标滑过的时候放下，划出的时候收回。

2. 实现思路：

竖标签：给标题添加点击事件，收起所有的标签，检查选中的标题，如果是打开状态则收起，反之则放下
横标签一：监听标题，如果划过标题，放下菜单栏，划出标题，添加一个3秒的延时收回事件，如果这时候鼠标化进菜单栏，则将这个延时事件清除，划出菜单栏收回菜单栏。
横标签二：听标题的父节点，如果在父节点内，则放下菜单栏，如果不在，则收回菜单栏。

3. 代码：

menu.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>菜单效果</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <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="#">菜单项一</a>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                    </ul>
                </li>

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

                <li class="main">
                    <a href="#">菜单项三</a>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li  class="hmain">
                    <a href="#">菜单项一</a>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                    </ul>
                </li>

                <li  class="hmain">
                    <a href="#">菜单项二</a>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </li>

                <li class="hmain">
                    <a href="#">菜单项三</a>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </li>
            </ul>
    </body>
</html>

menu.css

ul,li{
    /* 清除默认的样式*/
    list-style: none;
}
ul{
    padding-left:0px;
}
/*只有当背景图片没有的时候背景颜色才会发挥作用  background 从某种程度修正背景图片高度高于文字图片*/
.main{
    background-image:url(../images/title.gif);
    background-repeat: repeat-x;
    background-color: #eeeeee;
    width: 100px;
}
/*display使之变成块级元素 点击的范围变大*/
li a{
    text-decoration: none;
    padding-left: 20px;
    display: block;
}


.main a,.hmain a{
    background-image:url(../images/collapsed.gif);
    background-repeat: no-repeat;
    background-position: 3px,center;
    color:white;
}

.main li,.hmain li{
    color:black;
}

.main ul,.hmain ul{
    display: none;
}

.hmain{
    background-image:url(../images/title.gif);
    background-repeat: repeat-x;
    background-color: #eeeeee;
    width: 100px;
    float:left;
}
menu.js
//>a只是指a
//slideToggle() 可以实现dock 不需要自己写判断;
$(function(){

    $(".main>a").click(function(){
/*          if($(this).next("ul").css("display")=="none"){
              $(this).next("ul").css("display","block");
          }else{
              $(this).next("ul").css("display","none");
          }
          */
        $(this).parent().siblings().children("ul").slideUp();
        $(this).next("ul").slideToggle();
        });

    //第一种实现

    $(".hmain>a").hover(function(){
        $(this).next("ul").slideDown();
    },function(){
        var ulNode =  $(this).next("ul");
        //用于在数秒后执行某个方法
        var timeoutId = setTimeout(function(){
            ulNode.slideUp();
        },300)
        ulNode.hover(function(){
            clearTimeout(timeoutId);
        },function(){
            $(this).slideDown();
        });
    });

//另一种实现
/*    $(".hmain").hover(function(){
        $(this).children("ul").slideDown();
    },function(){
        $(this).children("ul").slideUp();
    });*/

});

让时间留下来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 菜单效果

实现功能：竖标签，点击的时候放下，在次点击的时候收回。横标签，鼠标滑过的时候放下，划出的时候收回。实现思路：竖标签：给标题添加点击事件，收起所有的标签，检查选中的标题，如果是打开状态则收起，反之则放下横标签：第一种方式：
复制链接

扫一扫