【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设计,请给我留言讨论吧, 或者你有更好的设计方式,也请不吝赐教哈!

您可能感兴趣的

Sort UL numerically and in alphabetical order&... I'm wanting to sort this UL numerically and alphabetically, using each items data-char value. Note: I'm only wanting to sort the parent UL, not t...
How to Convert a jQuery Plugin Into a WordPress Pl... We’ve talked about how incredibly dominant WordPress can be as a web platform to publish your content. But, for all its features and functionality, so...
jQuery .mouseenter not working with absolute posit... I'm working on a new website. I've done the basic layout. I'm trying to keep to the strict HMTL5 standards so I'm using lots of CSS3 tricks. als...
Slide down in Android JQuery Slide Down Pull All Contain Down I plan to to make a slide down NOT to pull the below container down, but it doesn't do s...
JQuery CSS Attributes not Applying I am centering a element inside a div horizontally and vertically, however the jQuery CSS code seems to be only resulting in style="margin: 0px" a...
极客头条责编内容来自:极客头条 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 【iGeek手册】程序猿如何使用jQuery制作渐变缩放式样的响应式导航菜单?



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

使用声明 | 英豪名录