【iGeek手册】程序猿如何使用jQuery制作渐变缩放式样的响应式导航菜单?

响应式设计(Responsive Design)的导航菜单,相信对于做web相关UI设计或者开发的朋友来说一定不陌生, 在这个遍地都是Bootstrap框架的互联网web世界, 标准Bootstrap类型导航菜单,肯定是你常见到的,但是对于一个有高尚追求的Geek来说, 与众不同绝对是我们一生追逐浪骚贱的目标

风骚的渐变缩放式导航菜单

在这篇文章里, 姥爷我给大家展示一种完全不同的响应式菜单解决方案,下面是这种响应式菜单的风骚样儿, 希望大家觉得受用,嘿嘿

在上面这个菜单解决方案中,我们使用的渐变缩放式的菜单效果,区别于传统的Bootstrap来说,它可以自由的随着不同宽度设计自行调整,而非bootstrap的两种独立样式导航菜单的简单切换

如何实现这种渐变缩放式样的导航菜单?

好消息在于你不必自己写代码实现这种菜单效果, Github上有现成的类似解决方案,地址如下:

https://github.com/VPenkov/okayNav

使用非常简单,步骤如下:

步骤一:定义HTML代码


步骤二:引用jQuery类库,及其okayNav的类库文件,如下:

步骤三:调用插件,代码如下:

var navigation = $('#nav-main').okayNav();

搞定!

在线演示

点击这里在线演示

大家可以去社区集市免费下载相关代码和模板

大家是不是觉得有点儿意思呢? 如果你喜欢这样UI/UX设计,请给我留言讨论吧, 或者你有更好的设计方式,也请不吝赐教哈!

极客头条稿源:极客头条 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 【iGeek手册】程序猿如何使用jQuery制作渐变缩放式样的响应式导航菜单?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录