`

效果超酷的Javascript网页导航菜单

    博客分类:
  • JS
 
阅读更多

13 Awesome Javascript CSS Menus via noupe.

每一个网页设计师都希望有一个极富创造性的网页导航菜单,下面为你准备了13个利用Javascript实现的网页导航菜单,它们的效果真的是酷毙 了, 我很多时候都忍不住有种冲动,想把这13个效果放在一起,做一个Wordpress主题。只是我除了担心我对它们的掌控布置能力之外,更担心什么样的主机 才能同时良好的运行它们。

哦,你没我那么傻,选择一下你最喜欢的,做为你的网页导航菜单吧。

1) Sexy Sliding Menu - 基于mootools的Javascript网页导航菜单,漂亮的滑动门技术,看到下面的图了没有,用它来设计你的Sidebar,非常之炫,Sexy,是的。

 

Demo: Mootols Version
Demo: Script.aculo.usVersion

2) FastFind Menu Script -这个脚本基本动态的Ajax技术,可以让你创建多级嵌套的菜单。

 

Demo: FastFind Menu

3) Webber 2.0 Dock Menu -一个典型的Dock类型网页导航菜单。

 

Demo: Webber 2.0 Dock Menu

4) Phatfusion- Image Menu -这这是一个使用Javascript的图片导航菜单,它最大的特点是除了悬浮展开图片链接之外,还保持当前选定的菜单链接状态。

 

Demo: Phatfusion- Image Menu
Demo: Mootools version with XML parser

5) Drag and Drop ordering in a TreePanel -这个好像是从著名的Ext JS提取的,一个树型导航菜单,灵感当然是来源于Windows的资源管理器,我相信是这样的。

 

Demo: Drag and Drop ordering in a TreePanel

6) Custom Menu Events

在同一时间内显示展示菜单的介绍和其它相关信息,其动态效果甚至达到Flash。不过缺点是需要再次刷新才能进行导航菜单的动态显示。

 

Demo: Custom Menu Events | ThinkVitamin.com

7) Context Menu Functionality 一个简洁轻巧的上下文本导航菜单,利于在用户浏览时达到一个良好的交互作用。

 

Demo: Context Menu Functionality

这是另一个DemoAnother Context Menu

8 ) LavaLamp jQuery Sliding Menu 一个基于jquery的滑动菜单效果,体积比较小巧。另一个版本是来自Guillermo Rauch基于mootools所构建的。

 

Demo: LavaLamp jQuery Sliding Menu
Demo: Mootools Fancy Menu

9 ) Slashdot Menu- Dynamic Drive这是一个流行的滑动/折叠导航菜单,是设计爱好者从著名网站Slashdot中提取的。其可控制性非常强,比如你可以设置为只准打前主菜单打开,或者全部打开,或同时收缩所有的子菜单等,且可以根据Cookie判断来显示菜单。

 

Demo: Slashdot Menu

10 ) Mootools menu with Accordeon and Effects非常整洁的一个导航菜单,当鼠标悬浮的时候,当前链接就会伸展出来并且可以显示一个手风琴效果的二级菜单。

 

Demo: Mootools menu with Accordeon and Effects

11 ) CSS Dock Menu这又是来自Nick la的Mac风格的鱼眼效果菜单,如果你对这种效果感兴趣,可以看一下我的另一篇文章:
多个Mac风格的鱼眼菜单(Dock Menu)免费下载和教程

Demo: CSS Dock Menu

12 ) jQuery Plugin: Sliding Menu- 一个非常简洁的滑动菜单。

 

Demo: jQuery Plugin: Sliding Menu

13 ) Accessible expanding and collapsing menu

 

Demo: Accessible expanding and collapsing menu

网络开发人员可以创建惊人的JavaScript和CSS效果,而AJAX技术使人们有可能创造更多的交互,更多的回应和更灵活的网站导航。如果你 们这些家伙知道什么更加漂亮更加强大更加酷更加牛逼的网页导航菜单,你可以在这里留言,好让更多的网页设计者取之,用之,便之。方便,不是小便。

分享到:
评论

相关推荐

    超酷的网页导航菜单.rar

    网页导航菜单是构建网站用户体验的重要组成部分,而"超酷的网页导航菜单"则是一个专注于提供独特视觉效果和交互体验的JS特效案例。本资源包含两个文件:index.htm和说明.htm,它们共同展示了如何利用JavaScript(JS...

    13个漂亮的JS导航菜单

    JavaScript是一种强大的客户端脚本语言,它允许开发者为网页添加交互性,使得导航菜单不仅美观,而且具有响应性和自定义功能。JS菜单通常包括下拉效果、滑动展开、动画过渡等多种特性,这些都能极大地提升用户的浏览...

    强烈推荐超酷仿GG导航菜单.rar

    总的来说,这个"强烈推荐超酷仿GG导航菜单.rar"提供了一个基于JavaScript的高级菜单导航实现,它结合了HTML和CSS,展示了现代网页开发中的动态效果和用户体验设计。对于学习JavaScript特效或者寻求改进网站导航功能...

    超酷CSS水平导航菜单

    总结,"超酷CSS水平导航菜单"涵盖了基本的CSS知识,如选择器、属性、嵌套规则,以及在实际应用中的技巧,如布局、悬停状态、响应式设计和动画效果。通过这些技术,我们可以创建出既美观又实用的网页导航菜单,提升...

    css3超酷3D旋转导航菜单特效

    总之,"css3超酷3D旋转导航菜单特效"展示了CSS3的强大能力,特别是在创建动态、交互式的网页元素方面。开发者通过巧妙地运用3D Transforms、perspective属性以及JavaScript库,为用户带来了一种独特的导航体验。这种...

    超酷JS横行导航菜单

    通过以上分析,我们可以看出"超酷JS横行导航菜单"是一个集交互性、视觉吸引力和实用性于一体的网页设计元素。对于开发者而言,理解和掌握这种菜单的实现原理和技巧,不仅可以提升网站的专业形象,也能进一步提升自己...

    jQuery超酷圆形气泡导航菜单特效

    **jQuery超酷圆形气泡导航菜单特效**是一种创新的网页交互设计,主要依赖于JavaScript库jQuery来实现。这种特效能够提升用户体验,使用户在浏览网站时更加便捷地访问二级或三级菜单内容。以下是对这个特效及其相关...

    基于bootsnav的超酷3d导航菜单

    【基于bootsnav的超酷3D导航菜单】是一种创新的网页设计技术,它结合了流行的前端框架Bootstrap的导航组件和Bootsnav插件,旨在为用户带来更加生动且交互性强的网页导航体验。Bootsnav插件是针对Bootstrap的一个增强...

    css3打造的超酷三维动画效果的导航菜单.rar

    总的来说,“css3打造的超酷三维动画效果的导航菜单”是一个结合了CSS3新特性、JavaScript和优秀设计实践的实例,它展示了如何利用这些技术来创建一个引人注目且互动性强的网页元素。学习和掌握这些技能,将有助于...

    5个超酷超实用的网页导航条

    点击图标后,导航菜单会从侧边滑出或展开,节省了有限的屏幕空间,同时在需要时提供便捷的导航选项。 4. **下拉菜单和多级导航**: 对于有多个子页面的大型网站,下拉菜单能有效组织和展示导航层次。用户可以逐级...

    超酷网站导航菜单(js特效)

    "超酷网站导航菜单(js特效)"这个主题聚焦于使用JavaScript技术来创建一个独特且吸引人的导航菜单效果。JavaScript是一种广泛用于网页动态效果的客户端脚本语言,它可以赋予网页交互性和动画效果,使得用户界面更加...

    jQuery实现的超酷泡泡导航菜单效果

    【jQuery实现的超酷泡泡导航菜单效果】 在网页设计中,导航菜单是用户与网站交互的重要组成部分,它能引导用户方便地找到所需信息。本文将详细介绍如何使用jQuery库来创建一款创新的“泡泡导航菜单”效果,使得网页...

    超酷的javaScript页面特效合集

    3. **滚动导航**:当用户滚动页面时,JavaScript可以更新导航栏的状态,如高亮当前可见的部分,增强用户在长页面中的导航感。 4. **图片懒加载**:为了提高页面加载速度,JavaScript可以实现图片的延迟加载,即图片...

    网页的一些超酷超炫特效

    1. **滚动动画**:当用户滚动页面时,某些元素会根据滚动位置做出相应的动画效果,如固定导航栏、视差滚动等。这通常通过监听滚动事件和计算元素相对于视口的位置来实现。 2. **过渡效果**:在页面元素切换或显示...

    超酷的网页导航菜单特效代码

    "超酷的网页导航菜单特效代码"是一个专为提升用户体验而设计的资源,它包含了一系列创新且吸引人的导航菜单实现方式。这个压缩包包含了实现这些特效的HTML文件`index.htm`,以及帮助文档和相关链接。 `index.htm`是...

    仿Google页面效果完美版源码(HTML+JavaScript).zip

    在这个项目中,JavaScript将被用来处理用户交互,如搜索框的自动完成功能,导航菜单的响应式行为,以及可能的页面动画效果。JavaScript库,如jQuery,可能会被用来简化DOM操作,而事件监听器和Ajax请求则可能用于...

    超酷XP风格网页右键菜单.rar

    《超酷XP风格网页右键菜单:JS特效与菜单导航深度解析》 在网页设计领域,用户体验是至关重要的因素之一,而右键菜单作为交互设计的一部分,常常被用来提供便捷的功能选项,提升用户操作的效率。"超酷XP风格网页...

    超酷仿GOOGLE首页导航菜单效果

    ### 超酷仿GOOGLE首页导航菜单效果 #### 知识点概述 本文将详细介绍一个仿照Google首页设计的导航菜单实现方案。该菜单具备动态加载、响应式设计等功能,能够为用户提供流畅且美观的浏览体验。通过分析提供的部分...

    基于bootsnav实现超酷3d导航菜单.zip

    【标题】"基于bootsnav实现超酷3d导航菜单.zip"所涉及的知识点主要集中在前端开发领域,尤其是关于Bootstrap导航栏(Bootsnav)的使用以及如何通过它来创建具有3D效果的动态导航菜单。Bootstrap是一款广泛使用的前端...

Global site tag (gtag.js) - Google Analytics