Movable Type 備忘録

 mootoolsでスライドメニュー表示

こんにちわ^^

今日はわたしの部署では、ダイハード4の話題でいっぱいでした。
6/30(土)から公開されるようです。

わたしはブルース・ウィルスが大好きで、ダイハード・シリーズのDVDはすべて持ってます。
あと、シックス・センスとかいろいろ (//▽//)

もちろん、映画館で観に行くつもりです(●＞∀＜●)

そんな話はサラぁ～と流して、今回はmootoolsを使用して、カテゴリ一覧をスライドメニューとしてカスタマイズしてみました。

こちらのK's Laboさんのところのメニューがカックいくてマネたんですの (●´∀｀●)
JavaScriptエフェクトによる画像スライド式メニューを設置

このカスタマイズでは、JavaScriptを使用しています。
こちらのyoumosさんのところで配布されてるJavaScript+mootolsを併用します。

以下にサンプルを記します。

サンプルを表示できませんでした。

ディレクトリ構成

今回のカスタマイズは以下のようなディレクトリ構成として説明します。

  1. http://●●●.com/
  2.   |
  3.   +-- index.html <-- 各自のトップページ
  4.   +-- styles-site.css <-- 各自のスタイルシート
  5.   |
  6.   +-- js/
  7.   | +-- image_menu/ <-- 新規作成
  8.   | | +-- images/ <-- ここに各自でお好みのイメージを格納します
  9.   | | |
  10.   | | +-- mootools.js
  11.   | | +-- imageMenu.js
  12.   | | +-- imageMenu.css
  13.   | |

カスタマイズ

  1. まず、youmosさんのところからJavaScriptの圧縮ファイルをダウンロードします。
    JavaScriptエフェクトで画像スライド式メニューを実装 （ImageMenu）

    ダウンロードしたら適当なフォルダに展開します。

  2. 次にイメージファイルを作成します。
    圧縮ファイル中にサンプル・イメージが添付されていますが、上記サンプルのイメージはW(240px)×H(180px)のサイズになります。

    サイズは自由ですので、各自のサイトに合わせて作成します。

  3. 次にテンプレートを変更します。
    上記サンプルではカテゴリ一覧をスライドメニューにしています。
    以下にそのタグを記します。

    カテゴリ一覧

    1. <script type="text/javascript" src="<$MTBlogURL$>js/image_menu/mootools.js"></script>
    2. <script type="text/javascript" src="<$MTBlogURL$>js/image_menu/imageMenu.js"></script>
    3. <div id="kwick">
    4.     <ul class="kwicks">
    5.     <MTCategories>
    6.         <MTIfNonZero tag="MTCategoryCount">
    7.         <li class="kwick menu<$MTCategoryID$>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel decode_html="1" remove_html="1"$>"><span><$MTCategoryLabel decode_html="1" remove_html="1"$></span></a></li>
    8.         </MTIfNonZero>
    9.     </MTCategories>
    10.     </ul>
    11. </div>
    12. <script type="text/javascript">
    13. <!--
    14. var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
    15. //-->
    16. </script>

    青い字の部分を各自の環境に合わせて変更します。
    大事なところは赤い字、緑の字とピンクの字の部分です。

    赤い字の部分がスライドメニューのブロック(<div id="kwick">～</div>)のID名を指定します。
    緑の字部分では、リストのクラス名称(<li class="kwick">～</li>)を指定します。

    ピンクの字の部分でスライドする量(サイズ)を指定しています。
    たとえば、今回作成したイメージの幅は240pxなので、だいたい200pxくらいで留めています。
    ココら辺はお好みで調整してください。

    そしてカーキ色の字の部分が、各カテゴリに合ったイメージを表示するためのクラス名となります。
    menu + カテゴリIDとなっています。

  4. あと、<head>～</head>の間に以下を追加します。

    スタイルシート読み込み

    1. <link rel="stylesheet" href="<$MTBlogURL$>js/imagemenu/imageMenu.css" type="text/css" />

    青い字の部分を各自の環境に合わせて変更します。
    一通り変更したら保存して再構築します。

  5. 最後にスタイルシートを変更します。
    上記サンプルで使用しているスタイルシートは以下の通りです。

    imageMenu.css

    1. @charset "utf-8"; /* ★各自の環境に合わせて変更 */
    2.  
    3. #kwick {
    4.     margin-top: 20px; /* ★各自のテンプレートに合わせて調整 */
    5.     position: relative;
    6.  
    7.     /*border-bottom: 3px double #333;*/
    8. }
    9.  
    10. #kwick .kwicks {
    11.     display: block;
    12.     height: 180px; /* ★メニューの高さと同サイズ */
    13.     margin: 0;
    14. }
    15.  
    16. #kwick li {
    17.     float: left;
    18. }
    19.  
    20. li:after {
    21.     content: "";
    22. }
    23.  
    24. #kwick .kwick {
    25.     /*padding: 10px;*/
    26.     height: 180px; /* ★各メニューの高さ(イメージの高さ) */
    27.     width: 48px; /* ★初期表示時の各メニュー見出し幅 */
    28.  
    29.     display: block;
    30.     cursor: pointer;
    31.     overflow: hidden;
    32.  
    33.     background: #fff; /* ★初期表示時の背景色 */
    34.     /*border-right: 5px solid #202020;*/
    35.     border-right: 2px solid #fff;/* ★右端ボーダー幅 */
    36. }
    37.  
    38. #kwick .kwick span {
    39.     display: none;
    40. }
    41.  
    42. /* ▼カテゴリページへのリンクのため新規追加しました▼ */
    43. #kwick .kwick a {
    44.     width: 100%;
    45.     height: 180px; /* ★メニューの高さと同サイズ */
    46.  
    47.     display: block;
    48. }
    49. /* ▲カテゴリページへのリンクのため新規追加しました▲ */
    50.  
    51. #kwick .menu4 { /* ★カテゴリID(=4) */
    52.     background: #000 url(images/slide-menu1.jpg);
    53. }
    54.  
    55. #kwick .menu57 { /* ★カテゴリID(=57) */
    56.     background: #000 url(images/slide-menu2.jpg);
    57. }
    58.  
    59. #kwick .menu6 { /* ★カテゴリID(=6) */
    60.     background: #000 url(images/slide-menu3.jpg);
    61. }
    62.  
    63. #kwick .menu5 { /* ★カテゴリID(=5) */
    64.     background: #000 url(images/slide-menu4.jpg);
    65. }
    66.  
    67. #kwick .menu8 { /* ★カテゴリID(=8) */
    68.     background: #000 url(images/slide-menu5.jpg);
    69. }
    70.  
    71. #kwick .menu9 { /* ★カテゴリID(=9) */
    72.     background: #000 url(images/slide-menu6.jpg);
    73. }
    74.  
    75. #kwick .menu3 { /* ★カテゴリID(=3) */
    76.     background: #000 url(images/slide-menu7.jpg);
    77. }
    78.  
    79. #kwick .menu13 { /* ★カテゴリID(=13) */
    80.     background: #000 url(images/slide-menu8.jpg);
    81. }
    82.  
    83. #kwick .menu11 { /* ★カテゴリID(=11) */
    84.     background: #000 url(images/slide-menu9.jpg);
    85.     border-right: 0; /* ★最後のメニューの右端のボーダー幅 */
    86. }

    上記サンプルでカスタマイズしたところを★印しています。
    ポイントは青い字の部分で、menu+カテゴリIDのクラスを作成しているところです。

    今回はカテゴリIDを使っていますが、MovableType(ムーバブルタイプ)のカテゴリ名称に英数字を使っている場合には、カテゴリ名を指定してもいいかも、です。

    カスタマイズしたところにコメント入れてますので、参考にしながら各自で調整してください。

  6. アップロードします。
    image_menu/フォルダごと、上記ディレクトリ構成のようにアップロードします。

