`
toyota2006
  • 浏览: 545849 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

JQuery ajax menu

阅读更多
<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="#">システム管理者用&nbsp;&raquo;&nbsp;</a>

	<ul>
                 <li><a href="#">ユーザ管理&nbsp;&raquo;&nbsp;</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&nbsp;&raquo;&nbsp;</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&nbsp;&raquo;&nbsp;</a>

	<ul>
                 <li><a href="#">ユーザ管理&nbsp;&raquo;&nbsp;</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&nbsp;&raquo;&nbsp;</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>


分享到:
评论

相关推荐

    jQuery Animated Menu 导航条+动感菜单特效

    内容索引:脚本资源,jQuery,菜单,jQuery导航条 jQuery Animated Menu 是一款导航条+动感菜单特效,用到你的网页上绝对会增色你的网页,还行吧?

    jquery Navigation Menu 类似TAB一样的动感菜单

    内容索引:脚本资源,jQuery,动感菜单,jQueryTab jquery Navigation Menu 类似TAB一样的动感菜单,把鼠标放菜单上,旁边会出现对应的背景图,还有淡入淡出效果,挺不错的,设计的也很漂亮,国外原版的程序,希望大家...

    jQuery Context Menu 菜单插件 v1.0

    内容索引:脚本资源,jQuery,上下文菜单,jQuery插件 jQuery Context Menu是jQuery上下文菜单插件,用它可以来做带图标的上下文菜单,简单方便。

    jQuery menu aim多功能菜单插件及实例

    摘要:脚本资源,jQuery,亚马逊菜单 一个仿亚马逊菜单的jQuery menu aim多功能菜单插件及实例,可实现类似亚马逊网站的多级展开菜单,本例图片让菜单功能更强大、更美观,这是从官方下载的jQuery menu aim菜单示例包...

    jv-jquery-mobile-menu:一个基于jQuery和GSAP JS的简单移动菜单

    #JV jQuery Mobile Menu v2移动菜单,带有基于jQuery和GSAP JS的汉堡包按钮。 ##在结束/ body标签之前添加jQuery,GSAP TweenMax和插件 &lt; script src =" http://code.jquery.com/jquery-1.11.2.min.js " &gt; &...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7.jquery强大表单字符输入限制插件jQuery AlphaNumeric下载...

    jQuery EasyUI 1.4 离线简体中文API文档

    jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...

    jQuery Stylish Navigation Menu 会翻转的网站菜单

    内容索引:脚本资源,jQuery,翻转菜单 jQuery Stylish Navigation Menu 会翻转的网站菜单,你把鼠标放到某个菜单项上,它会翻动一下,改变背景色,源码爱好者发过类似的菜单,是国人自写的,比较一下这个国外的菜单,...

    Smashing jQuery.pdf

    advanced topics such as working with and creating plug-ins, writing jQuery to handle Ajax requests, or working with jQuery mobile apps. Part 4 delves into these advanced topics. Plus, I include a ...

    精通jquery 2.0(2013年10月版)

    Chapter 23: Using the Menu and Tooltip Widgets 621 Chapter 24: Using the Drag-and-Drop Interactions 653 Chapter 25: Using the Other Interactions 683 Chapter 26: Refactoring the Example: Part III ...

    使用用jquer技术实现的imagemenu

    使用jquery技术实现图像菜单,当点击一张图片时可看见全图。

    Super slick jQuery menu 图片菜单 Css3

    摘要:脚本资源,jQuery,图文菜单 一个基于jQuery的图文菜单——Super slick jQuery menu 图片菜单 Css3,重点是图片菜单的鼠标效果,在鼠标放上的时候图片有较大的变化,或是高亮、或是渐变。插件的重点在于表现CSS3...

    CrunchTime-Menu-Generator:使用JavaScript,jQuery和AJAX构建的菜单生成器应用

    屏幕截图登陆页面: 饮食选择: 菜单:建于HTML CSS JavaScript jQuery的特征根据您的饮食偏好和过敏情况,生成一份流行食谱菜单通过按成分搜索或单击每天食谱下方的“下一个”和“上一个”来探索各种食谱如果计划不...

    Dropdown Menu 动感多级导航菜单jQuery插件版

    内容索引:脚本资源,jQuery,动画菜单,多级导航 Dropdown Menu 是一款使用了jQuery插件的动感多级导航菜单,好效果不是轻易实现的,它除了实现阴影、动画外,还支持三级的菜单展开,鼠标滑过菜单,会有淡入淡的效果,...

    jQuery Menu 暖色、动画、折叠,可作导航菜单

    内容索引:脚本资源,jQuery,动感菜单,jQuery插件 jQuery Menu 暖色、动画、折叠,可作导航菜单,用这几个关键词似乎可以形容这款jQuery动感菜单,示例就是一个很好的应用,连同CSS文件一同拷贝至你的WEB项目中即可...

    8个超实用的jQuery功能代码分享

    jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客户端。此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。 文中分享的这些实用代码,希望你会喜欢。 1...

    jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    form:添加“ajax” “novalidate”和“queryParams”属性; linkbutton:添加“resize”方法 New Plugin(新组件) textbox:该组件是一个增强的输入字段 它可以让用户非常简单的构建一个表单; ...

    Jquery_EasyUI教程

    o 9.1 Ajax方式发送表单 58 o 9.2 给表单添加复合tree字段 59 o 9.3 验证表单 62 • 10 Documentation文档 65 o 10.1 Base 65  10.1.1 EasyLoader 66  10.1.2 Draggable 67  10.1.3 Droppable 69  ...

    Moving Boxes Menu 很漂亮的jQuery相册+菜单

    摘要:脚本资源,jQuery,jQuery相册 Moving Boxes Menu是一款菜单,但更像是一款带有JS特效的相册,综合运用了许多常见的网页特效,比如弹出浮动层,JS滚动,淡入淡出效果等,对研究前端JS编程相当有用,你可以把它...

    20款非常优秀的 jQuery 工具提示插件 推荐

    jQuery Horizontal Tooltips Menu Tutorials  4. Coda Popup Bubble  5. The Tooltip  6. TipTip  7. (mb)Tooltip  8. vTip   9. Awesomeness  10. jQuery Ajax Tooltip  11. Digg-style post ...

Global site tag (gtag.js) - Google Analytics