JQuery【横向菜单】

最新推荐文章于 2018-10-30 15:03:12 发布

一直在冬眠

最新推荐文章于 2018-10-30 15:03:12 发布

阅读量1.3k

点赞数

分类专栏： JavaScript/JQuery 文章标签： jquery function class url float html

本文链接：https://blog.csdn.net/wjr_loves/article/details/7865272

版权

JavaScript/JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS代码：

<style type="text/css">
ul, li
{
 list-style: none;
}
ul
{
 padding: 0;
 margin: 0;
}
.hmain
{
 background-image: url(images/title.gif);
 background-repeat: repeat-x;
 width: 120px;
}
li
{
 background-color: #eee;
}
a
{
 text-decoration: none;
 padding-left: 20px;
 display: block;
 display: inline-block;
 width: 100px;
 padding-top: 3px;
 padding-bottom: 3px;
}
.hmain a
{
 color: White;
 background-image: url(images/collapsed.gif);
 background-repeat: no-repeat;
 background-position: 3px center;
}
.hmain li a
{
 color: Black;
 background-image: none;
}
.hmain ul
{
 display: none;
}
.hmain
{
 float: left;
 margin-right: 1px;
}
</style>

JQuery代码：

<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".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')");
        }
    }
}
</script>

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向菜单</title>
</head>
<body>
<ul>
            <li class="hmain"><a href="#">菜单项1</a>
                <ul>
                    <li><a href="#">子菜单项1_1</a></li>
                    <li><a href="#">子菜单项1_2</a></li>
                    <li><a href="#">子菜单项1_3</a></li>
                </ul>
            </li>
            <li class="hmain"><a href="#">菜单项2</a>
                <ul>
                    <li><a href="#">子菜单项2_1</a></li>
                    <li><a href="#">子菜单项2_2</a></li>
                    <li><a href="#">子菜单项2_3</a></li>
                </ul>
            </li>
            <li class="hmain"><a href="#">菜单项3</a>
                <ul>
                    <li><a href="#">子菜单项3_1</a></li>
                    <li><a href="#">子菜单项3_2</a></li>
                    <li><a href="#">子菜单项3_3</a></li>
                </ul>
            </li>
        </ul>
</body>
</html>

一直在冬眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery【横向菜单】

CSS代码：ul, li{ list-style: none;}ul{ padding: 0; margin: 0;}.hmain{ background-image: url(images/title.gif); background-repeat: repeat-x; width: 120px;}li{ background-color: #eee;}
复制链接

扫一扫