`
toyota2006
  • 浏览: 551415 次
  • 性别: 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-wheel-menu备份

    《jQuery Wheel Menu 深入解析与应用》 在网页设计和开发中,菜单系统是不可或缺的一部分,它为用户提供了直观且高效的导航体验。jQuery Wheel Menu 是一款独特的菜单插件,以其旋转轮盘式的交互设计,给用户带来...

    四个漂亮的jquery menu

    在网页设计中,jQuery Menu是一种常见的交互元素,用于创建动态、响应式的下拉导航菜单。jQuery库的强大功能和简洁API使得开发这样的菜单变得更加容易。本文将深入探讨标题为"四个漂亮的jquery menu"的相关知识点,...

    动态菜单jquery.menu-1.0

    jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery.menu-1.0 插件利用 jQuery 的强大功能,实现了动态菜单的各种效果,如滑动展开、淡入淡出等,同时支持多级...

    jquery菜单显示 ajax刷新

    在名为"jquerymenu"的压缩包文件中,可能包含了一个示例项目,该项目展示了如何结合以上技术创建一个动态菜单。这个项目可能包括HTML文件(定义菜单结构)、CSS文件(美化菜单样式)、jQuery脚本(控制菜单行为)...

    jquery.wheelmenu--导航轮菜单demo

    jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery的核心特性包括选择器、DOM操作、事件处理和动画,这使得开发者能够快速编写出简洁且强大的JavaScript代码。 #...

    jquery右键菜单插件jquery-menu

    jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的核心特性是它强大的选择器引擎,这使得开发者能够以直观的方式选取DOM元素。此外,jQuery还提供了丰富的API,...

    jQuery滚动菜单插件Section Menu

    jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery的核心功能包括选择器(用于查找DOM元素)、DOM操作(添加、删除或修改元素)和事件处理(绑定和触发事件)。 ...

    jquery-X-Menu

    - jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画以及 Ajax 操作。 - jQuery 的核心概念包括选择器(用于选取 HTML 元素)、DOM 操作(如添加、删除和修改元素)和事件处理...

    ajax jquery开发例子

    **Ajax与jQuery开发详解** Ajax(Asynchronous JavaScript and XML)技术是现代Web开发中的关键组成部分,它允许在不刷新整个页面的情况下与服务器进行交互,提高了用户体验。jQuery是一个强大的JavaScript库,简化...

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

    jQuery Animated Menu 是一个专为此目的设计的特效库,它结合了JavaScript(尤其是jQuery库)和Ajax技术,为网页创建交互式、动画化的导航条。这个特效库适用于那些希望他们的网站导航更加生动、吸引用户的开发者。 ...

    jQueryMenu

    jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery的核心特性包括选择器(用于高效地找到HTML元素)、链式调用(在单个语句中执行多个操作)和封装异步请求等。jQuery...

    JQuery 模仿mac dock menu

    jQuery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript代码的编写,特别是处理DOM(文档对象模型)操作、事件处理、动画效果以及Ajax交互等方面。通过使用jQuery,开发者可以更轻松地实现复杂...

    基于jQuery 开发的几个组件 (Table, Grid ,Menu ,Layout)

    在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。本文将深入探讨如何使用jQuery开发四个关键的前端组件:Table、Grid、Menu和Layout,以提高Web应用的用户体验...

    jQuery Menu Style 16 (Tomato) APYCOM 破解

    jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery使得开发者能够用更少的代码实现更多的功能,极大地提高了开发效率。 **jQuery Menu Style 16** APYCOM的jQuery Menu...

    基于jQuery的AJAX水平走马灯滚动导航菜单

    本项目"基于jQuery的AJAX水平走马灯滚动导航菜单"正是这种理念的应用实例,它利用jQuery库的便利性和AJAX的异步通信能力,为用户带来流畅的水平滚动体验。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM...

    JqueryMenu2级导航菜单集

    首先,jQuery 是一个轻量级的、高性能的 JavaScript 库,它的目标是简化HTML文档遍历、事件处理、动画和Ajax交互。使用 jQuery 创建导航菜单的优势在于它可以简化原本复杂的JavaScript代码,使得开发者能够更专注于...

    jquery 导航菜单 menu

    jQuery 是一个轻量级的库,它简化了 JavaScript 的许多操作,如选择元素、事件处理、动画效果以及 AJAX 请求。在创建导航菜单时,jQuery 可以帮助我们轻松地选中菜单项、添加事件监听器以及实现动态效果。 ...

    ajax实现级联菜单的类子

    例如,使用jQuery库可以简化这个过程: ```javascript var menu = $('&lt;ul&gt;'); for (var i = 0; i ; i++) { var item = $('&lt;li&gt;').text(data[i].name); if (data[i].children) { item.append(createSubmenu...

    MVC+jquery+ajax+mssql无线树菜单

    综上所述,这个项目使用了MVC架构来分离业务逻辑、数据管理和用户界面,通过jQuery实现了前端的交互效果,利用Ajax技术实现了无刷新的动态加载,同时依托于SQL Server数据库存储和管理树菜单的数据。通过对这些技术...

    jquery menu

    jQuery是一款轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画效果和Ajax交互。jQuery的核心特性是选择器,通过它,开发者可以方便地选取DOM元素,并进行一系列的操作。此外,jQuery还提供了...

Global site tag (gtag.js) - Google Analytics