以上で完了です。
圧縮ファイル中にはサンプルも含まれていますので、分かりやすいかと思います。

今回はカテゴリ一覧をスライドメニューとしてカスタマイズしてみましたが、各自のお好みでメニューにしたい場合でも同じ要領でできると思います。

また、リストのリンク名にカテゴリ名称を指定していますが、スタイルシートで非表示(<span>～</span>)にしています。
ここを非表示にしないで、カテゴリ名称の代わりにカテゴリ説明を表示させてもいいかも、です。

その場合には、以下のようになります。

カテゴリ一覧

  1. <script type="text/javascript" src="<$MTBlogURL$>js/image_menu/mootools.js"></script>
  2. <script type="text/javascript" src="<$MTBlogURL$>js/image_menu/imageMenu.js"></script>
  3. <div id="kwick">
  4.     <ul class="kwicks">
  5.     <MTCategories>
  6.         <MTIfNonZero tag="MTCategoryCount">
  7.         <li class="kwick menu<$MTCategoryID$>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel decode_html="1" remove_html="1"$>"><span><$MTCategoryDescription$></span></a></li>
  8.         </MTIfNonZero>
  9.     </MTCategories>
  10.     </ul>
  11. </div>
  12. <script type="text/javascript">
  13. <!--
  14. var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
  15. //-->
  16. </script>

