Jquery实战——横纵向的菜单

页面导航:首页 > 网络编程 > JavaScript > Jquery实战——横纵向的菜单

Jquery实战——横纵向的菜单

来源: 作者: 时间:2016-02-20 09:49 【

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

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

  HTML代码:




    
    横纵向的菜单
    
    <script src="js/JQuery.js"></script>
    <script src="js/menu.js"></script>


    




  代码:

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;
}

  JQuery代码:

$(function () {
    $(".main > a , .hmain > a").click(function () {
        //找到主菜单对应的子菜单
        var ulNode = $(this).next("ul");
        //if (ulNode.css("display") == "none") {
        //     ulNode.css("display", "block");
        /
                
                
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<