`
lifaming15
  • 浏览: 64704 次
  • 来自: ...
文章分类
社区版块
存档分类

jQuery slideToggle轻松实现效果不错的垂直下拉菜单

 
阅读更多
$(function(){
	$(".v_menu_list li:odd").addClass("alt");	
	$("#menuClick").click(function(){
		$("#vMenuList").slideToggle();	
		return false;
	});
	$(".v_menu_list > li > a").hover(function(){
		$(this).animate({
			paddingLeft: 20				
		},100);									  
	},function(){
		$(this).animate({
			paddingLeft: 5				
		},50);	
	});
});


<div class="zxx_v_menu">
    <div class="click_area" id="menuClick">
        <a class="v_menu" href="#zhangxinxu" hidefocus="true"><span class="rel">垂直导航</span></a>
        <span class="point_out"><span class="point_in">▼</span></span>
    </div>
    <ul class="v_menu_list" id="vMenuList">
        <li><a href="#zhangxinxu">圣诞节</a></li>
        <li><a href="#zhangxinxu">冬至</a></li>
        <li><a href="#zhangxinxu">地震</a></li>
        <li><a href="#zhangxinxu">股市</a></li>
        <li><a href="#zhangxinxu">十月围城</a></li>
        <li><a href="#zhangxinxu">三枪拍案惊奇</a></li>
        <li><a href="#zhangxinxu">蜗居</a></li>
        <li><a href="#zhangxinxu">阿凡达</a></li>
    </ul>
</div>


分享到:
评论

相关推荐

    jquery slideToggle函数滑动竖直导航菜单鼠标点击...

    jquery slideToggle函数滑动竖直导航菜单鼠标点击... jquery slideToggle函数滑动竖直导航菜单鼠标点击... jquery slideToggle函数滑动竖直导航菜单鼠标点击...

    jQuery垂直手风琴多级下拉菜单代码

    在网页设计中,交互性和用户体验是至关重要的因素之一,而jQuery垂直手风琴多级下拉菜单代码就是为了提升这方面体验的实用工具。这种菜单设计模式能够有效地组织和展示复杂的信息结构,尤其适用于导航条和侧边栏菜单...

    jquery竖直手风琴菜单收缩展示下拉菜单

    这可以结合`slideToggle()`实现滑动效果。 - 为了实现手风琴效果,需要阻止其他子菜单同时打开。可以使用`siblings()`选择器来关闭当前选中项之外的所有子菜单。 5. **动画效果**: - `slideUp()`和`slideDown()`...

    jQuery多级下拉垂直手风琴代码.zip

    在网页设计中,下拉菜单通常用于展示层级关系,如网站的导航菜单。当用户点击一级菜单时,与其相关的二级甚至三级菜单会以滑动或展开的方式显示出来。"多级"意味着这种下拉不仅限于两级,而是可以扩展到更多的级别,...

    jQuery垂直下拉二级导航菜单

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

    jQuery+ul实现漂亮竖直下拉菜单

    在这里,我们将利用jQuery的这些特性来控制下拉菜单的显示和隐藏。 HTML结构是构建下拉菜单的基础。通常,我们会使用`&lt;ul&gt;`和`&lt;li&gt;`标签来创建一个多级的列表。例如: ```html 菜单项1 子菜单项1 子菜单项2 ...

    jQuery实现垂直下拉导航菜单含二级导航图文简介特效源码.zip

    本资源“jQuery实现垂直下拉导航菜单含二级导航图文简介特效源码.zip”提供了一个使用jQuery库构建的垂直下拉菜单示例,特别适用于需要二级导航的网站。下面我们将详细探讨jQuery创建垂直下拉导航菜单的原理、步骤和...

    JQuery实现横纵向下拉菜单

    JQuery,作为JavaScript的一个库,提供了丰富的API和方法来简化动态效果的实现,包括创建下拉菜单。本篇文章将深入探讨如何使用JQuery实现横纵向下拉菜单。 首先,我们需要了解基本的HTML结构。一个简单的下拉菜单...

    jQuery垂直手风琴多级下拉菜单代码.zip

    本篇文章将深入探讨一个基于jQuery实现的垂直手风琴多级下拉菜单的代码,帮助开发者理解其工作原理和实现方式。 首先,我们要明确jQuery是一种轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...

    jquery音乐网站竖直下拉菜单.zip

    【标题】"jQuery音乐网站竖直下拉菜单"是一个针对音乐网站设计的JavaScript特效,它利用了jQuery库来实现一种动态的、垂直方向的下拉菜单。这种菜单通常被用在网站的导航栏中,为用户提供更加直观和便捷的浏览体验。...

    使用JQuery实现下拉菜单

    对于纵向下拉菜单,可以保持默认的CSS样式,即子菜单在主菜单项下方垂直堆叠。只需确保子菜单的位置正确,并根据需要调整间距和宽度。 在实际项目中,你可能还需要考虑其他交互细节,如触摸设备的支持、防止菜单在...

    jQuery垂直手风琴折叠下拉菜单代码.zip

    本资源“jQuery垂直手风琴折叠下拉菜单代码”提供了实现这一功能的完整解决方案,适用于那些对jQuery有需求的开发者。 首先,jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理和...

    jQuery动画垂直折叠导航效果

    这个效果不仅可以应用于网站导航,也可以扩展到其他需要动态折叠展开的场景,如侧边栏、下拉菜单等。通过调整CSS样式和jQuery代码,可以进一步定制导航的外观和交互行为,以满足不同项目的需求。

    jquery垂直导航菜单展开收缩垂直二级导航菜单代码

    通过上述步骤,你将拥有一个使用jQuery实现的具有展开和收缩功能的垂直二级导航菜单。这个菜单不仅提升了用户体验,还展示了jQuery在网页交互设计中的强大能力。记得在实际项目中,根据需要对样式和交互行为进行调整...

    jQuery可展开收缩三级下拉菜单代码

    总的来说,这个jQuery可展开收缩三级下拉菜单代码提供了一种灵活且易于实现的解决方案,让开发者可以轻松地在自己的网站上添加这种交互功能,提高用户导航的便利性。通过学习和理解这段代码,开发者不仅可以掌握如何...

    简单的多级垂直手风琴下拉列表菜单

    在IT界,构建用户友好的交互界面是至关重要的,而多级垂直手风琴下拉列表菜单就是一个很好的实现方式。这种菜单设计适用于导航栏或侧边栏,它可以帮助用户高效地浏览并访问多层次的网站内容。本文将深入探讨如何利用...

    12款下拉菜单jquery.zip

    本资源“12款下拉菜单jquery.zip”包含12个基于jQuery库的下拉菜单实现,对于前端开发者来说,这些实例是学习和借鉴的好材料。 jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互...

    jQuery简单的响应式下拉导航菜单代码.zip

    使用`.slideToggle()`方法,可以实现平滑的动画效果,增强用户体验。同时,为了实现响应式,我们需要在窗口大小改变时,重新计算和调整菜单的状态。 4. **jQuery选择器与事件处理**: jQuery的选择器(如`$("#id")...

    jquery水晶六级横向下拉菜单导航

    jQuery 提供了强大的功能,可以轻松实现动态交互效果,包括复杂的下拉菜单系统。本文将深入探讨如何使用 jQuery 实现一个水晶风格的六级横向下拉菜单导航。 ### 一、jQuery 基础 在了解具体实现之前,我们需要先...

Global site tag (gtag.js) - Google Analytics