ホーム » カスタマイズ・メモ » 汎用plugin » ドロップ・ダウン方式のナビゲーション・メニュー

ドロップ・ダウン方式のナビゲーション・メニュー

当サイトのメイン・コンテンツであるブログや写真展示のウェブ・ページについてはMovable Typeやそのpluginの持つ機能を使って各ページにリンクを貼ることで画面が転移するよう構成されています。右サイド・バーに在るブログ関連のメニューや左サイド・バーに在るメニューがそれに当たります。
しかしメイン・コンテンツ以外のページへのリンクをどこに置くかを考えたときに、画面のアクセントになるものは別として、どうもサイド・バーに置くのはデザイン的にゴチャゴチャして嫌だったのでナビゲーション・メニューを設けて一箇所にまとめることにしました。
ナビゲーション・メニューにもさまざまなタイプが在るのですが、メニュー項目が増えても場所を取らないドロップ・ダウン方式を採ることにしました。

採用したpluginはCSSとjavascriptを使った Chrome CSS Drop Down Menu です。以下にその導入方法をまとめます。

  1. 上記のサイトよりplugin一式(chromemenu.zip)をダウンロードします。

  2. 解凍して出来たchromejsフォルダの中のchrome.jsをエディターでカスタマイズします。対象はバージョン2.5です。
    カスタマイズ箇所 20行～24行

    
