JQuery攻略（六）菜单导航

　　jQuery菜单导航的基础应用

此章节有

1.0 页面导航

　　1.01面包屑菜单

　　1.02菜单悬停

　　1.03菜单快捷键

　　1.04两个单独的菜单

　　1.05折叠菜单

1.01面包屑菜单

html

<body>
    <ul id="menu">
        <li><a href="#">Books</a></li>
        <ul>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Programming</a></li>
            <li><a href="#">RDBMS</a></li>
        </ul>
    </ul>
</body>

之后加上CSS和js

.liststyle
{
    background-image: url(../image/1.png);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 30px;
    display: inline;
}

.uliststyle
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}

$(document).ready(function () {
    $('ul').addClass('uliststyle');
    $('ul li ul li').addClass('liststyle');
});

1.02菜单悬停

html 同上，css+js

ul
{
    width: 200px;
}
ul li ul
{
    list-style-type: none;
    margin: 5;
    width: 200px;
}
a
{
    display: block;
    border-bottom: 1px solid #fff;
    text-decoration: none;
    background: #00f;
    color: #fff;
    padding: 0.5em;
}
li
{
    display: inline;
}
.hover
{
    background: #000;
}

$(document).ready(function () {
    $("a").hover(
    function () {
        $(this).addClass("hover");
    },
    function () {
        $(this).removeClass("hover");
    }
     );
});

当鼠标移到菜单某项时，出现介绍

<body>
    <table>
        <tr>
            <td>
                <ul id="menu">
                    <li><a href="#">Books</a>
                        <ul>
                            <li><a id="web" href="#">Web Development</a></li>
                            <li><a id="programming" href="#">Programming</a></li>
                            <li><a id="rdbms" href="#">RDBMS</a></li>
                        </ul>
                    </li>
                </ul>
            </td>
            <td valign="top">
                <p class="web">
                    Web Development</p>
                <p class="programming">
                    Programming</p>
                <p class="rdbms">
                    RDBMS</p>
            </td>
        </tr>
    </table>
</body>

HTML Code

td{ width:300px;}
ul
{
    width: 200px;
}
ul li ul
{
    list-style-type: none;
    margin: 5;
    width: 200px;
}
a
{
    display: block;
    border-bottom: 1px solid #fff;
    text-decoration: none;
    background: #00f;
    color: #fff;
    padding: 0.5em;
}
li
{
    display: inline;
}
.hover
{
    background: #000;
}

CSS Code

$(document).ready(function () {
    //全部隐藏
    $(".web").hide();
    $(".programming").hide();
    $(".rdbms").hide();

    //web
    $("#web").hover(
    function () {
        $(".web").show();
        $(".programming").hide();
        $(".rdbms").hide();
        $(this).addClass("hover");
    },
    function () {
        $(this).removeClass("hover");
    });

    //programming
    $("#programming").hover(
    function () {
        $(".web").hide();
        $(".programming").show();
        $(".rdbms").hide();
        $(this).addClass("hover");
    },
    function () {
        $(this).removeClass("hover");
    });

    //rdbms
    $("#rdbms").hover(
    function () {
        $(".web").hide();
        $(".programming").hide();
        $(".rdbms").show();
        $(this).addClass("hover");
    },
    function () {
        $(this).removeClass("hover");
    }
     );
});

JQuery Code

1.03菜单快捷键

html,css同上

$(document).ready(function () {
    //全部隐藏
    $(".web").hide();
    $(".programming").hide();
    $(".rdbms").hide();

    //web
    $("#web").hover(
        function () {
            $(".web").show();
            $(".programming").hide();
            $(".rdbms").hide();
            $(this).addClass("hover");
        },
        function () {
            $(this).removeClass("hover");
        });

    //programming
    $("#programming").hover(
        function () {
            $(".web").hide();
            $(".programming").show();
            $(".rdbms").hide();
            $(this).addClass("hover");
        },
        function () {
            $(this).removeClass("hover");
        });

    //rdbms
    $("#rdbms").hover(
        function () {
            $(".web").hide();
            $(".programming").hide();
            $(".rdbms").show();
            $(this).addClass("hover");
        },
        function () {
            $(this).removeClass("hover");
        }
     );
    $("body").keypress(
        function (event) {
            var char = String.fromCharCode(event.charCode);
            if (char == "1") {
                $("#web").hover();
            }
            else if (char == "2") {
                $("#programming").hover();
            } else if (char == "3") {
                $("#rdbms").hover();
            }

        });
});

按键盘123键，相当鼠标滑入滑出。

1.04两个单独的菜单

HTML

<body>
    <ul id="menu">
        <li class="menu"><a href="#">Books</a>
            <ul>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Programming</a></li>
                <li><a href="#">RDBMS</a></li>
            </ul>
        </li>
        <li class="menu"><a href="#">Movies</a>
            <ul>
                <li><a href="#">Latest Movie Trailers</a></li>
                <li><a href="#">Movie Reviews</a></li>
                <li><a href="#">Celebrity Interviews</a></li>
            </ul>
        </li>
    </ul>
</body>

CSS

