TopJavaScript > 2009年9月
2009年9月30日

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

September 30,2009 1:55 AM
Tag:[, ]
Permalink

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">
Comments [2] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3