如何使用jQuery制作渐变缩放式样的响应式导航菜单？

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

---

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

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

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

---

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

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

github.com/VPenkov/oka…

使用非常简单，步骤如下：

步骤一：定义HTML代码

        <nav role="navigation" id="nav-main" class="okayNav">
            <ul>
                <li><a href="#">故事</a></li>
                <li><a href="#">创意</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">存货</a></li>
                <li><a href="#">互动</a></li>
            </ul>
        </nav>

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

 

  

   

    
<script src="assets/js/jquery-1.11.1.min.js"></script>

   
  
 
<script src="assets/js/jquery.okayNav.js"></script>

步骤三：调用插件，代码如下：

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

搞定！

---

在线演示

点击这里 在线演示

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

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