10 个非常酷的基于jQuery的菜单效果插件
jopen 13年前
<p>除了直观的界面效果外，炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 <br /> <br /> <strong>1. 右击菜单</strong> <br /> <br /> 一个创建右击菜单的插件，简洁且易用。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/8caa44b235f4381125be24b295dab9dd.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958319615832702898" target="_blank">源码/演示</a> <br /> <br /> <strong>2. jQuery多级菜单——FX CSS菜单与子菜单</strong> <br /> <br /> 使用CSS创建菜单，使用JavaScript展示效果。特点如下： <br /> </p> <ul> <li>跨浏览器，兼容所有浏览器（包括IE6）。 </li> <li>效果：在鼠标经过和子菜单展开时，具有平滑的淡入淡出效果。 </li> <li>易于设置：简单的、用于无限级别菜单项目的嵌套无序列表。 </li> </ul> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/f1e0ae7090114cc3eb507a510c278db4.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958319616698362268" target="_blank">源码/演示</a> <br /> <br /> <strong>3. jQuery菜单效果插件</strong> <br /> <br /> 另一个jQuery插件，通过它设计人员无需编写代码，即可创建动态的菜单效果。该插件为设计师提供了非常特别的效果。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/9520262ea796c5ff357db63d871d3bbf.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958319617488749756" target="_blank">源码</a> / <a href="/misc/goto?guid=4958319618268929416" target="_blank">演示</a> <br /> <br /> <strong>4. 引人注目的jQuery菜单淡入淡出效果</strong> <br /> <br /> 这不仅仅是一个简单的淡入淡出效果，它需要大量的CSS和图像，但效果非常漂亮。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/6b3ff3a53e761bccd7da86fcba77ca7c.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958319619044972633" target="_blank">源码</a> / <a href="/misc/goto?guid=4958319619828734632" target="_blank">演示</a> <br /> <br /> <strong>5. 使用jQuery创建一个滑动菜单</strong> <br /> <br /> 你是否想将曾经看过的优秀的jQuery导航据为己有？现在，你也可以实现它们，只需创建一个菜单，然后使用一些滑动效果让它动起来。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/30fa9bf1f22f531fa331535f608cbf3f.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958186527904783000" target="_blank">源码</a> / <a href="/misc/goto?guid=4958186529974013514" target="_blank">演示</a> <br /> <br /> <strong>6. 基于jQuery的动画菜单</strong> <br /> <br /> 了解如何创建一个动画菜单（和<a href="/misc/goto?guid=4958319622049714141" target="_blank">Dragon Interactive网站</a>的菜单非常相似）。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/25798464a8f957038ee1d62c89efeb1c.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958186664545153767" target="_blank">源码</a> / <a href="/misc/goto?guid=4958186666625386886" target="_blank">演示</a> <br /> <br /> <strong>7. 基于jQuery的叠加效果菜单</strong> <br /> <br /> 创建一个简单的菜单，鼠标悬停在它上面时，网页中其他元素的颜色都会暗下来。菜单部分将醒目显示，并展开子菜单。该效果使用jQuery创建。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/8dcce8cb43f7e2ba79b43691af5add33.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958186574991235284" target="_blank">源码</a> / <a href="/misc/goto?guid=4958186577092532056" target="_blank">演示</a> <br /> <br /> <strong>8. 淡入淡出菜单</strong> <br /> <br /> 在本教程中，将学习如何创建淡入淡出效果菜单。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/36c799e758f582e75e96cd21be00b954.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958317613745368870" target="_blank">源码</a> / <a href="/misc/goto?guid=4958319626443365665" target="_blank">演示</a> <br /> <br /> <strong>9. 使用jQuery实现逼真的悬停效果</strong> <br /> <br /> 为图标链接添加一个上升的悬停效果，通过jQuery，该效果还可以在有反光和阴影的图标上实现。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/8639a90dbd4bfeeefc160d1ba86f0061.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958188541702367870" target="_blank">源码</a> / <a href="/misc/goto?guid=4958319627946658538" target="_blank">演示</a> <br /> <br /> <strong>10. 滑动的顶部菜单</strong> <br /> <br /> 滑动菜单在一些空间有限的页面中非常实用。这是一个滑动的顶部菜单，可以通过开/关按钮或任何与类名相关的标签来控制滑出/隐藏。 <br /> </p> <div style="text-align:center;"> <img alt="10 个非常酷的基于jQuery的菜单效果插件 " src="https://simg.open-open.com/show/2e2291d2adcb6ed70831c441e1aeb15c.jpg" width="580" height="150" /> </div> <p><br /> <br /> <a href="/misc/goto?guid=4958319628728166800" target="_blank">源码</a> / <a href="/misc/goto?guid=4958319629515815013" target="_blank">演示</a> <br /> <br /> 英文原文：<a href="/misc/goto?guid=4958319630296822380" target="_blank">http://www.jquery4u.com/menus/10-jquery-cool-menu-effect-plugins/</a><br /> <br /> 本文转载自: <a href="/misc/goto?guid=4958319631076227346" rel="nofollow" target="_blank">http://www.iteye.com/news/23764</a> </p>