メニュー項目を階層化する

メニューに追加するメニュー項目は、親となるメニュー項目の下にメニュー項目を追加することで階層化させることができます。ここではメニュー項目を階層化する方法について解説します。

(Last modified: )

メニュー項目を階層化する

例として次のようなメニュー項目が追加されたメニューで試してみます。

メニュー項目を階層化する(1)

現在はすべてのメニューが同じ階層です。ブログでメニューを表示した場合も追加したメニュー項目が並んで表示されます。

メニュー項目を階層化する(2)

それではメニュー項目の階層を設定してみます。今回は「スポットまとめ」の下の階層に「水遊びの場所」を移動してみます。まず「水遊びの場所」を「スポットまとめ」のすぐ下の位置に移動させてください。(メニュー項目を移動させる方法については「メニュー項目の並び替え」を参照してください)。

メニュー項目を階層化する(3)

「水遊びの場所」のメニュー項目の右端にある下矢印をクリックして展開してください。

メニュー項目を階層化する(4)

「スポットまとめ 下の階層」と書かれたリンクをクリックして下さい。

メニュー項目を階層化する(5)

「水遊びの場所」がインデントされて「スポットまとめ」の下の階層に移動しました。

メニュー項目を階層化する(6)

今度は「名古屋から行ける遊園地」を「水遊びの場所」のすぐ下へ移動してください。

メニュー項目を階層化する(7)

先ほどと同じように「名古屋から行ける遊園地」を展開して表示したあと、「スポットまとめ 下の階層」と書かれたリンクをクリックして下さい。(すぐ上にある「水遊びの場所」ではなく「スポットまとめ」が親になる対象となっているのは現、在同じ階層にある項目の中ですぐ上の項目が親となる対象だからです)。

メニュー項目を階層化する(8)

「名古屋から行ける遊園地」がインデントされて「スポットまとめ」の下の階層に移動しました。

メニュー項目を階層化する(9)

それでは「メニューを保存」をクリックして変更内容を反映させて下さい。

メニュー項目を階層化する(10)

あらためてブログを表示してみるとメニューが次のように表示されています。下の階層にメニュー項目があるメニュー項目には矢印が表示されています。

メニュー項目を階層化する(11)

メニュー項目を階層化する(12)

メニュー項目に表示されている矢印にマウスを合わせると、下の階層に含まれるメニュー項目が表示されます。

メニュー項目を階層化する(13)

このようにメニュー項目を階層化してブログに表示することができます。

さらに深い階層の設定

現在「スポットまとめ」の下の階層にある「名古屋から行ける遊園地」を展開して表示すると、「スポットまとめ 下の階層から外す」と「水遊びの場所 下の階層」の 2 つが表示されます。

さらに深い階層の設定(1)

「スポットまとめ 下の階層から外す」をクリックすると、トップレベルの階層に戻ります。「水遊びの場所 下の階層」をクリックすると、「スポットまとめ」のすぐ下の階層ではなく、「水遊びの場所 下の階層」の下の階層に移動します。今回は「水遊びの場所 下の階層」をクリックしました。

さらに深い階層の設定(2)

「名古屋から行ける遊園地」が「水遊びの場所」の下の階層に移動しました。

さらに深い階層の設定(3)

あらためてブログを表示してみるとメニューが次のように表示されます。

さらに深い階層の設定(4)

さらに深い階層の設定(5)

同じ手順でメニュー項目の階層をどんどん深くしていくことができます。

-- --

メニュー項目を階層化する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。