猎狐姥爷 '猎狐姥爷' 发布于2017-11-15,阅读194次,热度4次

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


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




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

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



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




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

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

https://github.com/VPenkov/okayNav

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


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




扫一扫移动端阅读或分享

猎狐姥爷  知名教育公司非知名技术VP

喜欢研究互联网产品相关UI/UX及代码实现,业余时间喜欢骑摩托车和拳击的程序猿大叔~~
     扫一扫立刻加入iGeekBar会员QQ群(545980198)
    和更多iG客会员交流分享吧~