top of page

TopBarメニュー

■課題

ページ上にあるメニュー(ナビゲーション)は、デフォルト左側(縦方向)に表示されるが、これをページ上部(横方向)で表示できないか?


■解説

TopBarメニュー(ページ上部メニュー)を利用する上で注意が必要なこととして、デフォルトのナビゲーション(左側表示)との違いについて明記します。


 見え方以外で異なる点は以下です。

  ・メニューの階層が2階層までである。(デフォルトのナビゲーションは3階層まで可能)


■実装方法

メニューは、Layoutで定義するのが一般的です。通常ページにも設定できますが全てのページでメニューを設定する必要がでてくるため、Layoutを作成して、ページにそのLayoutを設定します。


ここでは、Layoutの作り方、設定方法については、割愛しますため、Layoutについてはその他文献などを確認してください。


 手順概要

 前提:RayoutをAtlas_Defaultをベースに変更する。

 ①TopBarメニューを追加する。

 ②左側のナビゲーションを削除する。

 ⓷メニューを設定する。

 ●詳細手順

  ①TopBarメニューを追加する。


 ②左側のナビゲーションを削除する。

  左側のグレーの部分を選択して、Deleteキーで削除できます。

 アイコンのところでエラーがでているので、これも削除する。


⓷メニューの設定をする。

※設定方法は、左側のNavigation表示のときと同様です。


さいごに、作成したLayoutを各ページのLayout設定で設定する。

bottom of page