<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>
分享到:
相关推荐
《jQuery Wheel Menu 深入解析与应用》 在网页设计和开发中,菜单系统是不可或缺的一部分,它为用户提供了直观且高效的导航体验。jQuery Wheel Menu 是一款独特的菜单插件,以其旋转轮盘式的交互设计,给用户带来...
在网页设计中,jQuery Menu是一种常见的交互元素,用于创建动态、响应式的下拉导航菜单。jQuery库的强大功能和简洁API使得开发这样的菜单变得更加容易。本文将深入探讨标题为"四个漂亮的jquery menu"的相关知识点,...
jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery.menu-1.0 插件利用 jQuery 的强大功能,实现了动态菜单的各种效果,如滑动展开、淡入淡出等,同时支持多级...
在名为"jquerymenu"的压缩包文件中,可能包含了一个示例项目,该项目展示了如何结合以上技术创建一个动态菜单。这个项目可能包括HTML文件(定义菜单结构)、CSS文件(美化菜单样式)、jQuery脚本(控制菜单行为)...
jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery的核心特性包括选择器、DOM操作、事件处理和动画,这使得开发者能够快速编写出简洁且强大的JavaScript代码。 #...
jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的核心特性是它强大的选择器引擎,这使得开发者能够以直观的方式选取DOM元素。此外,jQuery还提供了丰富的API,...
jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery的核心功能包括选择器(用于查找DOM元素)、DOM操作(添加、删除或修改元素)和事件处理(绑定和触发事件)。 ...
- jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画以及 Ajax 操作。 - jQuery 的核心概念包括选择器(用于选取 HTML 元素)、DOM 操作(如添加、删除和修改元素)和事件处理...
**Ajax与jQuery开发详解** Ajax(Asynchronous JavaScript and XML)技术是现代Web开发中的关键组成部分,它允许在不刷新整个页面的情况下与服务器进行交互,提高了用户体验。jQuery是一个强大的JavaScript库,简化...
jQuery Animated Menu 是一个专为此目的设计的特效库,它结合了JavaScript(尤其是jQuery库)和Ajax技术,为网页创建交互式、动画化的导航条。这个特效库适用于那些希望他们的网站导航更加生动、吸引用户的开发者。 ...
jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery的核心特性包括选择器(用于高效地找到HTML元素)、链式调用(在单个语句中执行多个操作)和封装异步请求等。jQuery...
jQuery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript代码的编写,特别是处理DOM(文档对象模型)操作、事件处理、动画效果以及Ajax交互等方面。通过使用jQuery,开发者可以更轻松地实现复杂...
在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。本文将深入探讨如何使用jQuery开发四个关键的前端组件:Table、Grid、Menu和Layout,以提高Web应用的用户体验...
jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery使得开发者能够用更少的代码实现更多的功能,极大地提高了开发效率。 **jQuery Menu Style 16** APYCOM的jQuery Menu...
本项目"基于jQuery的AJAX水平走马灯滚动导航菜单"正是这种理念的应用实例,它利用jQuery库的便利性和AJAX的异步通信能力,为用户带来流畅的水平滚动体验。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM...
首先,jQuery 是一个轻量级的、高性能的 JavaScript 库,它的目标是简化HTML文档遍历、事件处理、动画和Ajax交互。使用 jQuery 创建导航菜单的优势在于它可以简化原本复杂的JavaScript代码,使得开发者能够更专注于...
jQuery 是一个轻量级的库,它简化了 JavaScript 的许多操作,如选择元素、事件处理、动画效果以及 AJAX 请求。在创建导航菜单时,jQuery 可以帮助我们轻松地选中菜单项、添加事件监听器以及实现动态效果。 ...
例如,使用jQuery库可以简化这个过程: ```javascript var menu = $('<ul>'); for (var i = 0; i ; i++) { var item = $('<li>').text(data[i].name); if (data[i].children) { item.append(createSubmenu...
综上所述,这个项目使用了MVC架构来分离业务逻辑、数据管理和用户界面,通过jQuery实现了前端的交互效果,利用Ajax技术实现了无刷新的动态加载,同时依托于SQL Server数据库存储和管理树菜单的数据。通过对这些技术...
jQuery是一款轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画效果和Ajax交互。jQuery的核心特性是选择器,通过它,开发者可以方便地选取DOM元素,并进行一系列的操作。此外,jQuery还提供了...