【JQuery实例】---横向纵向菜单

最新推荐文章于 2023-02-22 13:01:52 发布

EricaLSR

最新推荐文章于 2023-02-22 13:01:52 发布

阅读量1.7k

点赞数 1

分类专栏： ------JavaScript

本文链接：https://blog.csdn.net/lishaoran369/article/details/50178809

版权

------JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这个例子也是应用了非常简单的js代码！它同样应用到了简单的封装好的JQuery，让我们一起来看看里面的重要代码吧！

首先是界面：分为纵向和横向效果两种

纵向菜单的HTML代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery实战三-菜单效果</title>
    <link href="charset.css" rel="stylesheet" />
    <script src="jquery.js"></script>
    <script src="charset.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="#">子菜单项3</a>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>
</span>

横向菜单的HTML代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>横向菜单</title>
    <link href="charset.css" rel="stylesheet" />
    <script src="jquery.js"></script>
    <script src="charset.js"></script>
</head>
<body>
    <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="#">子菜单项3</a>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>
</span>

CSS文件的代码为：

<span style="font-family:KaiTi_GB2312;font-size:18px;">body {
}
ul,li{
    list-style:none;/*去掉ul，li标签前面的小黑点*/
}
/*清除缩进*/
ul{
    /*内边距设为0*/
    padding:0;
    /*外边距也设为0*/
    margin:0;/*针对IE6、7*/
}
.main,.hmain{
    background-image :url(../image/title.gif);
    background-repeat :repeat-x ;
    width:150px;
}
li{
    background-color :#EEEEEE;
}
a {
    /*取消所有下划线*/
    text-decoration:none ;
    /*所有a标签的内边距都向左移动20个像素*/
    padding-left :20px;
    /*让所有的a标签充满ul*/
    display:block;
    display :inline-block ;/*为了兼容IE6*/
    width:130px;
    padding-top :3px;
    padding-bottom :2px;
}
.main a,.hmain a{
    /*主菜单上所有的a标签颜色为白色*/
    color:white ;
    background-image :url(../image/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;/*让ul标签和起来不显示子菜单*/
}
.hmain{
    float:left;/*让才当向左浮动，然后顺序排列*/

}
</span>

最重要的js文件代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(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");
        //}

        //菜单展开的动画效果，让他渐渐展开
        //ulNode.show("normal");
        //ulNode.show("fast");


        //toggle方法：如果当前是隐藏的，可以帮你显示，如果当前是显示的，可以帮你隐藏
        //ulNode.toggle("normal");

        //卷帘效果，向上或者向下，参数可以是slow，fast，normal,或者不加
        //ulNode.slideDown("slow");
        //ulNode.slideUp();


        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('/image/expanded.gif')");
        } else {
            mainNode.css("background-image", "url('/image/collapsed.gif')");
        }
    }
}
</span>

1、页面中的菜单项可以通过嵌ul和li来表示
2、list-style属性值为none时，可以清除ul和li前面的小圆点。
3、display的值为block来让a元素充满所在的区域。对于IE6，则需要设定display为inline-block，同时设定a的宽度。
4、.main a 和.main >a的不同之处，前者选择使用.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中的a元素。
5、toggle方法可以不用去判断元素是隐藏还是显示，直接让显示的元素隐藏起来，让隐藏的元素显示出来。
6、slideDown、slideUp可以实现向下或向上卷动的效果，

EricaLSR

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
25
评论
【JQuery实例】---横向纵向菜单

这个例子也是应用了非常简单的js代码！它同样应用到了简单的封装好的JQuery，让我们一起来看看里面的重要代码吧！首先是界面：分为纵向和横向效果两种纵向菜单的HTML代码： JQuery实战三-菜单效果菜单项1
复制链接

扫一扫