<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul').show(); $(this).focus().addClass('focusa') },function(){ $(this).children('ul').hide(); $(this).focus().removeClass('focusa'); }); }); </script> <style type="text/css"> ul{ list-style:none; margin:0; padding:0;} .menu { height:30px; line-height:30px; } .menu li { float:left; position:relative;} /*这一级是导航*/ .menu li a { display:block; height:30px; line-height:30px; padding:0 20px; } .menu li a:hover { color:#000; background:url(img/bg1.png); } .menu li a.more { background:url(img/there.png) no-repeat 130px center; } .menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*这是第二级菜单*/ .menu li ul a { width:110px; } .menu li ul a:hover { background:url(img/bg1.png);} .menu li ul ul{ top:0;left:150px;} /*从第三级菜单开始,所有的子级菜单都相对偏移*/ </style> <ul class="menu"> <li><a href="#">菜单一</a> <ul class="one"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a></li> <li><a href="#" class="more">菜单五</a> <ul class="two"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a></li> <li><a href="#" class="more">菜单五</a> <ul class="three"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a></li> <li><a href="#" class="more">菜单五</a> <ul class="four"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单五</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">菜单二</a> <ul class="one"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#" class="more">菜单三</a> <ul class="two"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#" class="more">菜单三</a> <ul class="three"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单五</a></li> </ul> </li> <li><a href="#">菜单四</a></li> </ul> </li> </ul> </li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单五</a> <ul class="one"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> </ul> </li> </ul>
相关推荐
总结来说,"jquery_无限级联菜单 v1.0-源码.zip"提供了一个学习和实践jQuery无限级联菜单的实例。通过阅读源码,我们可以深入理解如何结合DOM操作、事件处理和CSS样式来实现这种交互效果,这对于提升我们的前端开发...
基于ajax、jquery 通用无限级联菜单; 引用场景: 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例:详细参阅District.Selector.js文件 以国家地理信息为例: $(function () { var ...
jquery无限级联菜单无需ajax,纯json数据调用 简单的调用方式 $.getScript(toregion.js,function(){ var ops = { tree_json:regionConf,//json字符串 tree_json_name:regionConf,//json字符串变量名称 tree_obj:$('#...
jquery_无限级联菜单,无需ajax,纯json数据调用 简单的调用方式 $.getScript("toregion.js",function(){ var ops = { tree_json:regionConf,//json字符串 tree_json_name:"regionConf",//json字符串变量名称 ...
创建jQuery无限级导航菜单的第一步是构建HTML结构。基础的HTML代码应该包含一个`<ul>`元素作为菜单容器,其中包含多个`<li>`元素代表每个菜单项。对于有子级的菜单项,可以在`<li>`元素内嵌套另一个`<ul>`来表示子...
本资源“jQuery无限级树状菜单”是利用jQuery实现的一种动态展示无限层级数据的菜单系统。这个压缩包中可能包含HTML、CSS和JavaScript文件,用于构建一个交互式的树形结构,适用于网站导航或数据分类展示。 首先,...
总之,jQuery无限级树菜单网页特效的实现涉及到数据处理、DOM操作、事件处理和动画效果等多个方面,理解并掌握这些技术对于提升网页交互体验至关重要。通过不断实践和学习,你将能够创建出更加动态、用户友好的网页...
《jQuery实现的无限级联下拉菜单》 在网页开发中,级联菜单是一种常见的交互设计,它允许用户通过逐级选择来细化他们的选项。在本案例中,我们讨论的是利用jQuery实现的一个无限级联菜单,它特别适用于Select下拉框...
看到phpcms的地区级联菜单,感觉写的挺有意思,就说说大致步骤,省得忘了。对于地区级联菜单的生成一般是在/data/cache_model/content_form.class.php文件的areaid()函数中。不过,这个只是一个cache至于什么地方...
jquery_无限级联菜单,无需ajax,纯json数据调用 简单的调用方式 $.getScript("toregion.js",function(){ var ops = { tree_json"regionConf",//json字符串变量名称 tree_obj"areas[]",//select name //tree_...
本文将详细探讨“AJAX无限级联菜单”的实现原理、技术细节以及相关的知识点。 1. **AJAX基本原理** AJAX的核心是利用JavaScript创建XMLHttpRequest对象,通过这个对象与服务器进行异步通信。在用户触发某个事件...
**jQuery无限级树形菜单详解** 在Web开发中,数据的层级结构经常被用来表示具有嵌套关系的信息,如组织架构、目录结构等。无限级树形菜单是一种常见且实用的展示方式,它允许用户逐级展开和浏览这些层级数据。`...
适用于如区域、多级菜单等有父子关系的数据表; 自动生成多级下拉菜单,并可调用单击事件; //下拉菜单 广东省|惠州市 //数据库表设计 ID NAME FID 1 广东省 0 2 惠州市 1 3 清远市 1
【jQuery无限级ajax加载菜单代码】是一个用于创建动态、多级菜单的JavaScript解决方案,它利用了流行的jQuery库和Ajax技术。这个代码的核心在于其能够异步地从服务器获取JSON数据,然后根据这些数据构建出一个可扩展...
jQuery实现无限级树,以josn数据做数据源构造无限级 Tree API $.create_tree_html({ id:"Tree", autoOpen: false, width:200, height:200, edit:true, chidren:''}); 参数: id:树在界面中展示位置DIV的ID属性 ...
此外,对于更复杂的无限级菜单,可以使用递归函数来处理每一级子菜单的展开和收起,确保无论菜单层级多深都能正常工作。 在提供的压缩包中,`index.html`文件包含了HTML结构和内联CSS,展示了如何构建一个多级导航...
本资源"jquery无限级树形菜单源码.zip"提供了一个利用jQuery实现的无限级树形菜单,对于构建具有深度层级结构的导航系统尤其有用,无论是后台管理界面还是前台侧栏菜单都能适用。该菜单方案考虑了良好的浏览器兼容性...
总结来说,这个jQuery无限级联下拉菜单的实现利用了jQuery的事件处理、DOM操作和Ajax功能,以动态方式创建和更新下拉菜单。这种设计模式在需要展示和操作树形数据结构的Web应用中非常实用,能够提供流畅的用户体验,...