• このエントリーをはてなブックマークに追加
  • LINEで送る

ナビゲーションを作る

スマートフォンやタブレットでアクセスすると、自動でナビゲーションが畳まれるので便利です。

こういうのはもう「こういうものなんだ」とコピペしちゃった方が早いと思います。

ナビゲーションの開始とヘッダー部分

全体を囲うバー

        
    

先ずはナビゲーション全体をこのように囲います。ヘッダーを上部に固定したい場合は[navbar-fixed-top]を追加すると、このサイトのように上部固定になります。

サイト名などの部分を追加

        
    

[三]アイコンですが、ボタンとラインで表現しているようです。

data-target="#nav_target この指定はとても重要で、スマートフォンナビアイコン[三]で展開されるメニューの指定になります。

メニューを追加する

メニュー部分を囲う

          
      

id="nav_targets" これが上で書いたスマートフォンナビアイコン[三]に展開されるナビゲーションの指定になります。

リンクを追加する

          
      

アクティブなページはLIにclass="active"を指定すると選択状態になります。自動ではなく手動(なはず)

ドロップダウンするナビゲーションを追加する

          
      

以下のコードを入れると▼が表示されます。

      
    

ナビゲーションの途中でラインを入れる場合は以下のように。

      
  • 右寄せのメニューを追加する

    メインメニューとは隔離しておきたいサブメニューなど。このサイトだとSTUDIO KEYへのリンクとお問合せへリンクさせています。