`

JQ 实现无限分级导航菜单

无限分级导航菜单JQ无限分级JQ导航菜单 
阅读更多 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="base.css" />
<style type="text/css">
ul.nav{ width: 840px; margin: 20px auto;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li a{height: 40px; line-height: 40px; display: block;}
ul.nav > li > a{ background: #72a7ff;}
ul.nav > li > ul > li a{ background: #ffd9d9;}
ul.nav > li a:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position:  absolute; top: 0; right: -200px;}
ul.nav a.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(arrows.png) no-repeat center center;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
	$("ul.nav li").hover(function(){
		$(this).addClass("on");
	},function(){
		$(this).removeClass("on");
	});
	$("ul.nav li").hover(function(){
		$(this).parent("ul").siblings("a").addClass("choice");
	},function(){
		$(this).parent("ul").siblings("a").removeClass("choice");
	});
	if ($("ul.nav li").find("ul") .html()!="") {
		$("ul.nav li").parent("ul").siblings("a").append("<a class='sub'></a>");
	}
});
</script>
<ul class="nav">
  <li><a href="###">我的网站</a>
    <ul>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a>
              <ul>
                <li><a href="###">4级分类</a>
                  <ul>
                    <li><a href="###">5级分类</a></li>
                    <li><a href="###">5级分类</a></li>
                    <li><a href="###">5级分类</a></li>
                    <li><a href="###">5级分类</a></li>
                  </ul>
                </li>
                <li><a href="###">4级分类</a></li>
                <li><a href="###">4级分类</a></li>
                <li><a href="###">4级分类</a></li>
              </ul>
            </li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><a href="###">我的网站</a>
    <ul>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><a href="###">我的网站</a>
    <ul>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><a href="###">我的网站</a>
    <ul>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
        <li><a href="###">2级分类</a>
          <ul>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
            <li><a href="###">3级分类</a></li>
          </ul>
        </li>
    </ul>
  </li>
</ul>
</body>
</html>

 
效果图：

 

 

 

 

 

  • 大小: 44.1 KB
1
顶
0
踩
分享到：
| JS 四种函数调用模式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jq实现动画导航菜单.zip

    jq实现动画导航菜单拥有三种不同颜色的动画导航，鼠标经过时带有弹窗提示效果，支持左右滑动。 jq实现动画导航菜单 点击查看演示

    3个用jq实现的动态效果导航菜单.rar

    3个用jQuery实现的动画版导航菜单，各有各的特点： 　范例菜单一特点：用背景图实现（带圆角，注意图的做法，两张或整合成），主要用于导航栏项目文字长短不一的情况（不定宽！） 　范例菜单二特点：用背景图或...

    jq垂直手风琴导航菜单

    在实现jq垂直手风琴导航菜单的过程中，开发者还需要考虑性能优化，避免过度使用DOM操作，以及代码的模块化和可维护性。通过理解这些知识点，你可以创建出既美观又实用的导航菜单，提升网站的整体用户体验。在提供的...

    用JQ实现导航菜单的下拉收起效果

    本教程将详细介绍如何使用jQuery（简称JQ）来实现一个动态的导航菜单，其中包括下拉和收起的效果。 首先，理解jQuery库的基础知识至关重要。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画...

    jq导航菜单（下拉菜单）

    整理了一个js导航，最近正在做这个，其实看起来很简单，但是做起来还是要动下脑筋的，有用的去下载，也是找的别人的

    jq实现下拉菜单效果 jq二级菜单效果.zip

    在网页设计中，下拉菜单是一种常见的交互元素，它能够有效地组织和展示大量的导航选项，提高用户体验。jQuery（jq）作为一个轻量级的JavaScript库，因其简洁的API和丰富的插件，成为实现这种效果的首选工具。本示例...

    JQ导航弹性下拉菜单

    JQ导航弹性下拉菜单就实现了这一功能，通过jQuery的事件监听和DOM操作，使得菜单在用户交互时展现出平滑的过渡效果，增强了用户的操作感。 **jQuery库**是JavaScript的一个轻量级框架，它简化了DOM操作，提供了丰富...

    jq+css实现竖向导航栏

    "jq+css实现竖向导航栏"是指利用JavaScript库jQuery和层叠样式表(CSS)来创建一种垂直布局的导航菜单，这种菜单通常被称为“竖向导航栏”或“侧边栏”。下面将详细介绍如何使用jQuery和CSS来实现这一功能。 首先，让...

    jquery实现无限分级横向导航菜单的方法

    本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下： 1. jquery插件版本代码如下： 复制代码 代码如下:(function($){  $.fn.extend({  droplinemenu: function...

    jQ波浪动画导航菜单

    【描述】"动画导航菜单 jQ波浪动画导航菜单 网站导航条"描述的是该菜单的核心特点，即利用jQuery库实现的动画效果。这种波浪动画不仅增强了用户体验，还能使网站的导航部分在视觉上与传统的静态导航条区分开来。网站...

    无限级CSS+JQ导航菜单兼容包括IE6在内的主流浏览器

    如果不打算兼容ie6，那么把jq删除后，就是纯css写的无限级横向下拉导航菜单，经测试，暂未发现不兼容的浏览器。目前演示页已经添加到十一级导航！还可添加更多，代码非常简单，就是一直嵌套，样式也非常少，简单明了...

    JQ 导航下拉菜单

    《JQ导航下拉菜单详解》 在网页设计中，导航菜单是不可或缺的一部分，它能够帮助用户快速定位和访问网站的不同部分。而JQuery（简称JQ）作为一款强大的JavaScript库，提供了丰富的功能来实现交互式的导航菜单，尤其...

    jq实现左右导航栏中间图片的切换.zip

    在本项目"jq实现左右导航栏中间图片的切换.zip"中，主要涉及的是使用JavaScript的jQuery库来实现在网页上动态切换位于左右导航栏中间的图片。jQuery是一种广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、...

    JQ 最少代码实现导航的下拉菜单

    在本文中，我们将深入探讨如何使用JavaScript库JQuery（简称JQ）来创建一个高效的、最少代码实现的导航栏下拉菜单。下拉菜单在现代网页设计中是必不可少的元素，它能帮助用户轻松访问网站的多层次结构。下面，我们将...

    唯品会jq导航栏动态演示.rar

    【唯品会jq导航栏动态演示.rar】是一个包含JavaScript（js）和jQuery（jq）技术的项目，主要用于实现一种常见的网页交互效果——导航栏的动态跟随。这种效果常见于许多电商平台，如唯品会，当用户滚动页面时，导航栏...

    jq侧边导航栏

    使用jQuery（简称jq）实现侧边栏导航栏，可以利用jQuery的强大功能和简洁的API，来实现动态效果和交互性。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互等任务。在jq侧边栏的...

    jQ Metro导航菜单 jQ Metro导航菜单代码下载.zip

    描述中的"jQ Metro导航菜单代码下载.zip"表明这是一个包含了实现jQ Metro导航菜单的源代码压缩包。用户可以下载此zip文件，解压后获取到必要的HTML、CSS和JavaScript文件，用于在自己的项目中集成并自定义这个导航...

    jQuery手机端无限级导航下拉菜单代码

    总结来说，"jQuery手机端无限级导航下拉菜单代码"利用jQuery库，通过JavaScript和CSS实现了一个可无限扩展的移动端导航菜单。这个菜单不仅节省了屏幕空间，还提供了流畅的用户交互体验，是移动应用和网站导航设计的...

    jQuery实现的动态伸缩导航菜单实例

    在介绍jQuery实现的动态伸缩导航菜单实例中，我们首先需要了解jQuery这个前端开发常用的JavaScript库。jQuery极大的简化了JavaScript编程，尤其在处理文档结构、事件处理、动画效果以及Ajax交互等方面提供了简便的...

Magicbox
Global site tag (gtag.js) - Google Analytics