Joomla! Tips

連動したグローバルメニュー、ローカルメニューの作り方

グローバルメニューをクリックするとローカルメニューが切り替わるようなメニューの作り方です。ここではテンプレート『rhuk_milkyway』を使用した方法で説明します。
tips_globalmenu00

Joomla!1.0でこのようなメニューを作成するには、それぞれメニューモジュールを作成し、表示するページをコントロールするか、ExtendedMenuなどのサードパーティモジュールを用いて実現するしかありませんでした(たぶん)。ただこの場合、パンくずリストが正しく表示されなかったり、メニューモジュールがやたらと増えてしまったりと問題もありました。Joomla!1.5では標準の機能だけで実現できるのでとっても楽ちんです。

最初にメニューを作成します。グローバルメニューにしたい方を親に、ローカルメニューにしたい方を子として作成します。ここでは次の様な感じで作ってみました。
tips_globalmenu01

作成されたモジュールの管理画面を開きます。モジュールを有効に設定し、配置はグローバルメニューの位置である「user3」に設定し保存します。
tips_globalmenu02

次のようにメニューが作成されるはずです。
tips_globalmenu03

このままだと「コンピュータ」をクリックした際に、その子メニューがグローバルメニュー内に表示されてしまいます。
tips_globalmenu04

そこでグローバルメニューのモジュールを再度開き、モジュール設定内の開始レベルを「0」に、終了レベルを「1」に設定します。この設定を行う事でグローバルメニューには親メニューだけが表示されるようになります。
tips_globalmenu08

次にこのモジュールをコピーしてローカルメニューを作成します。コピーしたモジュールを開き、名前を「ローカルメニュー」、有効を「はい」、配置を「left」に設定しましょう。
tips_globalmenu05

またこのまま保存してしまうとモジュールのデザインが他のモジュールと異なってしまいますので、拡張パラメータのモジュールクラスに「_menu」と入力しておきます。
tips_globalmenu07

次のようになるはずです。このままではグローバルメニュー、ローカルメニュー両方に同じメニューが表示されてしまいます。
tips_globalmenu06

次にローカルメニューのモジュールを開き、開始レベルを「1」、終了レベルを「2」に設定します。この設定を行う事で、親メニューを除いた子メニューのみがこのモジュールに表示されるようになります。もし子メニュー配下にも孫メニューが存在する場合、終了レベルは「2」以上にする必要があります。
tips_globalmenu09

これで終了です。親メニューである「コンピュータ」をクリックすると、その子メニューだけがローカルメニューに表示され、「音楽」をクリックすると、その子メニューだけが表示されるはずです。パンくずリストもメニューの構造と同じく表示されます。
tips_globalmenu10

tips_globalmenu11

?

【Joomla!が使えるレンタルサーバー】
 

タグ: デザイン

自分用のリンク

ちょくちょくアクセスするページ。自分用です。

お仕事募集

Joomla!に関するお仕事の依頼、エクステンションの翻訳、トラブルシューティングなどございましたら、こちらからお問い合わせください。