.menu
{
    float: left;
    width: 200px;
    list-style-type: none;
    margin-right: 20px;
}
li.menu ul
{
    margin: 0;
    list-style-type: none;    
    padding-left:0px;
}
li.menu ul li
{
    margin: 1px;    
}
a
{
    width: 200px;
    display: block;
    text-decoration: none;
    background: #00f;
    color: #fff;
    padding: 0.5em;
    border-bottom: 1px solid #ff;
}
ul#menu li a:hover
{
    background: #000;
}

$(document).ready(function () {
    $("li.menu ul", this).hide();

    $("li.menu").hover( //li.menu 是一个<li>标签
        function () {
            $("ul", this).show(); //这里的<ul>是上面<li>的一个子集
        },
        function () {
            $("ul", this).hide();
        });
});

初始的时候只有Books 和 Movies出现，当鼠标移动到Books上时候，下拉出现，鼠标指针区域变成黑色，鼠标下级移开，隐藏

多层

HTML

<body>
    <ul class="menu">
        <li><a href="#">Books</a>
            <ul>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Programming</a>
                    <ul>
                        <li><a href="#">.Net</a></li>
                        <li><a href="#">Jsp</a></li>
                    </ul>
                </li>
                <li><a href="#">RDBMS</a></li>
            </ul>
        </li>
        <li><a href="#">Movies</a>
           <ul>
                <li><a href="#">Latest Movie Trailers</a>
                    <ul>
                        <li><a href="#">Movie 1</a></li>
                        <li><a href="#">Movie 2</a></li>
                        <li><a href="#">Movie 3</a></li></ul>
                </li>
                <li><a href="#">Movie Reviews</a></li>
                <li><a href="#">Celebrity Interviews</a><ul>
                    <li><a href="#">Movie 1</a></li>
                    <li><a href="#">Movie 2</a></li>
                    <li><a href="#">Movie 3</a></li>
                    <li><a href="#">Movie 4</a></li></ul>
                </li>
            </ul>
        </li>
    </ul>
</body>

HTML

CSS

a
{
    width: 200px;
    background: #00f;
    color: #fff;
    border-bottom: 1px solid #fff;
    text-decoration: none;
}
ul
{
    margin: 0px;
    list-style: none;
}
li
{
    line-height: 30px;
}
ul.menu li
{
    float: left;
    margin: 0px 1px;
    width: 200px;
    text-align: center;
}

ul.menu a:hover
{
    background: #000;
}
ul.menu li a
{
    display: block;
    padding: 0px;
    border-right: 1px solid #000;
}

ul.menu ul
{
    padding-left: 0px;
    width: 200px;
    visibility: hidden;
    position: absolute;
}
ul.menu ul li
{
    margin: 1px 0px 0px 0px;
    border-bottom: 1px solid #00;
    text-align: left;
}

ul.menu ul li a
{
    border-right: none;
    width: 100%;
}
ul.menu ul ul
{
    padding-left: 1px;
    left: 100%;
    top: 0;
}
.hover
{
    position: relative;
}

CSS Code

$(document).ready(function () {
    $("ul.menu li").hover(
        function () {
            $(this).addClass("hover"); //鼠标滑入，position: relative;
            $("ul:first", this).css("visibility", "visible");
        },
         function () {
             $(this).removeClass("hover");
             $("ul:first", this).css("visibility", "hidden");
         });
    $("ul.menu li ul li:has(ul)").find("a:first").append("    >");

    //自定义选择器:first,返回指定元素的第一个实例
    //has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。
});

1.05折叠菜单

以折叠式形式显示两个菜单，利用鼠标的上滑下滑，使得鼠标指针所在区域展开，其他关闭隐藏

HTML+CSS

<body>
    <p class="menus">
        Books</p>
    <div class="menuitems">
        <ul>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Programming</a> </li>
            <li><a href="#">RDBMS</a></li>
        </ul>
    </div>
    <p class="menus">
        Movies</p>
    <div class="menuitems">
        <ul>
            <li><a href="#">Latest Movie Trailers</a> </li>
            <li><a href="#">Movie Reviews</a></li>
            <li><a href="#">Celebrity Interviews</a> </li>
        </ul>
    </div>
</body>

.menus
{
    width: 200px;
    padding: 5px;
    margin: 1px 0 0 0;
    font-weight: bold;
    background-color: #0ff;
}
.menuitems
{
    display: none;
}

a
{
    display: block;
    border-bottom: 1px solid #fff;
    text-decoration: none;
    background: #00f;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    width: 190px;
}
.menuitems a:hover
{
    background: #000;
}
li
{
    display: inline;
}
ul
{
    margin: 0;
    padding: 0;
    display: inline;
}

$(document).ready(function () {

    $("p.menus").mouseout(function () {
        $("div.menuitems").slideUp("slow");
        $("p").css({ backgroundImage: "" });
    });

    $("p.menus").mouseover(function () {
        $(this).css(
        {
            "background-Image": "url(../image/down.jpg)",
            "background-repeat": "no-repeat",
            "background-position": "right"
        }
        ).next("div.menuitems").slideDown(500).siblings("div.menuitems").slideUp("slow");

        $(this).siblings().css({ backgroundImage: "" });
    });
});