青い字の部分が先ほどと異なります。

 Trackback Pings(1)

from K's Labo

最近、今更ながら、画像加工の勉強をしてる川口です。 私は根っからのシステム野郎。...

Tracked on May 15, 2007

 Comments(14)

#1: Posted by かわぐち @ May 15, 2007 [REPLY]
user-pic

ども、かわぐちです。

私も、ダイハード4、楽しみにしてます。
でも、え～かげん、ブルースさんもいい歳なのに、頑張りますね～。
私も負けてる場合じゃない！

っで、毎度のことながら、丁寧に説明されてますね～。
すばらしいです。
そうそう、こんな風にして、設置したんでした。

後でTBしておきます。

 
#2: Posted by かわぐち @ May 15, 2007 [REPLY]
user-pic

ども、かわぐちです。

またまた、お邪魔してます。
私のスライドメニューですが、opera9じゃ、
がたがたに崩れてしまって、綺麗に見えないんです・・・。

でも、bzbellさんのは、ちゃんと表示されてます。
ん～？なんでやろう～？

 
#3: Posted by かわぐち @ May 15, 2007 [REPLY]
user-pic

またまた、かわぐちです。

Opera9の件ですが、・・・・、
お騒がせしました。
ちゃんと表示されるようになりました。

bzbellさんと同様に、Javascriptで読み込むようにしてやったら、
うまくいきました。

ん～、さすがですね～。

 
#4: Posted by bzbell @ May 15, 2007 [REPLY]
user-pic

>>1 かわぐち さん
>>2 かわぐち さん
>>3 かわぐち さん

こんにちわ^^

わたしのところでは、素のままでメニュー表示すると、ことごとく他のAjaxがエラーしてしまうんですよ。

かわぐち さんとこは大丈夫ですか!?

mootools.jsがprototype.jsと同等の機能を持ってる!? のか、prototype.jsと競合してるように見えます。
かといって、mootools.jsからprototype.js的な機能を削除すると動作しないし･･･。

