jQuery ベースのドロップダウンメニュー「Superfish」

jQuery ベースのドロップダウンメニュー「Superfish」

Posted at September 30,2009 1:55 AM
Tag:[jQuery, Superfish]

Superfish は jQuery ベースでドロップダウンメニューを実現するためのライブラリです。

Superfish によるグローバルナビゲーション

サンプルを用意しましたので動作をご確認してください。

Superfish によるグローバルナビゲーションのサンプル

ここでは、Superfish + Movable Type(配布テンプレート)によるグローバルナビゲーションを設定方法を紹介します。

なお、配布サイトのサンプルを試しましたが、書かれている通りに実行しないものがいくつかありました。ここではサンプルの「with Supersubs」を選びました。理由は、サンプルの設定通りに動いてくれたことと、メニューの幅を変更でき、使いやすそうだったためです。

また、Superfish では、本エントリーで紹介するサンプル以外にも、以下のようなことができます。

IEでプルダウンに重なっても表示
Superfish によるグローバルナビゲーション:プルダウンに重なっても表示

縦型メニュー
Superfish によるグローバルナビゲーション:縦型メニュー

2段目のサブメニューを水平表示
Superfish によるグローバルナビゲーション:2段目のサブメニューを水平表示

1.Superfish のダウンロード

Superfish のサイトにアクセス。

Superfish のサイト

タブの「Download & Support」をクリックし、「Superfish-1.4.8.zip(2009年9月時点のバージョン)」のリンクをクリックしてアーカイブをダウンロード。

Superfish のダウンロード

2.Superfish のアップロード

アーカイブを展開し、superfish-1.4.8 のフォルダ名を superfish にリネームして、フォルダごとブログディレクトリにアップロード。

3.head 要素の修正

head 要素のあるテンプレートに下記を追加します。MT4の既定のブログであれば、「HTMLヘッダー」テンプレートモジュール、当サイト配布のテンプレートであれば「ヘッダー」テンプレートモジュールが該当します。

<link rel="stylesheet" type="text/css" media="screen" href="<mt:BlogURL />superfish/css/superfish.css" />
<script type="text/javascript" src="<mt:BlogURL />superfish/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<mt:BlogURL />superfish/js/hoverIntent.js"></script>
<script type="text/javascript" src="<mt:BlogURL />superfish/js/superfish.js"></script>
<script type="text/javascript" src="<mt:BlogURL />superfish/js/supersubs.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("ul.sf-menu").supersubs({
            minWidth:    12,   // minimum width of sub-menus in em units
            maxWidth:    27,   // maximum width of sub-menus in em units
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over
                         // due to slight rounding differences and font-family
        }).superfish();  // call supersubs first, then superfish, so that subs are
                         // not display:none when measuring. Call before initialising
                         // containing tabs for same reason.
    });
</script>

script 要素内の「ul.sf-menu」が、3項の一番外側の ul 要素の class 属性値になります。また、

  • minWidth:サブメニューの最小幅のem値
  • maxWidth:サブメニューの最大幅のem値
  • extraWidth:折りかえらないための設定(詳細は未確認)

となっています。

3.ドロップダウンメニューの追加

サブカテゴリリストを利用したドロップダウンメニュー(青色)を、ブログヘッダーの下に設定します。以下はサンプルで設定したものと同じものです。当サイト配布のテンプレートであれば「ヘッダー」テンプレートモジュールに設定します。

<div id="header">
<h1 id="blog-name"><a href="<mt:blogURL />" accesskey="1"><mt:blogName encode_html="1" /></a></h1>
<mt:if tag="BlogDescription"><p class="blog-description"><mt:blogDescription encode_html="1" /></p></mt:if>
</div>
 
<mt:ifArchiveTypeEnabled archive_type="Category">
<mt:topLevelCategories>
  <mt:subCatIsFirst>
  <ul<mt:hasNoParentCategory> id="navi" class="sf-menu" style="width:800px"</mt:hasNoParentCategory>>
  </mt:subCatIsFirst>
    <mt:if tag="CategoryCount">
    <li><a href="<mt:categoryArchiveLink />" title="<mt:categoryDescription />"><mt:categoryLabel /></a>
    <mt:else>
    <li><a href="#"><mt:categoryLabel /></a>
  </mt:if>
    <mt:subCatsRecurse />
    </li>
    <mt:subCatIsLast>
  </ul>
    </mt:subCatIsLast>
  </mt:topLevelCategories>
</mt:ifArchiveTypeEnabled>

グローバルナビゲーションを手動で設定する場合は、一番外側の ul 要素に以下の class 要素を付与してください。配下の要素には何も設定する必要はありません。

<ul class="sf-menu">
関連記事
zenback
人気エントリー
トラックバックURL


コメント

縦型メニューのサンプルをおいてある所はありませんか?

横型のをカスタマイズすることができないので・・・

[1] Posted by nobs1970 : July 27, 2010 6:34 PM

>nobs1970さん
こんばんは。
ご返事遅くなってすいません。
以下のURLで縦型のカスタマイズについてエントリーしましたので、参考になれば幸いです。

http://www.koikikukan.com/archives/2010/08/09-235555.php

それではよろしくお願い致します。

[2] Posted by yujiro logo : August 10, 2010 2:23 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)