最近研究了一下JQuery, 读了一下api,发现了强大的JQuery....
所以把之前的伸缩菜单重写了一遍.
menu.js文件:
function toggle(obj){
$(obj).next().slideToggle("slow");
}
html文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul>
<li onClick="toggle(this)">菜单选项一</li>
<li>
<ul>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
</ul>
</li>
<li onClick="toggle(this)">菜单选项二</li>
<li>
<ul>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
</ul>
</li>
<li onClick="toggle(this)">菜单选项三</li>
<li>
<ul>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
增加一个菜单只需要在ul里面加:
<li onClick="toggle(this)">菜单选项三</li>
<li>
<ul>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
</ul>
</li>
就行.
最后运用效果可以参看附件.
分享到：
- 2009-02-05 08:18
- 浏览 1520
- 评论(3)
- 论坛回复 / 浏览 (3 / 11958)
- 查看更多
相关推荐
标题中的“一款很好的缓冲效果下拉菜单”指的是一个具有平滑动画过渡的下拉菜单设计，这种设计在用户交互时可以提供更好的用户体验。在网页设计中，缓冲效果通常指的是通过平滑过渡或渐进加载来改善用户界面动态展示...
在网页设计中，用户体验是至关重要的一个环节，而页面载入缓冲效果就是提升用户体验的一种巧妙方式。当用户点击链接或提交表单时，他们通常希望看到的不是枯燥无味的空白页面，而是有一个动态的、视觉上吸引人的加载...
接着，我们探讨“缓冲效果”：缓冲效果是指在菜单展开或收起时，不是瞬间完成，而是有一个平滑的过渡过程，这通常通过CSS3的过渡效果或jQuery的动画函数来实现，以增加视觉吸引力和流畅性。 第一种效果：基础缓冲...
本主题聚焦于一个特定的实现方式——"缓冲效果返回顶部"，这是一种更加平滑、优雅的滚动体验，而不是瞬间跳转到页面顶部。这种效果通常通过JavaScript实现，它可以模拟物体减速直至静止的过程，让页面滚动更加自然，...
"JS+HTML网页竖型缓冲展开菜单效果"就是一种常见的交互设计技术，它使得用户在点击菜单时，子菜单能够平滑地以缓冲动画的方式展开或关闭，类似于QQ好友列表的展开效果。这种效果既美观又实用，能为用户提供更加流畅...
总结来说，"jQuery高亮二级缓冲折叠菜单"是通过jQuery库实现的一种交互式菜单设计，它结合了高亮效果、二级菜单、缓冲动画和折叠功能，为用户提供了一种直观且易于导航的网页体验。通过深入理解和熟练运用这些jQuery...
又一款弹性缓冲展开的后台折叠菜单代码，支持两级的网站菜单，可用于后台管理中。本菜单以动画的方式打开二级菜单，有弹性缓冲的效果，使用了较多的图片，不过所有需要的资源文件已经全部为您整理好打包，你只需下载...
本示例中的"带有缓冲效果的jquery打开和关闭层代码"是利用jQuery实现的一种视觉效果，当打开或关闭层（通常称为弹窗或对话框）时，会有一种平滑的过渡动画，即缓冲效果。这种效果可以提高用户体验，使界面看起来更加...
【透明缓冲js菜单代码】是一种在网页设计中用于创建动态效果的JavaScript技术，它通过巧妙地结合CSS样式和JavaScript函数，实现菜单项在鼠标悬停时以透明度变化的效果，从而提升用户界面的互动性和美观性。这个菜单...
"网站右击带缓冲效果弹出菜单"就是一个旨在增强用户交互体验的功能。这种功能通常使用JavaScript（JS）和层叠样式表（CSS）来实现，使得用户在鼠标右键点击网页时，弹出的菜单不会瞬间显示，而是有一个平滑的过渡...
总之，“后台页面左侧二级折叠菜单.zip”提供的资源是一个实用的后台管理系统导航方案，它结合了JS特效和良好的用户体验设计，对于前端开发者来说，是一个学习和实践交互式菜单设计的好例子。通过深入研究和应用这些...
后台管理菜单之左侧菜单完整版下载，显示在后台框架左侧可折叠、展开的二级菜单，基于Prototype插件，稍带点缓冲的动画效果，视觉效果上很平顺，整体感觉清新大气。已经在不少的CMS系统或后台模板中使用，相信你也...
综上所述，这个“C#缓冲区分析代码”应该包含了一系列关于如何在C#中创建、使用和管理缓冲区的示例。通过对这些知识点的学习和实践，开发者可以更好地理解和优化其代码中的数据处理部分，从而提升应用程序的性能。
网站后台左侧折叠菜单并且具有缓冲效果，更人性化，看起来有平滑的感觉，需要找类似jQuery效果的朋友不妨看看，也许对你所需的代码有帮助。
在IT行业中，图片缓冲滚动效果是一种常见的用户界面（UI）设计技术，特别是在产品展示或图像密集型应用中，能够提供流畅、高效的用户体验。这个技术主要应用于网页、移动应用或者桌面软件，通过预先加载和缓存图片，...
这个“双缓冲例子”可能包含了创建双缓冲环境、在后端缓冲区绘图、交换缓冲区和更新屏幕的代码示例。通过分析这些代码，你可以学习如何在实际项目中应用双缓冲技术。 双缓冲的优缺点： 优点： - 减少图像闪烁，提供...
在网页设计中，导航菜单是不可或缺的一部分，它为用户提供清晰的页面结构和便捷的交互体验。而利用jQuery实现的缓冲下拉导航菜单，更是提升用户体验的一种有效方式。本文将深入探讨jQuery缓冲下拉导航菜单的实现原理...
js树形菜单，带动画缓冲效果的左侧菜单，网站后台管理左侧的菜单，鼠标点击菜单主节点后，菜单展开并显示二级子节点，再次点击则会收起对应节点菜单，颜色和风格自己在Css中可修改。本款菜单基于js CSS 技术实现，...
为了实现缓冲效果，开发者可能使用了定时器（Timer）来控制菜单滚动的速度和节奏，并结合计数器（Counter）来管理当前的滚动位置。当用户触发滚动事件时，定时器会定期更新屏幕上的菜单状态，同时缓动函数会根据预设...