JQuery ajax menu

最新推荐文章于 2021-08-06 17:03:33 发布

原创最新推荐文章于 2021-08-06 17:03:33 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #Ajax #CSS #J# #Opera #ViewUI

JS/AJAX 专栏收录该内容

13 篇文章

订阅专栏

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

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