var cssdropdown={
disappeardelay: 500, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="http://domain/path-to/chromejs/down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [false, 5], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 0, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

    disappeardelay: マウスがメニュー範囲を抜けた後もメニュー表示を保持する時間を指定します。単位はミリ秒です。

    dropdownindicator: 子メニューの有る(ドロップダウンの働く)メニュー項目の場合その右端に▽マークが出ます。ここではそのマーク画像のURLを指定します。

    enablereveal: ドロップダウンをゆっくり表示したい場合はtrueを指定します。メニューをページの下端に置いてドロップダウンを上向きに表示したい場合はtrueにする必要があるようです。trueを指定した場合は数値でユックリ度を指定します。数値が大きい程ゆっくりになります。

    enableiframeshim: IEでiframeshimを使わなければならない時に指定します。

  3. このpluginでは子メニューの定義に rel Attribute を使っています。HTML5では rel Attribute には決められたキーワードしか使えないためスクリプトの一部を変更しました。

    変更前　171行目以降

    
startchrome:function(){
	if (!this.domsupport)
		return
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	for (var ids=0; ids<arguments.length; ids++){
		var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
		for (var i=0; i<menuitems.length; i++){
			if (menuitems[i].getAttribute("rel")){
				var relvalue=menuitems[i].getAttribute("rel")
				var asscdropdownmenu=document.getElementById(relvalue)
				this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
				this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
				this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
				try{
					menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator
				}catch(e){}
				this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
					if (!cssdropdown.isContained(this, e)){
						var evtobj=window.event || e
						cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
					}
				}, "mouseover")

    上記で赤字の３ヶ所の rel を data-chromemenu に変えています。尚、HTML5以前のDOC TYPEではこの変更は必要ありません。というか変更すると逆にエラーとなります。

    変更後（例として１ヶ所のみ例示します）

    
	if (menuitems[i].getAttribute("data-chromemenu")){

  4. 変更した chrome.js を chromejsフォルダに戻し、解凍しておいた chromethemeフォルダ、down.gif と一緒にサーバーにアップ・ロードします。後の説明の都合上アップ・ロード先を js/chromemenu とした場合は以下のディレクトリ構造となります。尚、当サイトでは chromebg.gif と chromebg-over.gif は使っておりません（chromestyle.cssの変更が必要となります）。見栄えの修正にはcss(chromestyle.css)の変更が必要ですが、次の工程を完了させ出来上がりを見ながら修正した方がやり易いでしょう。

    
   root
     |---js
          |---chromemenu
                  |---chromejs
                  |      |---chrome.js
                  |---chrometheme
                  |      |---chromestyle.css
                  |      |---chromebg.gif
                  |      |---chromebg-over.gif
                  |---down.gif

  5. 以上でchromemenu自体の準備は完了です。次はmenuを挿入する側のHTMLをマークアップします。まずは上記で準備したjavascriptとcssをページに読み込む指定をヘッダ・モジュールに加えます。

    
<head>
～
    <link rel="stylesheet" href="<mt:BlogURL />js/chromemenu/chrometheme/chromestyle.css"  type="text/css" />
～
    <script type="text/javascript" src="<mt:BlogURL />js/chromemenu/chromejs/chrome.js"></script>
～
</head>

    メニューの挿入場所を決めたら下記の形式でメニューを定義して行きます。下記は当サイトの例(一部)です。

    
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="<mt:BlogURL />">ホーム</a></li>
<li><a href="#" data-chromemenu="dropmenu1" >サイトについて</a></li>
<li><a href="#" data-chromemenu="dropmenu4" >リンク集</a></li>
<li><a href="#" data-chromemenu="dropmenu2" >便利ツール</a></li>
</ul>
</div>
<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="<mt:BlogURL />about.html">ギャラリー水楢について</a>
<a href="<mt:BlogURL />tagcloud.html">タグ・クラウド</a>
<a href="<mt:BlogURL />profile.html">プロフィール</a>
<a href="<mt:BlogURL />mailform.html">お問い合わせ</a>
</div>
<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv">
<a href="<mt:BlogURL />koyomi-tenki.html">暦と天気</a>
<a href="<mt:BlogURL />colorchecker.html">WEBカラー配色チェッカー</a>
</div>
<!--4th drop down menu --> 
<div id="dropmenu4" class="dropmenudiv">
<a href="<mt:BlogURL />linklist-blog.html">お薦めブログ･サイト＋＋</a>
<a href="<mt:BlogURL />linklist-photo.html">写真サイト</a>
</div>

    data-chromemenuの部分はHTML5以外では rel とします。（前記３項参照）
    id="chromemenu"はchorome.jsが処理を行う対象を規定する重要な定義となります。又、data-chromemenu="dropmenu1"の部分は子メニューの場所を規定する大切な定義となります。それぞれはページ内で一意でなければなりません。紫色の部分はchromestyle.cssで使っていますので変更できません。

  6. 次に chrome.js を起動させるためのスクリプトをマークアップします。場所は前記メニュー定義の直後でも、フッター・モジュールの中でも良いでしょう。
    当ドロップ・ダウン・メニューを２ヶ所（ページのヘッダーの直後とフッターの直前の２ヶ所とか）に設けるような場合はフッター・モジュールにマークアップすることになります。（下記７項参照）

    
<script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
</script>

  7. メニューを２ヶ所に設ける場合のマークアップは概略以下のようになります。
    その場合、前記２項の chrome.js のカスタマイズで
    enablereveal: を true
    とする必要があるようです。
    chromestyle.css 及び chrome.js を読み込むヘッダー部については前記と変更はありません。

    
（ヘッダー部直後）
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="<mt:BlogURL />">ホーム</a></li>
<li><a href="#" data-chromemenu="dropmenu1" >サイトについて</a></li>
<li><a href="#" data-chromemenu="dropmenu4" >リンク集</a></li>
<li><a href="#" data-chromemenu="dropmenu2" >便利ツール</a></li>
</ul>
</div>
<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="<mt:BlogURL />about.html">ギャラリー水楢について</a>
<a href="<mt:BlogURL />tagcloud.html">タグ・クラウド</a>
<a href="<mt:BlogURL />profile.html">プロフィール</a>
<a href="<mt:BlogURL />mailform.html">お問い合わせ</a>
</div>
<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv">
<a href="<mt:BlogURL />koyomi-tenki.html">暦と天気</a>
<a href="<mt:BlogURL />colorchecker.html">WEBカラー配色チェッカー</a>
</div>
<!--4th drop down menu --> 
<div id="dropmenu4" class="dropmenudiv">
<a href="<mt:BlogURL />linklist-blog.html">お薦めブログ･サイト＋＋</a>
<a href="<mt:BlogURL />linklist-photo.html">写真サイト</a>
</div>

～
（フッター部直前）
<div class="chromestyle" id="chromemenu2">
<ul>
<li><a href="<mt:BlogURL />">ホーム</a></li>
<li><a href="#" data-chromemenu="dropmenu1" >サイトについて</a></li>
<li><a href="#" data-chromemenu="dropmenu4" >リンク集</a></li>
<li><a href="#" data-chromemenu="dropmenu2" >便利ツール</a></li>
</ul>
</div>

～
（フッター部）
<script type="text/javascript">
    cssdropdown.startchrome("chromemenu","chromemenu2")
</script>
～
  8. 動作に問題が無ければ chromestyle.css を弄って(一般的に変更するであろう箇所はcssの記述にリマークされています)好みのものに変えましょう。
  9. 正確なドキュメント並びに詳細はダウンロード元の説明書き又はソース・コード内の説明（いづれも英文）を参照ください。

タグ:

Category : 汎用plugin | Comments [0] | Trackbacks [0]
pocket このエントリーをはてなブックマークに追加 ブログランキング 花 にほんブログ村 写真ブログ 風景写真へ

トラックバックURL

このエントリーのトラックバックURL:
https://www.mizunara.com/cgi-bin/mt/mt-tb.cgi/1149

コメントする