Bootstrap ナビゲーション(Navbar)


基本

<nav class="navbar navbar-default">
 ヘッダー部分
 <div class="navbar-header">
  <button type="button"
   スマホ時、「スマホ時の表示部分」を表示させる
   class="navbar-toggle"
   data-toggle="collapse"
   ヘッダー部とメイン部分を対応させる
   data-target="#mynavi">
   スマホ時の表示部分(ハンバーガーボタン)
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
 </div>
 メイン部分
 <div
  id="mynavi"
  class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
  </ul>
 </div>
</nav>

メニュー名

<nav class="navbar navbar-default">
 <div class="navbar-header">
  <button type="button"
   class="navbar-toggle"
   data-toggle="collapse"
   data-target="#mynavi">
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>

  <a href="#" class="navbar-brand">株式会社米良太事務所</a>
 </div>
 <div id="mynavi" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
  </ul>
 </div>

</nav>

サブメニュー

<nav class="navbar navbar-default">
 <div class="navbar-header">
  <button type="button"
   class="navbar-toggle"
   data-toggle="collapse"
   data-target="#mynavi5">
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
 </div>
 <div id="mynavi5" class="collapse navbar-collapse">
  <ul class="nav navbar-nav" style="margin: 0 auto;">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>

   <li class="dropdown">
    <a href="#"
     class="dropdown-toggle"
     data-toggle="dropdown"
     role="button"
     aria-haspopup="true"
     aria-expanded="false">サブメニュー <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#">サブメニュー1</a></li>
     <li><a href="#">サブメニュー2</a></li>
     <li><a href="#">サブメニュー3</a></li>
     <li role="separator" class="divider"></li>
     <li><a href="#">サブメニュー4</a></li>
    </ul>
   </li>
  </ul>
 </div>
</nav>

他設定

<nav class="navbar
 白メニュー
 navbar-default
 黒メニュー
 navbar-inverse
 上部固定
 navbar-fixed-top
 下部固定
 navbar-fixed-bottom
 ">
 <div class="navbar-header">
  <button type="button"
   class="navbar-toggle"
   data-toggle="collapse"
   data-target="#mynavi">
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
 </div>
 <div id="mynavi" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
  </ul>
 </div>
</nav>

中央寄せ

<nav class="navbar navbar-default">
 <div class="navbar-header">
  <button type="button"
   class="navbar-toggle"
   data-toggle="collapse"
   data-target="#mynavi">
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
 </div>
 <div id="mynavi" class="collapse navbar-collapse">
  <ul class="nav navbar-nav mycenter">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
  </ul>
 </div>
</nav>
<style>
 @media (min-width: 768px){
  .mycenter {
    margin: 0 auto;
    display: table;
    table-layout: fixed;
    float:none;
  }
 } 
</style>

コメントを残す

メールアドレスが公開されることはありません。