10个很棒的jQuery Flyout菜单插件

有许多现成的脚本可以非常快速地实现到您的项目中,导航菜单只是可以通过jQuery增强的网站元素之一。 为了帮助您缩短开发过程,我们将与您分享10个(预制的)非常酷的jQuery Fly-out菜单插件的集合-动态菜单,该菜单出现在主菜单的左侧或右侧,紧邻所选菜单。项目。

1. jQuery和WordPress Slick Flyout菜单插件

特征:
>每页多个光滑的标签
>结合使用“位置”和“偏移”来设置滑出标签的确切位置
>设置光滑标签的文本
>切换通过外部链接打开/关闭的标签页
>选项以在页面加载时打开选项卡
jQuery和WordPress Slick Flyout菜单
演示

2.一个简单的jQuery飞出菜单

在本教程中学习如何创建一个非常简单的弹出菜单。
简单的jQuery飞出菜单
演示

3.带有JQUERY和CSS3的令人敬畏的自定义弹出菜单

整版的菜单化菜单具有两个不错的功能:将鼠标悬停在菜单项上时,我们将移动一个适应于当前项目宽度的悬停状态项,然后从页面左侧滑出描述栏,指向当前菜单项。
定制的弹出菜单
演示

4. jQuery菜单:具有ARIA支持和ThemeRoller就绪的下拉菜单,iPod Drilldown和Flyout样式

默认情况下,菜单脚本会将无序链接列表转换为简单的下拉菜单。 在将“弹出”选项设置为true的情况下配置菜单时,脚本会将层次结构列表格式化为弹出。
具有ARIA支持的弹出样式
演示

5. MenuMatic

取得链接的有序或无序的语义列表,并使用MooTools 1.2将其转换为动态下拉菜单系统,以增强可用性和个性。
MenuMatic
来源+演示

6. jQuery飞出菜单

在这篇文章中,我将向您展示如何使用animate()方法创建此效果。
jQuery飞出菜单
演示

7.很棒的jQuery Fly Out菜单教程

它与您通常认为的“弹出”菜单有些不同。 此示例实际上是针对网站的自定义构建,您需要在网站上实现浮华且互动的内容,但不必太灵活以容纳动态内容。
很棒的jQuery飞出菜单
演示

8. Flex Level下拉菜单(v1.3)

这种灵活的菜单脚本使您可以将多级下拉菜单添加到页面上的任何链接。 Flex Level Popup Menu的近亲,每个菜单都可以在锚元素的下拉或右边(当链接是侧栏链接时有用)
弹性水平下拉菜单
来源+演示

9.垂直弹出JavaScript菜单

这个动画的JavaScript弹出菜单干净,轻巧,只有1.6kb,并且已经在所有主流浏览器中进行了测试,并且根据创用CC许可,可免费用于个人或商业项目。
垂直弹出JavaScript菜单
演示

10. jQuery – Anywidth飞出

jQuery驱动的弹出菜单,该菜单使用简单的嵌套无序列表,这些列表可以嵌套任意深度,而无需更改样式或脚本。 每个子菜单将从左侧弹出,如果将鼠标悬停在任何其他父子菜单链接或子链接上,则它们将关闭。
任意宽度弹出
来源+演示

From: https://www.sitepoint.com/10-cool-jquery-flyout-menu-plugins/

使用说明 需要使用jQuery库文件(目前版本1.3)和jQuery Image Flyout库文件(目前版本1.1) 可选JS库文件:增强图片显示特效可使用jQuery插件Easing Plugin库文件 素材准备 可自定义CSS样式,控制jQuery插件jQuery Image Flyout提示小图片显示效果。 实例代码 一,包含文件部分 [removed][removed] [removed][removed] [removed][removed] 二,HTML部分(DIV层内所用图片链接) <div>jQuery插件flyout弹出图片</div> <div id="biuuu"> <a href="iphone.jpg" title="jquery.flyout"><img src="iphone_small.jpg" alt="iphone" /></a> </div> 三,Javascript部分(jQuery插件jQuery Image Flyout弹出图片调用) [removed] <!-- $(function() { $('#biuuu a').flyout(); --> [removed] 实例中将ID为biuuu的DIV内所有链接元素<a>增加javascript弹出放大图片功能,其中链接href部分为表示弹出的大图片路径。使用jQuery插件jQuery Image Flyout弹出图片,实现javascript弹出放大图片功能只需要一行代码即可实现。 四,用户自定义设置 结合jQuery插件Easing Plugin,可增强javascript图片放大和缩小过程中图片显示的效果。 一,自定义预加载提示图片 $('#biuuu a').flyout({loadingSrc:'thumb-loading.gif',outEase:'easeInCirc',inEase:'easeOutBounce'}); loadingSrc表示预加载提示图片路径 outEase表示弹出图片放大过程使用的jQuery插件Easing Plugin特效,如:easeInCirc inEase表示弹出图片缩小过程使用的jQuery插件Easing Plugin特效,如:easeOutBounce 二,自定义弹出图片后图片显示样式 $('#biuuu a').flyout({loadingSrc:'thumb-loading.gif',outEase:'easeOutQuad',inEase:'easeInBack',loader:'loader2',widthMargin:300,heightMargin:300}); loader表示弹出图片后调用的CSS样式 widthMargin表示弹出图片后显示的margin宽度 heightMargin表示弹出图片后显示的margin高度
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值