<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,菜单,jQuery导航条 jQuery Animated Menu 是一款导航条+动感菜单特效,用到你的网页上绝对会增色你的网页,还行吧?
内容索引:脚本资源,jQuery,动感菜单,jQueryTab jquery Navigation Menu 类似TAB一样的动感菜单,把鼠标放菜单上,旁边会出现对应的背景图,还有淡入淡出效果,挺不错的,设计的也很漂亮,国外原版的程序,希望大家...
内容索引:脚本资源,jQuery,上下文菜单,jQuery插件 jQuery Context Menu是jQuery上下文菜单插件,用它可以来做带图标的上下文菜单,简单方便。
摘要:脚本资源,jQuery,亚马逊菜单 一个仿亚马逊菜单的jQuery menu aim多功能菜单插件及实例,可实现类似亚马逊网站的多级展开菜单,本例图片让菜单功能更强大、更美观,这是从官方下载的jQuery menu aim菜单示例包...
#JV jQuery Mobile Menu v2移动菜单,带有基于jQuery和GSAP JS的汉堡包按钮。 ##在结束/ body标签之前添加jQuery,GSAP TweenMax和插件 < script src =" http://code.jquery.com/jquery-1.11.2.min.js " > &...
4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7.jquery强大表单字符输入限制插件jQuery AlphaNumeric下载...
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
内容索引:脚本资源,jQuery,翻转菜单 jQuery Stylish Navigation Menu 会翻转的网站菜单,你把鼠标放到某个菜单项上,它会翻动一下,改变背景色,源码爱好者发过类似的菜单,是国人自写的,比较一下这个国外的菜单,...
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 ...
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 ...
使用jquery技术实现图像菜单,当点击一张图片时可看见全图。
摘要:脚本资源,jQuery,图文菜单 一个基于jQuery的图文菜单——Super slick jQuery menu 图片菜单 Css3,重点是图片菜单的鼠标效果,在鼠标放上的时候图片有较大的变化,或是高亮、或是渐变。插件的重点在于表现CSS3...
屏幕截图登陆页面: 饮食选择: 菜单:建于HTML CSS JavaScript jQuery的特征根据您的饮食偏好和过敏情况,生成一份流行食谱菜单通过按成分搜索或单击每天食谱下方的“下一个”和“上一个”来探索各种食谱如果计划不...
内容索引:脚本资源,jQuery,动画菜单,多级导航 Dropdown Menu 是一款使用了jQuery插件的动感多级导航菜单,好效果不是轻易实现的,它除了实现阴影、动画外,还支持三级的菜单展开,鼠标滑过菜单,会有淡入淡的效果,...
内容索引:脚本资源,jQuery,动感菜单,jQuery插件 jQuery Menu 暖色、动画、折叠,可作导航菜单,用这几个关键词似乎可以形容这款jQuery动感菜单,示例就是一个很好的应用,连同CSS文件一同拷贝至你的WEB项目中即可...
jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客户端。此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。 文中分享的这些实用代码,希望你会喜欢。 1...
form:添加“ajax” “novalidate”和“queryParams”属性; linkbutton:添加“resize”方法 New Plugin(新组件) textbox:该组件是一个增强的输入字段 它可以让用户非常简单的构建一个表单; ...
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 ...
摘要:脚本资源,jQuery,jQuery相册 Moving Boxes Menu是一款菜单,但更像是一款带有JS特效的相册,综合运用了许多常见的网页特效,比如弹出浮动层,JS滚动,淡入淡出效果等,对研究前端JS编程相当有用,你可以把它...
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 ...