JQuery ajax menu

本文介绍了一个使用HTML、CSS和JavaScript实现的系统管理员菜单配置案例,包括菜单的层级结构及交互效果。通过具体的代码示例展示了如何创建下拉菜单,并利用jQuery简化DOM操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<style type="text/css">
#mainmenu, #mainmenu ul { margin:0; padding:0; list-style:none; list-style-position:outside; position:relative; line-height:1.5em; overflow:hiddne; }
#mainmenu a { display:block; padding:0 5px; border:1px solid honeydew; color:#000000; text-decoration:none; background-color:moccasin; }
#mainmenu a:hover { background-color:#FFFFCC; color:#000000; }
#mainmenu li { margin:0; padding:0; list-style:none; float:left; position:relative; }
#mainmenu ul { position:absolute; display:none; width:18em; top:1.5em; }
#mainmenu li ul a { width:18em; height:auto; float:left; }
#mainmenu ul ul { top:auto; }
#mainmenu li ul ul { left:18em; margin:0 0 0 0px; }
#mainmenu li:hover ul ul, #mainmenu li:hover ul ul ul, #mainmenu li:hover ul ul ul ul { display:none; }
#mainmenu li:hover ul, #mainmenu li li:hover ul, #mainmenu li li li:hover ul, #mainmenu li li li li:hover ul{ display:block; }

</style>
<script type="text/javascript" src="D:/mishu/hisyo/WebRoot/js/jquery.js"></script>
<table width=100% border=0 cellpadding=0 cellspacing=1 align=center><tr bgcolor='moccasin'><td>

<ul id=mainmenu>
<li><a href="#">システム管理者用 » </a>

<ul>
<li><a href="#">ユーザ管理 » </a>

<ul>
<li><a href="javascript:document.form2.action='?win=wmst001';document.form2.submit();">役職メンテナンス</a></li>
<li><a href="javascript:document.form2.action='?win=wmst002';document.form2.submit();">ユーザメンテナンス</a></li>
<li><a href="javascript:document.form2.action='?win=wmst003&usermode=0';document.form2.submit();">グループメンテナンス</a></li>
</ul>
</li>
<li><a href="#">ユーザ管理2 » </a>

<ul>
<li><a href="javascript:document.form2.action='?win=wmst001';document.form2.submit();">役職メンテナンス2</a></li>
<li><a href="javascript:document.form2.action='?win=wmst002';document.form2.submit();">ユーザメンテナンス2</a></li>
<li><a href="javascript:document.form2.action='?win=wmst003&usermode=0';document.form2.submit();">グループメンテナンス2</a></li>
</ul>
</li>


</ul>
</li>

<li><a href="#">システム管理者用2 » </a>

<ul>
<li><a href="#">ユーザ管理 » </a>

<ul>
<li><a href="javascript:document.form2.action='?win=wmst001';document.form2.submit();">役職メンテナンス</a></li>
<li><a href="javascript:document.form2.action='?win=wmst002';document.form2.submit();">ユーザメンテナンス</a></li>
<li><a href="javascript:document.form2.action='?win=wmst003&usermode=0';document.form2.submit();">グループメンテナンス</a></li>
</ul>
</li>
<li><a href="#">ユーザ管理2 » </a>

<ul>
<li><a href="javascript:document.form2.action='?win=wmst001';document.form2.submit();">役職メンテナンス2</a></li>
<li><a href="javascript:document.form2.action='?win=wmst002';document.form2.submit();">ユーザメンテナンス2</a></li>
<li><a href="javascript:document.form2.action='?win=wmst003&usermode=0';document.form2.submit();">グループメンテナンス2</a></li>
</ul>
</li>


</ul>
</li>
</ul>

</td></tr></table>
<script type="text/javascript">

var $j = jQuery.noConflict();

//JQuery控制菜单显示
function mainmenu(){
var $j = jQuery.noConflict();
$j("#mainmenu ul").css({display: "none"}); // Opera Fix
$j("#mainmenu li").hover(
function(){
$j(this).find('ul:first').css({visibility:"visible",display:"none"}).show(400);
},function(){
$j(this).find('ul:first').css({visibility:"hidden"});
});
}
$j(function() {
mainmenu();
});


/* 纯js控制菜单显示
var mainmenu = document.getElementById('mainmenu');
var obj = mainmenu.getElementsByTagName('li');
for(var i=0;i<obj.length;i++){
obj[i].onmouseover=function(){
var obj_sub = this.getElementsByTagName('ul');
if(obj_sub.length>0){
obj_sub[0].style.visibility='visible';
obj_sub[0].style.display ='block';
}
}
obj[i].onmouseout=function(){
var obj_sub = this.getElementsByTagName('ul');
if(obj_sub.length>0){
obj_sub[0].style.visibility='hidden';
}

}
}
*/

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值