`
backspace
  • 浏览: 137164 次
文章分类
社区版块
存档分类
最新评论

jquery 无限级联菜单

 
阅读更多
<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>

 

0
5
分享到:
评论

相关推荐

    jquery_无限级联菜单 v1.0-源码.zip

    总结来说,"jquery_无限级联菜单 v1.0-源码.zip"提供了一个学习和实践jQuery无限级联菜单的实例。通过阅读源码,我们可以深入理解如何结合DOM操作、事件处理和CSS样式来实现这种交互效果,这对于提升我们的前端开发...

    基于ajax、jquery 通用无限级联菜单

    基于ajax、jquery 通用无限级联菜单; 引用场景: 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例:详细参阅District.Selector.js文件 以国家地理信息为例: $(function () { var ...

    jquery无限级联菜单特效代码

    jquery无限级联菜单无需ajax,纯json数据调用 简单的调用方式 $.getScript(toregion.js,function(){ var ops = { tree_json:regionConf,//json字符串 tree_json_name:regionConf,//json字符串变量名称 tree_obj:$('#...

    jquery-无限级联菜单

    jquery_无限级联菜单,无需ajax,纯json数据调用 简单的调用方式 $.getScript("toregion.js",function(){ var ops = { tree_json:regionConf,//json字符串 tree_json_name:"regionConf",//json字符串变量名称 ...

    jQuery无限级导航菜单效果

    创建jQuery无限级导航菜单的第一步是构建HTML结构。基础的HTML代码应该包含一个`&lt;ul&gt;`元素作为菜单容器,其中包含多个`&lt;li&gt;`元素代表每个菜单项。对于有子级的菜单项,可以在`&lt;li&gt;`元素内嵌套另一个`&lt;ul&gt;`来表示子...

    jQuery无限级树状菜单.zip

    本资源“jQuery无限级树状菜单”是利用jQuery实现的一种动态展示无限层级数据的菜单系统。这个压缩包中可能包含HTML、CSS和JavaScript文件,用于构建一个交互式的树形结构,适用于网站导航或数据分类展示。 首先,...

    jQuery无限级树菜单网页特效

    总之,jQuery无限级树菜单网页特效的实现涉及到数据处理、DOM操作、事件处理和动画效果等多个方面,理解并掌握这些技术对于提升网页交互体验至关重要。通过不断实践和学习,你将能够创建出更加动态、用户友好的网页...

    jQuery Select下拉框无限级联菜单.rar

    《jQuery实现的无限级联下拉菜单》 在网页开发中,级联菜单是一种常见的交互设计,它允许用户通过逐级选择来细化他们的选项。在本案例中,我们讨论的是利用jQuery实现的一个无限级联菜单,它特别适用于Select下拉框...

    jquery 无限级联菜单案例分享

    看到phpcms的地区级联菜单,感觉写的挺有意思,就说说大致步骤,省得忘了。对于地区级联菜单的生成一般是在/data/cache_model/content_form.class.php文件的areaid()函数中。不过,这个只是一个cache至于什么地方...

    jquery_无限级联菜单 v1.0

    jquery_无限级联菜单,无需ajax,纯json数据调用 简单的调用方式 $.getScript("toregion.js",function(){ var ops = { tree_json"regionConf",//json字符串变量名称 tree_obj"areas[]",//select name //tree_...

    AJAX无限级联菜单

    本文将详细探讨“AJAX无限级联菜单”的实现原理、技术细节以及相关的知识点。 1. **AJAX基本原理** AJAX的核心是利用JavaScript创建XMLHttpRequest对象,通过这个对象与服务器进行异步通信。在用户触发某个事件...

    JQuery无限级树源码

    **jQuery无限级树形菜单详解** 在Web开发中,数据的层级结构经常被用来表示具有嵌套关系的信息,如组织架构、目录结构等。无限级树形菜单是一种常见且实用的展示方式,它允许用户逐级展开和浏览这些层级数据。`...

    jquery 无限级下拉菜单

    适用于如区域、多级菜单等有父子关系的数据表; 自动生成多级下拉菜单,并可调用单击事件; //下拉菜单 广东省|惠州市 //数据库表设计 ID NAME FID 1 广东省 0 2 惠州市 1 3 清远市 1

    jQuery无限级ajax加载菜单代码.zip

    【jQuery无限级ajax加载菜单代码】是一个用于创建动态、多级菜单的JavaScript解决方案,它利用了流行的jQuery库和Ajax技术。这个代码的核心在于其能够异步地从服务器获取JSON数据,然后根据这些数据构建出一个可扩展...

    jQuery无限级树菜单

    jQuery实现无限级树,以josn数据做数据源构造无限级 Tree API $.create_tree_html({ id:"Tree", autoOpen: false, width:200, height:200, edit:true, chidren:''}); 参数: id:树在界面中展示位置DIV的ID属性 ...

    简单的jQuery无限级多级导航下拉菜单代码

    此外,对于更复杂的无限级菜单,可以使用递归函数来处理每一级子菜单的展开和收起,确保无论菜单层级多深都能正常工作。 在提供的压缩包中,`index.html`文件包含了HTML结构和内联CSS,展示了如何构建一个多级导航...

    jquery无限级树形菜单源码.zip

    本资源"jquery无限级树形菜单源码.zip"提供了一个利用jQuery实现的无限级树形菜单,对于构建具有深度层级结构的导航系统尤其有用,无论是后台管理界面还是前台侧栏菜单都能适用。该菜单方案考虑了良好的浏览器兼容性...

    jquery无限级联下拉菜单简单实例演示

    总结来说,这个jQuery无限级联下拉菜单的实现利用了jQuery的事件处理、DOM操作和Ajax功能,以动态方式创建和更新下拉菜单。这种设计模式在需要展示和操作树形数据结构的Web应用中非常实用,能够提供流畅的用户体验,...

Global site tag (gtag.js) - Google Analytics