Jquery系列之横向纵向菜单

jsp页面

创新互联公司是一家集网站建设,乌鲁木齐企业网站建设,乌鲁木齐品牌网站建设,网站定制,乌鲁木齐网站建设报价,网络营销,网络优化,乌鲁木齐网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link type="text/css" rel="stylesheet" href="css/menu.css"></link> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="js/menu.js"></script> 
<title>横向纵向菜单</title> 
</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>

css样式

ul,li{  
    /*清除ul和li上默认的小圆点*/ 
    list-style: none;  
}  
 
ul {  
    /*清除子菜单的缩进值*/ 
    padding: 0;  
    margin: 0;  
}  
.main,.hmain {  
    background-p_w_picpath: url(../p_w_picpaths/title.gif);  
    background-repeat: repeat-x;  
    width: 120px;  
}  
li {  
    background-color: #EEEEEE;  
}  
a {  
    /*取消所有的下划线*/ 
    text-decoration: none;  
    padding-left: 20px;  
    display: block;  
    display: inline-block;  
    width: 100px;  
    padding-top: 3px;  
    padding-bottom: 3px;  
}  
.main a, .hmain a {  
    color: white;  
    background-p_w_picpath: url(../p_w_picpaths/collapsed.gif);  
    background-repeat: no-repeat;  
    background-position: 3px center;  
}  
.main li a, .hmain li a {  
    color: black;  
    background-p_w_picpath: none;  
}  
.main ul, .hmain ul {  
    display: none;  
}  
.hmain {  
    float: left;  
    margin-right: 1px;  
}

Jquery代码

$(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("slow");//normal fast 
        //ulNode.hide(); 
        //ulNode.toggle(); 
        // 
        //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-p_w_picpath").indexOf("collapsed.gif") >= 0) {  
            mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");  
        } else {  
            mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");  
        }  
    }  
}

网站名称：Jquery系列之横向纵向菜单
路径分享：https://www.cdcxhl.com/article14/gpphde.html

成都网站建设公司_创新互联，为您提供定制网站、响应式网站、域名注册、企业网站制作、网站策划、网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容