2005年4月 1日

サイドメニューの折りたたみ(v4.0)

お知らせ:現在 Ver5.0 をリリースしています。

サイドメニューの折りたたみ(v4.0)これまでの折りたたみスクリプト menufolder.js を大幅に改造してバージョンアップしました。今回の大きな追加機能はブロックレベル要素指定によるリンクです。つまり画像のように、メニュータイトル枠全体をリンクとして設定することができます。これまでは折りたたみマークを狙ってクリックする必要がありましたが、この設定に変更することで操作性が向上すると思われます。ブロックレベル要素指定+折りたたみマークの表示も可能ですし、これまでの折りたたみマークのみへのリンクも可能です。
またリスト数を計算するタグは a タグのみでしたが、ご近所のサイトでメニューリストをツリー化される方が増えてこられましたので、任意のタグ(li 等)を指定して計数することも可能にしました。その他設定データを追加して表示位置を微調整できるようにしています(役立つかどうかは分かりませんが)。

スクリプトの設定内容はバージョンアップ毎にエントリーに記すと大変なので、下記のページにまとめてみることにしました。

menufolder.js マニュアル

バージョンアップに伴って新たに追加となったデータは次の通りです。

  • linkType:リンク方式
  • displayMark:リンクマーク表示
  • modificationFlag:タイトル表示位置補正フラグ
  • offsetForTitleAndLinkNumber:タイトルとリスト数のスペース
  • preMarkForSubCategory:サブカテゴリー用折りたたみマーク挿入位置
  • offsetForTitleAndMark:サブカテゴリーのタイトルとマークのスペース

これまでのデータはそのまま残しています。既存の折りたたみマークのリンクでタイトル表示位置を補正している場合は、新たに追加した modificationFlag を ture に設定してください。
他の設定については先のマニュアルをご覧頂くとして、ここではブロックレベル要素指定によるリンクのカスタマイズについて記したいと思います。

1.menufolder.js ダウンロード

下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合(Shift_JIS/EUC-JP等)は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。scriptタグの設定については3項に記してますのでお試し頂ければ幸いです。

2.menufolder.js の設定

menufolder.js を更新される方は大変申し訳ありませんが現在設定されている内容を比較して再設定してください。なおこれまで用いたデータ名はそのまま使っておりますので、データ名で検索されると効率良く更新できると思います。
ブロックレベル要素指定によるリンクを有効にするには linkType を 'block' に設定してください。さらにその状態で折りたたみマークを表示させる場合は displayMark に true を設定します。なお本機能では折りたたみマークはタイトル横になります。つまり左右いずれかの端に設定することはできませんので予めご了承ください(スタイルシートを修正して左右いずれかに位置を揃えた表示にすると綺麗だと思います)。設定イメージを示しておきます。

折りたたみマークを表示しない場合

// リンク方式
// 折りたたみマークにリンク付与:'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';
    :
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する:true
// 表示しない:false
var displayMark = false;
 
// 折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForSideBarMenu = '';
var closeMarkForSideBarMenu = '';

折りたたみマークを表示する場合

// リンク方式
// 折りたたみマークにリンク付与:'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';
    :
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する:true
// 表示しない:false
var displayMark = true;
 
// 折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForSideBarMenu = '';
var closeMarkForSideBarMenu = '';

なお折りたたみマークを表示しない場合は displayMark を false にすればその下のマークは無視されますが、SWEET WATER Web Server さんより頂いたコメントの通り Firefox では表示に不具合がある(スクリプトのバグ?)ようですので、その下の openMarkForSideBarMenu / closeMarkForSideBarMenu の設定もリストのように '' にしておいてください。

設定が終わったら保存してローカル・サイト・パス(index.htmlと同じ位置)にアップロードまたは配置してください。

3.スタイルシート追加

スタイルシート(styles-site.css)に下記を追加します。class 属性はとりあえず sidetitle2 としていますが、任意の名称で構いません。

.sidetitle2 {
    width: auto;
    margin:3px 0px 0px 0px;
    padding: 0px;
    text-align: center; /* テキスト配置 */
}
 
.sidetitle2 a {
    width: auto;
}
 
/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}
 
/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}

設定が終わったら保存・再構築してください。うまくできればマウスポイント時に画像のような反転を行います。自分で言うのも何でですがポイント時は地味な配色なので、適宜お気に入りの色に修正ください(色変更に必要な箇所をコメントで示しています)。全体のスタイルもご自由に変更くださって結構です。

4.テンプレート修正

公開テンプレートの場合、折りたたみを行いたいテンプレートの各メニュータイトルの設定部分に青字の「2」を追加します(class 属性を sidetitle2 としたのはこのためです)。

<div class="sidetitle2" id="newentries">
Recent Entries
</div>

設定が終わったら保存・再構築してください。
なお折りたたみが不要なメニューについてはこの設定を行わないでください。つまり折りたたまないメニューはこれまでのスタイルを用いる必要がありますので、既存の class 属性を流用するのはやめましょう。

5.動作の不具合について

原因は不明ですが、左サイドバー上部にカレンダーが表示されていない場合、左サイドバーのメニューについては文字の部分しかリンクが適用されません。確認したところ、table タグの caption が設定されていればそれ以降の設定についてブロック全体がリンクになるようです。

以上です。それぞれの設定に矛盾があるとタイトル部分の中央に折りたたみマークだけが表示されたり、タイトル自体の表示が崩れる場合があります。そのような場合、linkType と 適用するスタイル、それから class 属性が適正であるかご確認ください。

本サイトでは2005/3/31よりこの設定に変更して運用中です。不具合等ございましたらご連絡頂けると幸いです(明快な回答はできないかもしれませんが)。

2005.04.02 追記
Firefox の場合の不具合および設定データのリストを追加しました。またスタイルシートについては色変更に必要な箇所をコメントで示しました。

Comments [231] | Trackbacks [80]
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