刘华佼的全栈学习记录

三步做出全栈营的汉堡响应式导航条

| Comments

看了热门投票区同学们的作品后,发现自己已经被甩了好几条街,真是沮丧满满。

巴特!
So What?
沮丧能帮我们赶上那些优秀的同学吗?
我们就这样让沮丧打倒在地吗?

No!No!No!

我们要:

怀特!

怀特!

怀特!

废话少说,先上效果图:

之前发现,页面缩小后,导航条里原来的内容都全不见了,所以一直想做出全栈营导航条的效果:缩小后,导航条里原来的内容都锁在汉堡图标里,点击汉堡图标后,原来的内容都显示出来。

为实现这个效果我困扰了很久,昨天终于憋出来了,其实要实现这个效果非常简单:

步骤一:在<div class="navbar-header">后加上一段代码:

app/views/common/_navbar.html.erb

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>

这是汉堡图标的代码。

步骤二:把你想在缩小窗口时不显示的部分,用以下语句包起来:

我要折叠起来的部分是“城市”、“搜索框”、“注册”、“登陆”。

<div class="navbar-collapse navbar-ex1-collapse collapse"  aria-expanded="false">
你要折叠的所有东东的代码
</div>

注意:这句里的 navbar-ex1-collapse 与上一步的data-target=".navbar-ex1-collapse"是相呼应的。

步骤三:敲黑板!看重点!最关键的一步来了!

在app/assets/javascripts/application.js的//= require_tree .上面加上一行:

//= require bootstrap/collapse

OK,大功告成!缩小页面点击试试看!

步骤四:敲黑板!看重点!

如果这篇教程对你有帮助, 请为我的作品投上一票!谢谢啦!

免费用户如果想购买VIP课程,可以使用我的专属推荐码减学费哦:6194-e895-58cb

如果实现过程出现问题,欢迎留言讨论!

参考资源:

( 此文要感谢tianting同学在使用javascrip套件、chengyuan同学用keynote设计方面的启发和帮助。)
chengyuan同学的PS 太难啦!用 Keynote 做漂亮的设计说明吧

Comments

comments powered by Disqus