前にもmootools.jsでは同じような症状がでたので使用を避けてたんですけど、マジめに原因を探らないとダメかな (;￣∇￣A

 
#5: Posted by かわぐち @ May 15, 2007 [REPLY]
user-pic

ども、かわぐちです。

>わたしのところでは、素のままでメニュー表示すると、ことごとく他のAjaxがエラーしてしまうんですよ。
同じですね、私と・・・。

>前にもmootools.jsでは同じような症状がでたので使用を避けてたんですけど、マジめに原因を探らないとダメかな (;￣∇￣A
こつこつですが、目下調査してます。
調査結果がわかりましたら、また連絡しま～す。

 
#6: Posted by bzbell @ May 15, 2007 [REPLY]
user-pic

>>5 かわぐち さん

> 同じですね、私と・・・。

えっΣ(￣Д￣；)!!
わたしの環境だけかと思ってました (;￣∇￣A

> 調査結果がわかりましたら、また連絡しま～す。

はい。わたしも探ってみますの (●´∀｀●)

 
#7: Posted by youmos @ August 18, 2007 [REPLY]
user-pic

mootools.jsとprototype.jsなどJSフレームワークの複数利用はいろいろと問題がある場合が多いですね。
フレームワーク依存の開発は楽な反面、こうした問題も引き起こします。

prototype.jsを利用されている場合、scriptaculous.jsで実装しなおしたほうが良いかもしれませんね、Accordion.jsを利用すれば、同じようなアコーディオンを実装するのも比較的楽になるかと思います。

抱えている問題の解決にはなりませんが、参考になれば幸いです。

 
#8: Posted by bzbell @ August 18, 2007 [REPLY]
user-pic

>>7 youmos さん

こんばんわ^^

> prototype.jsを利用されている場合、scriptaculous.jsで実装しなおしたほうが良いかもしれませんね、Accordion.jsを利用すれば、同じようなアコーディオンを実装するのも比較的楽になるかと思います。

そうかもしれませんね。
今では jQuery に統一しちゃってますが、prototype 使ってた頃はよく問題が発生してました。
その時、とった解決策として iframe を使ってました。

JavaScript ってカンタンで安易に使える反面、乱用には注意しないとですね。

 
#9: Posted by oga @ February 11, 2008 [REPLY]
user-pic

こんばんは。はじめまして。

お尋ねしたい事があります。設置してみたのですが、クリックした際に配布元である、
http://www.phatfusion.net/imagemenu/　
でクリックした時に出る物と同じ、「リンクを表示する警告？」みたいのが出ます。これは、どういう意味ですか？また、回避策はありますか？

よかったら、助けてください。よろしくお願いします。

 
#10: Posted by Author Profile Page bzbell @ February 11, 2008 [REPLY]
user-pic

>>9 oga さん

こんばんわ^^

上記リンクの URL が間違ってるようなのですが、404 Not Found のことでしょうか。
正しくは（http://www.phatfusion.net/imagemenu/）ですあせあせ

もし見当違いのこと言ってましたらごめんなさいテレテレ

 
#11: Posted by oga @ February 11, 2008 [REPLY]
user-pic

bzbell さん　夜分すみません。

いえいえ、http://www.phatfusion.net/imagemenu/　の見本のimage　メニューをクリックすると、
「microsoft Internet Explorer
黄色い三角（警告）
http://www.aaronbirchphotography.com」「OK」と小さなウィンドウが表示され、リンク先には飛びません。「OK」を押すと終わりです。私が設置した物にも同様のウィンドウが表示されてしまいます。（リンクは　私が指定したURLですが）

これは、どういう事なのでしょう？多分、基本的な事なのだと思うのですが・・・わかりません。よろしくおねがいします。

 
#12: Posted by Author Profile Page bzbell @ February 11, 2008 [REPLY]
user-pic

>>11 oga さん

たしかに、クリックするとメッセージが表示されますねイヤイヤ
最新版をダウンロードして確認したところ、サンプルページの以下の行を変更してください。 

46 行目
// var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2});

機能拡張されてるようで、onOpen ファンクション内で自由に処理を追加できようになっています。
不要であれば、上記のように onOpen ファンクションを削除すれば OK ですふつう

 
#13: Posted by oga @ February 11, 2008 [REPLY]
user-pic

bzbellさん

ありがとうございました！！！できました！！
JavaScriptの知識がないので、とても助かりました。
長々お付き合い下さり感謝いたします。
また、サイトを参考にさせて頂きますね。

 
#14: Posted by Author Profile Page bzbell @ February 11, 2008 [REPLY]
user-pic

>>13 oga さん

こんにちわ^^

どぉ致しましてうぅ～ん
ステキなメニューになるといいですね。ではもじもじ

 

 Post a Comment

 

コメント用フィード