ツリーメニュー（ドロップダウンメニュー）の作成方法

ツリーメニューのページが作成されました。
作成されたページのメニューが2階層目に表示されるメニューとなります。

この例でお分かりのように、「環境設定」メニューは2階層のツリーメニューです。
「環境設定」が第1階層で、その下に半角スペースを空けて表示されているのが、第2階層のメニューです。

先ほど作成した3ページのメニューは、この第2階層メニューのように表示されます。

次は、Prospect セクション内に、このツリーメニューの第1階層となるメニュー項目を作成します。

環境設定 > ウェブエディタ > Prospect [新規ページの追加 / ページの更新]

ここで新規ページを作成しますが、この場合は、カスタムページにチェックを入れません。

これは以下の理由からです。

ツリーメニューの元となる第1階層のメニューも、通常のメニューと同様にクリックして別ページへリンクすることが可能ですが、一般的には、メニュー横の三角アイコンのみがクリック可能だと思われているようです。しかし、一部のユーザーによってメニューがクリックされた時のために、このメニューにもリンクを張ります。

一番簡単な方法は、リンク先をツリーメニューの一番上に表示されるページにすることです。そうすれば、どちらをクリックしても、同じページへリンクすることになります。

その際にカスタムページのチェックを外してページを作成すれば、リンク先を指定（ファイルのURL欄に入力）するだけですので、同じ内容のページを2つ作成する必要がなくなります。

もちろん、第1階層のメニューをクリックしたときに、異なる内容のページを表示しても問題ありません。その際は、カスタムページにチェックを入れてから、ページを作成します。そうすればページの編集が可能になります。

まず最初に、このページからリンクするページのURLを確認します。
ブラウザの新しいタブを開きます。
ひとつ前のページに戻ってそのページ上部のURLをコピーし、新しく開いたタブのアドレスにこれを貼り付けます。（こうすれば、再度ログインする手間が省けます。）

環境設定 > ウェブエディタ

先ほど作成したテストツリーメニューの[新規ページの追加 / ページの更新] をクリックします。

ページが開いたら、一番上のツリーメニュー横の「編集」をクリックします。

ファイルのURL（ここではcommon/clientCustom.asp?UID=50372）をコピーします。
UID=の後ろに続く数字は、ページごとに違います。

これをコピーして前のタブに戻り、Prospect 内に新規作成する第1階層のメニューページの「ファイルのURL」欄に貼り付けます。
内容、メタタグなど必要事項を入力します。

「メニューの変更：」のドロップダウンから、このメニューの下にツリーメニューとして表示する、セクション名（ここでは、テストツリーメニュー）を選択します。

----------------------------

これで、2階層のツリーメニューが作成されました。
ウェブサイトの見込み客セクションから、作成したツリーメニューを確認することができます。

前述のように、「テストツリーメニュー」と「テストページ001」のどちらをクリックしても同じページが表示されます。

また、このシステムでは、第3階層までのツリーメニューを作成することができます。

第2階層の「テストページ001」の下に、さらにメニューを表示させる場合は、同様の手順で、まず、第3階層となるメニューを別セクションに作成します。
「テストページ001」編集ページ内の「メニューの変更：」ドロップダウンから、第3階層となるメニューのセクション名を選択します。
これで「テストページ001」の下にツリーメニューを表示することができるようになります。

このように簡単な手順でツリーメニューを作成することができますので、メニューを違うエリアに誤って表示しないようご注意ください。

ツリーメニューの作成方法については以上です。

--------------------

- カスタムページの追加または編集、新規ページの作成

- ページの編集、言語バージョンの追加、ページ間のリンク

- カートの特定商品へのページ内リンク、商品やカテゴリーへの外部サイトからのリンク

- 商品やカテゴリーへのシステムページからのリンク、ショッピングカートのカテゴリー内商品にリンクするメニューの作成

- ツリーメニュー作成方法 - 1

- ツリーメニュー作成方法 - 2

- 画像の追加、商品のアップロードとリンク、スタイルシートの編集、システムページ内画像の変更

-------------

使用ガイドのトップへ戻る