財団トップナビゲーションバー

ページの頭の上に上部のナビゲーションバー：

分析の例

使用<nav class="top-bar" data-topbar> 「データtopbar>標準ツールバーを作成します。 .title-areaクラスは（防止しなければならないサイトのロゴ領域を規定li.name内側）。 小さな画面の後には、「メニュー」ボタンを見ることができます。 画面サイズに応じてメニューの財団が自動的に折りたたみドリンクを拡張します：

小さな画面では、ためのオプションの多くのサイズで表示されなくなります。 li.toggle-topbar menu.iconクラスは、メニューボタンを作成し、隠されたオプションを表示し、それをクリックします。
？ヒント：効果を確認するには、ブラウザのウィンドウをリセットします。

.top-bar-sectionナビゲーションリンクのセクションを定義しています。 .leftクラスは、左揃えのリンクを指定します。 .activeクラスが選択された項目、青の背景を表示するために使用されます。

ヒント：あなたがしたい場合は右揃えナビゲーションリンクをすることができます.left変更します.right ：

また、左側のアライメントが右に整列する設定できます。

ナビゲーションバー.divider （小画面が水平線である、大画面で縦線）の線を分割するクラスを追加するには：

ドロップダウンメニューのナビゲーションバー

ドロップダウンメニューの一番上にあるナビゲーションバーを設定することができます。

<li>要素が追加され.has-dropdownドロップダウンメニューを設定するためのクラス：

境界線

使用.divider分割線ドロップダウンメニューを設定するクラス：

プルダウンメニューラベル

では<li>アドオン内<label>ラベルを設定するための要素（タイトル）プルダウンメニュー：

組み込みドロップダウンメニュー

ドロップダウンメニューには、ドロップダウンメニューに埋め込むことができます。

クリッカブル

デフォルトでは、ディスプレイの上にマウスを移動するナビゲーションバーのドロップダウンメニューは、我々が使用できるdata-options="is_hover: false" 「ナビゲーションバーを設定する属性は、マウスをクリックするだけで表示されます。

ナビゲーションバー上のボタンやアイコン

あなたは、ナビゲーションバーやボタンのアイコンを配置することができます。

あなたはより多くの写真のスタイルを表示することができ、ナビゲーションバーにアイコンを置くことができ財団アイコンチュートリアル ：

固定ナビゲーション

ナビゲーションバーは、ページの上部に固定することができます。

上部のページナビゲーションバーが動いていないスクロールします。

ちょうど上のナビゲーションバーにナビゲーションバーを修正するには<div class="fixed">の内側：

ナビゲーションバー絶対位置

私たちは、ナビゲーションバーを置くことができる<div class="sticky">上部のナビゲーションバーとして固定として地域、ナビゲーションバーにロールバックする、スクロールバーが移動しない場合は、絶対位置を設定するには、ナビゲーションバーに：

あなたが使用する場合.stickyクラスを、上部のナビゲーションバーには、すべての画面サイズに固定され、意志。 あなただけの画面上の設定を指定する必要がある場合は<nav>前のdata-options="sticky_on: small|medium|large" |メディア|大"プロパティを：

または画面サイズの複数のアレイによる：