テンプレートモジュール「 ナビゲーション」のメニューを画像メニューにした場合のプルダウン時の表示

ヘッダーメニュー(フッターメニュー)のテキストから画像への変更そのものは、画像の余白の調整ぐらいのcssの変更で意外に簡単に変更が可能だ。

しかし、このヘッダーメニューを「テキスト」から「画像」に変更した場合、プルダウンメニュー表示になったときに、メニューテキストが表示されなくなる。

プルダウンメニューが表示されない

このメニューを表示するためのカスタマイズについて説明する。

Eigerは、ヘッダーメニュー・フッターメニューが、幅930px以下になると、横メニューがプルダウンメニューに変更される。

この切り替えは、cssとJavascriptによって、設定されている。

cssは、Media Queriesの仕様を利用して、min-width:930pxの設定で、表示をセレクトメニュー(プルダウンメニュー)に変更する。

そのセレクトメニューのHTMLタグの置き換えを行っているのが、Javascriptである。

ここでは、インデックステンプレートにある「Javascript テーマ用」のmt-theme-eiger.jsがその制御を行っている。

基本的には、ヘッダーメニューの追加は、以前にも書いたように、規則に沿って設定することで表示される。
そのため、「Javascript テーマ用」の中味まで理解する必要はない。

しかし、画像メニューの変更により、この「Javascriptテーマ用」の変更は必要になってくる。

「Javascriptテーマ用」のmt-theme-eiger.jsは、20数行でとてもシンプルな内容である。

とはいえ、jQueryがわからないとちょっと難しい。

今回は、2箇所のテンプレート変更を行う。

1.テンプレートモジュールの「ナビゲーション」のリンクaタグの属性追加

 すでにこのテンプレートのリンク部分、aタグで囲まれているテキストのメニュー部分を、imgタグに変更しているはず。

<li><a href="#">メニュー1</a></li>

 ↓

<li><a href="#"><img src="/images/navi1.gif" alt="メニュー1" /></a></li>

aタグに属性titleを追加して、メニュー名を入れる。

<li><a href="#" title="メニュー1"><img src="/images/navi1.gif" alt="メニュー1" /></a></li>

2.インデックステンプレート「Javascript テーマ用」の変更

中程の1行を変更する。

変更前:'text': el.text()

 ↓

変更後:'text': el.attr('title')

そして、「保存と再構築」を行う。

セレクトメニュータグの項目表示の<option>のテキスト部分を、aタグのtitle属性にかかれているものを表示することによって、メニューテキストが表示されることになる。

imgタグのaltの属性を置き換えても良いのだが、それよりは同じaタグの属性から参照したほうが簡単な変更で実現できる。

フルダウンメニューカスタマイズ後

なお、背景画像にテキストメニューの場合は、インデックステンプレート「Javascript テーマ用」の変更は必要ない。

ヘッダーメニューとフッターメニューは同じメニューを表示しているが、フッターメニューは930px以下になってもプルダウンメニューにはならない。

これは、同じテンプレートモジュールを利用しているが、外側のcssが違うため、jabascriptが適用されないようになっている。

※本サイトでは、ヘッダー、フッタメニューともテキスト表示で画像メニューではない。