您的位置:首页 - 教程 - jQuery - 正文
Jquery实战——横纵向的菜单

  横纵向的菜单效果,点击纵向菜单显示其子菜单。鼠标指向横菜单的时候。显示其子菜单,鼠标离开,子菜单隐藏。

  HTML代码:

<span style="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="css/menu.css" rel="stylesheet" />
    <script src="js/JQuery.js"></script>
    <script src="js/menu.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="#">菜单项32</a></li>
            </ul>
        </li>
    </ul>
    <br />
    <br />
    <br />

     <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="#">菜单项32</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
</span>

  CSS代码:

<span style="font-size:18px;">body {
}
ul,li{
    /*清除菜单前面的点和圈*/
    list-style:none;
 
}
ul {
    padding:0;
    margin:0;
}
.main ,.hmain {
    background-image:url(../images/title.gif);
    background-repeat:repeat-x;
    width:100px;
}
li{
    background-color:#999;
}
a{
    /*取消全部的下划线*/
       text-decoration:none;
       padding-left:15px;
       display:block ;   /*让a标签充满这个区域*/
       /*针对IE6*/
       display:inline-block;
       width:85px;
       padding-top:3px;
       padding-bottom:3px;
}
.main a , .hmain a{
    color:white;
    background-image:url(../images/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;
}
.hmain{
    float:left;
    margin-left:1px;
}</span>

  JQuery代码:

<span style="font-size:18px;">$(function () {
    $(".main > a , .hmain > 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");//slow, fast, 500
        //ulNode.hide();
        //ulNode.toggle();//显示和隐藏。自己主动推断

        //ulNode.slideDown("slow");//显示
        //ulNode.slideUp();//隐藏

        ulNode.slideToggle();
        changeIcon($(this));
    });

    $(".hmain").hover(function () {
        $(this).children("ul").show("fast");
        changeIcon($(this).children("a"));
    }, function () {
        $(this).children("ul").hide("fast");
        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)");
        }
    }

}</span>

1.HTML总结:

1.页面中的菜单项能够通过嵌套ul和li来表示

2.CSS总结:

1.list-style属性为none时能够清除ul和li前面的小圆点

2.能够使用background-repeat来控制背景图的反复填充方式

3. text-decoration属性值为none时,能够取消文字上的下划线

4,.display的值为none能够用于隐藏元素

3.JQuery总结:

1.  .main a 和 .main >a不同之处是。前者选择使用了.main的这个class的元素内部的全部的a节点,后者仅仅选择了.main的子节点中的a节点

2.  show,hide方法能够用于显示或隐藏元素,。没有參数时的效果和改动CSS的display属性效果一样。

參数能够是单位为毫秒的数字。或者是‘slow’。‘normal’,‘fast’这三个文字都能够来控制完毕显示或隐藏须要的时间。

3.toggle方法更为强大,能够省去推断元素是显示还是隐藏的状态。能够让显示的元素隐藏起来,能够让隐藏的元素显示出来,參数用法和show,hide同样。







评论: