« Responsive Web | Home | Clean Energy »

Responsive Navbar

a collapsing responsive navbar を試作した。クラス.nav-collapse.collapseのDivに書いた内容が、スマホ(幅940px以下のウィンドウ)で隠れて、替わりにnavbar toggle button (.btn-navbarに書く)が表示される。これはWindowsパソコンでもウィンドウの幅が940px以下のときはトグルボタンになるのでパソコンで確認できる。

このページは、パソコンでは隠さないようにした。device-widthが1280px以下の端末(スマホ)のときにsmart.cssを読み込んでレスポンシブ・メニューになるようにした。なお、クラス.pull-rightの中にメニューを書くと右寄せになり、ウィンドウ幅が足りないとき行をかえて表示する。
HTML Source
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar ここに隠れた内容を表示するトグルボタンを書く -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- .brand 隠さないメニューはここに書く -->
      <a class="brand" href="#">Project name</a>

      <!-- .nav-collapse 幅が 940px 以下のときに隠すメニューを書く -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-formなど -->
    <!-- .pull-right 右寄せのメニューを書く --> </div> </div> </div> </div>
必須ファイル
  • /assets/css/bootstrap.css
  • /assets/css/bootstrap-responsive.css
  • /assets/js/jquery.js
  • /assets/js/bootstrap.js
このページでは、bootstrap.jsにcollapse.jsを組み込んだ。