Movable Type 備忘録

 mootoolsでリッチなメニューを作る

こんにちわ^^

今日はマンガ喫茶から帰った後、久しぶりに自転車で買い物に行ったらコケてしまいました(´Д｀；)
せっかく買った卵が割れてしまって、ほとほと自分のドジっぷりに嫌気さしてる bzbell です（つω-`｡）

さて、今回はチョビッとリッチ!? なメニューを作ってみたいと思います。
以前、mootoolsでスライドメニュー表示で、mootools を使ったメニューをご紹介しました。 わたし的には気に入っているメニューですが、今回ご紹介するメニューもカックいいです!!

いつもお世話になってるyoumosさんのところで、ゆっくりとフォーカスするエフェクトJavaScript （Fancy Menu）という記事が紹介されていたので実践してみたものです。
オリジナルはDevthought::CSS+Javascript power. Fancy menuになります。

まずはサンプルですね。
わたしのサイトのカテゴリの一部をメニューとして表示させたものです。

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

基本的にはサンプルが添付されてますので分かりやすいかと思います。 添付されてるサンプルでは固定幅で、メニューの各テキストがイメージファイルで作成されていました。
上記サンプルでは、リキッドスタイル(可変幅)に変更して、カテゴリ一覧をイメージファイルを使用せず、汎用的にテキストで表示させたものです。

あらかじめ言っておきますと、このメニューは固定幅専用です。
上記サンプルではリキッドスタイルにしていますが、メニューが折り返された場合、期待通りの表示がされませんのでご注意ください。

あくまでも、デザイン上(わたしのサイトがリキッドスタイルなため)の理由からリキッドスタイルにしただけですの。

また、アルファ・チャンネル PNG 画像を使用していますが、添付されてるサンプルではモダン・ブラウザと同様の表示がされます。
でも、わたしが作ったリキッドスタイルのメニューは･･･IE6 ではチョビッと異なります。

平たく言えばわたしのスキル不足ですが、CSS は奥が深いねぇ～と実感する今日この頃です (;￣∇￣A はは

ディレクトリ構成

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

  1. http://●●●.com/
  2.   |
  3.   +-- index.html <-- 各自のトップページ
  4.   +-- styles-site.css <-- 各自のスタイルシート
  5.   |
  6.   +-- js/
  7.   | +-- fancymenu/ <-- 新規作成
  8.   | | +-- images/
  9.   | | |
  10.   | | +-- scripts/
  11.   | | | +-- main.js
  12.   | | | +-- menu.js
  13.   | | | +-- mootools.js
  14.   | | |
  15.   | | +-- menu.css
  16.   | | +-- sample.html <-- サンプル
  17.   | |

カスタマイズ

  1. まずは、圧縮ファイルをダウンロードします。
    youmos さんのところから fancymenu.zip という圧縮ファイルをいただいて、適当なフォルダに展開します。

    そして、上記ディレクトリ構成のように丸ごとアップロードします。
    アップロード後ブラウザから sample.html を表示させてみてください。

    カックいいメニューが表示されますね (￣∇￣)b

  2. 次にテンプレートを変更します。
    HTML ヘッダ(<head>～</head>)内に以下を追加します。

    1. <script type="text/javascript" src="<$MTBlogURL$>js/fancymenu/scripts/mootools.js"></script>
    2. <script type="text/javascript" src="<$MTBlogURL$>js/fancymenu/scripts/menu.js"></script>
    3. <script type="text/javascript" src="<$MTBlogURL$>js/fancymenu/scripts/main.js"></script>

    青い字の部分を各自の環境に合わせて変更します。
    そして、以下はメニュー表示用のタグになります。

    1. <div id="fancymenu">
    2.     <ul>
    3.     <li id="one" class="current"><a href="#">MENU 1</a></li>
    4.     <li id="two"><a href="#">MENU 2</a></li>
    5.     <li id="three"><a href="#">MENU 3</a></li>
    6.     <li id="four"><a href="#">MENU 4</a></li>
    7.     </ul>
    8. </div>

    青い字の部分は、デフォルトのフォーカス位置を示します。
    たとえば、メニューから選択されたページをカレント(class="current")とすることで、メニューの現在位置を示すことができます (￣∇￣)b

  3. 最後にスタイルシートを変更します。
    以下はオリジナルのスタイルシート(menu.css)から必要なところだけ抜粋したものです。

    1. #fancymenu {
    2.     position: relative;
    3.     height: 29px;
    4.     width: 421px;
    5.     background: url('images/bg.gif') no-repeat top;
    6.     overflow: hidden;
    7. }
    8.  
    9. #fancymenu ul {
    10.     padding: 0;
    11.     margin: 0;
    12. }
    13.  
    14. /* Don't apply padding here (offsetWidth will differ in IE)
    15.     If you need padding add it to the child anchor */
    16. #fancymenu ul li {
    17.     float: left;
    18.     list-style: none;
    19. }
    20.  
    21. #fancymenu ul li a {
    22.     text-indent: -500em;
    23.     z-index: 10;
    24.     display: block;
    25.     float: left;
    26.     height: 30px;
    27.     position: relative;
    28.     overflow: hidden;
    29. }
    30.  
    31. #menu_home a {
    32.     width: 59px;
    33.     background: url('images/menu_home.png') no-repeat center !important;
    34.     background: url('images/menu_home.gif') no-repeat center;
    35. }
    36.  
    37. #menu_plantatree a {
    38.     width: 119px;
    39.     background: url('images/menu_plantatree.png') no-repeat center !important;
    40.     background: url('images/menu_plantatree.gif') no-repeat center;
    41. }
    42.  
    43. #menu_travel a {
    44.     width: 70px;
    45.     background: url('images/menu_travel.png') no-repeat center !important;
    46.     background: url('images/menu_travel.gif') no-repeat center;
    47. }
    48.  
    49. #menu_rideanelephant a {
    50.     width: 142px;
    51.     background: url('images/menu_rideanelephant.png') no-repeat center !important;
    52.     background: url('images/menu_rideanelephant.gif') no-repeat center;
    53. }
    54.  
    55. #fancymenu li.background {
    56.     /*background: url('images/bg_menu_right.png') no-repeat top right !important;*/
    57.     background: url('images/bg_menu_right.gif') no-repeat top right;
    58.     z-index: 8;
    59.     position: absolute;
    60.     visibility: hidden;
    61. }
    62.  
    63. #fancymenu .background .left {
    64.     /*background: url('images/bg_menu.png') no-repeat top left !important;*/
    65.     background: url('images/bg_menu.gif') no-repeat top left;
    66.     height: 30px;
    67.     margin-right: 9px; /* 7px is the width of the rounded shape */
    68. }

    青い字の部分が、メニュー幅と使用している背景イメージおよび、フォーカスされたときの透過 PNG イメージになります。
    これらのイメージを各自で作成するようになります。

    赤い字の部分でテキストを表示させない(画面外に表示している)ようにしています。
    メニューをテキスト表示させたい場合にはここを削除します。

    緑の字の部分では、各メニューのテキストイメージを表示させています。
    また、必ず各メニュー幅を指定してください。そうしないと、フォーカスされたときに期待通りの動作しませんのでご注意ください。

    ちなみに、アルファ・チャンネル未対応の IE6 は GIF ファイルが適用されます。

以上がチョビッとリッチ!? なメニューの詳細です。
参考までに、上記サンプルで使用しているタグと CSS を以下に記します。

XHTML

  1. <div id="fancymenu" class="dialog">
  2.     <div class="hd"><div class="c"></div></div>
  3.     <div class="bd"><div class="c"><div class="s">
  4.         <ul>
  5.         <MTCounter>
  6.         <MTTopLevelCategories>
  7.  
  8.         <MTFilterCategories exclude="Tools( ツール )|Rental Server( レンタルサーバ )|Moblog( モブログ )|Books( 書籍 )">
  9.  
  10.         <MTCounterIfEqual value="0">
  11.             <li id="cat<$MTCategoryID$>" class="current"><a href="javascript:void(0);"><$MTCategoryLabel$></a></li>
  12.         <MTElse>
  13.             <li id="cat<$MTCategoryID$>"><a href="javascript:void(0);"><$MTCategoryLabel$></a></li>
  14.         </MTElse>
  15.         </MTCounterIfEqual>
  16.  
  17.         <$MTCounterPlus$>
  18.         <MTSubCatsRecurse>
  19.  
  20.         </MTFilterCategories>
  21.  
  22.         </MTTopLevelCategories>
  23.         </MTCounter>
  24.         </ul>
  25.     </div></div></div>
  26.     <div class="ft"><div class="c"></div></div>
  27. </div>

こちらのカウンタによって表示を変えると、特定のカテゴリを表示させないようにするで紹介してるプラグインを併用しています。

CSS

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.  
  5.     text-decoration: none;
  6.     word-break: break-all;
  7.     word-wrap: break-word;
  8.     line-height: 1.3;
  9.  
  10.     font-style: normal;
  11.     font-weight: normal;
  12.     font-variant: normal;
  13.     font-size: 8.7pt;
  14.     font-family: Verdana, sans-serif;
  15. }
  16.  
  17. #fancymenu {
  18.     position: relative;
  19.     overflow: hidden;
  20. }
  21.  
  22. #fancymenu ul {
  23.     padding: 0;
  24.     margin: 0;
  25. }
  26.  
  27. #fancymenu ul li {
  28.     float: left;
  29.     list-style: none;
  30. }
  31.  
  32. * html #fancymenu ul li {/*for IE6*/
  33.     padding-left: 0.5em;
  34. }
  35.  
  36. #fancymenu ul li a {
  37.     height: 30px;
  38.  
  39.     z-index: 10;
  40.     display: block;
  41.     float: left;
  42.     position: relative;
  43.     overflow: hidden;
  44.     text-align: center;
  45.     line-height: 2.5;
  46.  
  47.     color: #fff;
  48. }
  49.  
  50. /*
  51.  * 各メニュー幅指定
  52.  */
  53. #cat4 a {
  54.     width: 8.2em;
  55. }
  56.  
  57. #cat57 a {
  58.     width: 6.2em;
  59. }
  60.  
  61. #cat6 a {
  62.     width: 6.8em;
  63. }
  64.  
  65. #cat5 a {
  66.     width: 4.6em;
  67. }
  68.  
  69. #cat8 a {
  70.     width: 9.6em;
  71. }
  72.  
  73. /*
  74.  * フォーカス時の背景イメージ指定
  75.  */
  76. #fancymenu li.background {
  77.     z-index: 8;
  78.     position: absolute;
  79.     visibility: hidden;
  80.  
  81.     background: url('image/bg_menu_right.png') no-repeat top right !important;
  82. }
  83.  
  84. * html #fancymenu li.background {/*for IE6*/
  85.     background-image: none;
  86.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image/bg_menu_right.png", sizingMethod="crop");
  87. }
  88.  
  89. #fancymenu .background .left {
  90.     margin-right: 9px; /* 7px is the width of the rounded shape */
  91.     height: 30px;
  92.  
  93.     background: url('image/bg_menu.png') no-repeat top left !important;
  94. }
  95.  
  96. * html #fancymenu .background .left {/*for IE6*/
  97.     background-image: none;
  98.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image/bg_menu.png", sizingMethod="crop");
  99. }
  100.  
  101. /*
  102.  * 角丸用スタイル
  103.  */
  104. .dialog .hd .c,
  105. .dialog .ft .c {
  106.     font-size: 1px; /* ensure minimum height */
  107.     height: 13px;
  108. }
  109.  
  110. .dialog .ft .c {
  111.     height: 14px;
  112. }
  113.  
  114. .dialog .hd {
  115.     background: transparent url(image/tl.gif) no-repeat 0 0;
  116. }
  117.  
  118. .dialog .hd .c {
  119.     background: transparent url(image/tr.gif) no-repeat right 0;
  120. }
  121.  
  122. .dialog .bd {
  123.     background: transparent url(image/ml.gif) repeat-y 0 0;
  124. }
  125.  
  126. .dialog .bd .c {
  127.     background: transparent url(image/mr.gif) repeat-y right 0;
  128. }
  129.  
  130. .dialog .bd .c .s {
  131.     margin: 0 8px 0 4px;
  132.     padding: 0 1em 0.4em;
  133.     height: 30px;
  134.  
  135.     background: #000 url(image/ms.jpg) repeat-x 0 0;
  136. }
  137.  
  138. .dialog .ft {
  139.     background: transparent url(image/bl.gif) no-repeat 0 0;
  140. }
  141.  
  142. .dialog .ft .c {
  143.     background: transparent url(image/br.gif) no-repeat right 0;
  144. }

以上です。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード