facebook twitter hatena line google mixi email

Html/bootstrap/bootstrap3/スマホ時にのみに表示されるヘッダー展開メニュー

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
   <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
     <div class="container">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="/" ><img src="/assets/img/icon.png" border="0" height="24" /></a>
         <a class="navbar-brand" href="/"  style="width:50px;background: url('/assets/img/icon_40x40.png') no-repeat center center"></a>
         <span class="visible-xs-block">
           <a class="navbar-brand" href="/taglist" style="font-size:12px"><span class="glyphicon glyphicon-cloud"><br />タグ</span></a>
           <a class="navbar-brand" href="/favorite" style="font-size:12px"><span class="glyphicon glyphicon-star"><br />オキニ</span></a>
           <a class="navbar-brand" href="/mysearch" style="font-size:12px"><span class="glyphicon glyphicon-th-list"><br />履歴</span></a>
         </span>
       </div>
       <div id="navbar" class="navbar-collapse collapse">
       </div><!--/.nav-collapse -->
     </div>
   </nav>