`

jquery 制作二级菜单

 
阅读更多
<div id="menu">
       <ul>
   <li><a href="#">神界危机5.0</a>
          <ul>
           <li><a href="#">守护天使</a></li>
           <li><a href="#">火焰战士</a>
             <ul><li><a href="#">红缨龙刀</a></li></ul></li>
           <li><a href="#">血精灵剑圣</a></li>
          </ul>
   </li>
     <li><a href="#">火影忍者CD</a>
          <ul>
           <li><a href="#">宇智波鼬</a>
             <ul>
             <li><a href="#">万花筒写轮眼</a></li>
              <li><a href="#">尸鬼封尽</a></li>
             </ul></li>
           <li><a href="#">二代目火影</a>
             <ul><li><a href="#">幻龙九封尽</a></li>
             <li><a href="#">幻龙九封尽</a></li></ul>
             </li>
           <li><a href="#">深作+志麻</a></li>
          </ul>
   </li>
       </ul>
    </div>
js
$(document).ready(function()
{
  var yiji=$("#menu>ul>li");
  yiji.children("ul").find("li:has(ul a:not(:empty))>a").append("》");
  var erji=$("#menu>ul>li").children("ul").children("li");
  erji.mouseover(function(){
  $(this).children("ul").slideDown(100);
  }).mouseleave(function(){
   $(this).children("ul").slideUp(100);
  });
  yiji.mouseover(function(){
   $(this).children("ul").slideDown(100);
  }).mouseleave(function(){
  $(this).children("ul").slideUp(100);
  });
});
分享到:
评论

相关推荐

    jQuery制作垂直二级下拉栏目导航菜单特效

    在本主题中,我们将深入探讨如何使用jQuery制作垂直二级下拉栏目导航菜单特效。这个特效能够提升用户体验,使得二级菜单在鼠标悬停时优雅地展现,增强了网站的交互性。 首先,我们来看"index.html"文件,这是网页的...

    Jquery_横向2级菜单

    【jQuery 横向二级菜单】是网页设计中常见的交互元素,主要用于网站导航,提供清晰且高效的用户界面。在本文中,我们将深入探讨如何利用jQuery和CSS创建一个动态的、响应式的横向二级菜单。 首先,我们需要理解...

    用jquery写的二级menu

    标题中的“用jquery写的二级menu”指的是使用JavaScript库jQuery实现的二级导航菜单。在Web开发中,二级菜单常用于网站的导航结构,帮助用户更方便地浏览和访问深层页面。jQuery是一个广泛使用的JavaScript库,它...

    jQuery制作手机底部菜单

    总结,使用jQuery制作手机底部菜单,主要涉及HTML结构设计、CSS样式编写以及jQuery事件处理。通过这些步骤,你可以创建一个功能完备、易于操作的底部导航菜单,提升用户的浏览体验。当然,这只是一个基础示例,实际...

    jquery制作一个横向二级导航下拉菜单

    本教程将深入讲解如何使用jQuery来制作一个横向的二级导航下拉菜单,以提高用户体验。 首先,我们需要了解jQuery的基本用法。jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画制作...

    jquery制作导航菜单带有横向二级导航菜单效果

    本教程将详述如何使用jQuery创建一个带有横向二级导航菜单的效果,以提升用户体验和网站的互动性。 首先,我们需要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画...

    jquery多级导航菜单hover事件制作三级导航菜单代码

    接下来,我们使用jQuery来完善hover事件的功能,确保在鼠标离开一级菜单时,二级和三级菜单能够正确地延迟关闭,以防止快速移动鼠标时的闪烁现象。可以使用`setTimeout`和`clearTimeout`实现这一效果。 ```...

    漂亮的jquery二级菜单

    "漂亮的jquery二级菜单"是一个专为提升用户体验设计的网页组件,它利用jQuery库来实现动态交互效果,使得二级菜单在网页上展现得既美观又易于操作。 jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM...

    jquery制作的鼠标经过或者点击显示下拉菜单

    本项目利用jQuery来创建一个动态的下拉菜单,用户可以通过鼠标经过或点击来触发下拉菜单的显示,从而提升网站的导航功能和用户体验。 首先,`index.html`是网页的主文件,它包含了页面的基本结构和引用的资源。在...

    jquery导航菜单插件制作常用的jquery二级下拉菜单子内容

    jquery导航菜单插件制作常用的jquery二级下拉菜单子内容 jquery导航菜单插件制作常用的jquery二级下拉菜单子内容 jquery导航菜单插件制作常用的jquery二级下拉菜单子内容

    jQuery制作多级菜单

    jQuery制作多级菜单,应用到jquery、json、asp.net结合来实现无刷新三级联动效果,使用asp.net实现二级联动、三级联动效果很简单,不过不是无刷新就不爽了,所以收集一个无刷新联动的实现例子。

    jquery制作下拉菜单效果,菜单可缓慢收缩

    首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作,事件处理,动画设计以及Ajax交互。在我们的例子中,jQuery将帮助我们实现下拉菜单的动态效果。 在开始之前,确保你的HTML文件引用了jQuery...

    jquery树形导航菜单插件制作滑动多级二级下拉菜单展示

    总之,利用jQuery制作滑动多级二级下拉菜单是一项实用的技能,它结合了HTML、CSS和JavaScript的精华,提供了优秀的用户体验。通过理解和实践这个过程,开发者可以进一步提升自己的前端开发能力。

    jquery二级下拉菜单导航代码11

    而jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现交互式的二级下拉菜单导航。本资源"jquery二级下拉菜单导航代码11"正是针对这一需求提供的一种解决方案。 首先,我们来了解jQuery的核心概念。jQuery...

    jQuery动画下拉菜单

    jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。通过使用jQuery,开发者可以以更简洁的代码实现复杂的页面效果。例如,选择器功能让获取和操作DOM元素变得轻松,而动画API...

    JQuery横向纵向导航菜单

    - 在这里,二级菜单(子菜单)隐藏在主菜单项下,可以通过CSS设置`display:none`来实现。 2. **CSS样式**: - 使用CSS定义菜单的基本样式,包括颜色、字体、边距等,以及隐藏/显示子菜单的规则。例如: ```css ...

    非常酷炫的jQuery+css超滑二级下拉菜单

    本资源"非常酷炫的jQuery+css超滑二级下拉菜单"正是针对这一需求,提供了一种既美观又流畅的解决方案。 首先,jQuery是一种轻量级、高性能的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作以及...

    jQuery垂直下拉二级导航菜单

    jQuery作为一款强大的JavaScript库,提供了丰富的功能来简化DOM操作,实现动态效果,包括制作垂直下拉二级导航菜单。下面我们将详细探讨如何使用jQuery实现这种功能。 首先,我们需要理解基本的HTML结构。一个简单...

    jquery二级下拉菜单导航代码18

    "jquery二级下拉菜单导航代码18"是一个示例项目,旨在展示如何利用jQuery实现美观且易于操作的二级导航菜单。 首先,我们要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、...

    二级 菜单 二级 菜单

    二级菜单! 很值得下载看看!资源免费,大家分享!!

Global site tag (gtag.js) - Google Analytics