ホーム ＞ サンプル ＞ 6.35 サイドメニューの折りたたみ ★

6.35 サイドメニューの折りたたみ ★

menufolder.js

P.555

折りたたみの仕組み

折りたたみの(X)HTMLマークアップ（サンプルテンプレート）

<dt id="fooname">リストタイトル</dt>
<dd id="foolist">
リスト本体
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('foo','on');
//]]>
</script>
</dd>

JavaScriptによるリンク付与後のリストタイトルの(X)HTML

<dt id="fooname"><a class="foldmark" href="#" onclick="FoldNavigation('foo','chng');return(false);" onkeypress="FoldNavigation('foo','chng');return(false);">リストタイトル</a></dt>

P.556

折りたたみの(X)HTMLマークアップ（デフォルトテンプレート）

<div class="...中略... widget">
  <h3 class="widget-header" id="fooname">リストタイトル</h3>
  <div class="widget-content" id="foolist">
    <ul class="widget-list">
      リスト本体
    </ul>
  </div>
</div>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('foo','on');
//]]>
</script>

サンプルテンプレートのscript要素の(X)HTML

<mt:ifArchiveTypeEnabled archive_type="Category">
<dt id="fooname">リストタイトル</dt>
<dd id="foolist">
リスト本体
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('foo','on');
//]]>
</script>
</dd>
</mt:IfArchiveTypeEnabled>

デフォルトテンプレートのscript要素の(X)HTML

<mt:ifArchiveTypeEnabled archive_type="Category">
<div class="...中略... widget">
  <h3 class="widget-header" id="fooname">リストタイトル</h3>
  <div class="widget-content" id="foolist">
    <ul class="widget-list">
      リスト本体
    </ul>
  </div>
</div>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('foo','on');
//]]>
</script>
</mt:IfArchiveTypeEnabled>

P.557

script要素の誤った設定例

<script type="text/javascript">
FoldNavigation('foo','on',false);
</script>
 
<h3 id="fooname">メニュータイトル</h3>
<div id="foolist">
　：
メニューリスト本体
　：
</div>

折りたたみスクリプトを設定する

●head要素にscript要素を追加

「ヘッダー」テンプレートモジュール

...前略...
<script type="text/javascript" src="<mt:blogURL />menufolder.js"></script>
</head>
<body class="<mt:getVar name="page_layout" />"<mt:if name="body_onload"> onload="<mt:getVar name="body_onload" />"</mt:if>>
...後略...

P.557

スタイルシートの変更

●サンプルテンプレートをカスタマイズする

「スタイルシート」インデックステンプレート（サンプルテンプレート）

...前略...
a.foldmark {
    width: 100%;
    color:#333;
    text-decoration: none;
}
a.foldmark:link,
a.foldmark:visited {
    color:#333;
    display: block;
}
a.foldmark:hover {
    color:#fff;
    background-color: #9c9;
    text-decoration: none;
}
.sidetitle {
    margin-bottom: 3px;
}
...後略...

●デフォルトテンプレートをカスタマイズする

「スタイルシート」インデックステンプレート（デフォルトテンプレート）

...前略...
a.foldmark {
    width: 100%;
    padding: 2px 0;
    text-decoration: none;
}
a.foldmark:link,
a.foldmark:visited {
    display: block;
}
a.foldmark:hover {
    color:#fff;
    background-color: #ab0404;
    text-decoration: none;
}
...後略...

「最近のブログ記事」を折りたたむ

「最近のブログ記事」ウィジェットテンプレート（サンプルテンプレート）

<mt:if tag="blogEntryCount">
<dt class="sidetitle" id="entryname">最近のブログ記事一覧</dt>
<dd class="side" id="entrylist">
...中略...
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('entry','on');
//]]>
</script>
</dd>
</mt:if>

★「最近のブログ記事」ウィジェットテンプレート（デフォルトテンプレート）

005のh3要素にid属性entryname、006のdiv要素にid属性entrylistを追加し、016～020でscript要素を追加します。018のFoldNavigationの第1パラメータには、entryを設定します。

001:<mt:If tag="BlogEntryCount">
002:  <mt:Entries lastn="10">
003:    <mt:EntriesHeader>
004:<div class="widget-recent-entries widget-archives widget">
005:  <h3 class="widget-header" id="entryname">最近のブログ記事</h3>
006:  <div class="widget-content" id="entrylist">
      ...中略...
012:  </div>
013:</div>
014:    </mt:EntriesFooter>
015:  </mt:Entries>
016:<script type="text/javascript">
017://<![CDATA[
018:FoldNavigation('entry','on');
019://]]>
020:</script>
021:</mt:If>

P.559

「最近のコメント」を折りたたむ

「最近のコメント」ウィジェットテンプレート（サンプルテンプレート）

<mt:if tag="blogCommentCount">
<dt class="sidetitle" id="commentname">最近のコメント一覧</dt>
<dd class="side" id="commentlist">
...中略...
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('comment','on');
//]]>
</script>
</dd>
</mt:if>

★「最近のコメント」ウィジェットテンプレート（デフォルトテンプレート）

005のdt要素にid属性commentname、006のdd要素にid属性commentlistを追加し、018～022にdd要素とscript要素を追加します。020のFoldNavigationの第1パラメータには、commentを設定します。

001:<mt:If tag="mt:BlogCommentCount">
002:  <mt:Comments lastn="10" sort_order="descend">
003:    <mt:CommentsHeader>
004:<div class="widget-recent-comments widget">
005:  <h3 class="widget-header" id="commentname">最近のコメント</h3>
006:  <div class="widget-content" id="commentlist">
      ...中略...
014:  </div>
015:</div>
016:    </mt:CommentsFooter>
017:  </mt:Comments>
018:<script type="text/javascript">
019://<![CDATA[
020:FoldNavigation('comment','on');
021://]]>
022:</script>
023:</mt:If>

「最近のトラックバック」を折りたたむ

「最近のトラックバック」ウィジェットテンプレート

<mt:if tag="blogPingCount">
<dt class="sidetitle" id="trackbackname">最近のトラックバック一覧</dt>
<dd class="side" id="trackbacklist">
...中略...
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('trackback','on');
//]]>
</script>
</dd>
</mt:if>

P.560

「カテゴリ一覧」を折りたたむ

「カテゴリアーカイブ」ウィジェットテンプレート（サンプルテンプレート）

<mt:ifArchiveTypeEnabled archive_type="Category">
<mt:if tag="blogCategoryCount">
<dt class="sidetitle">カテゴリ一覧</dt>
<dd class="side">
...中略...
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('category','on');
//]]>
</script>
</dd>
</mt:if>
</mt:ifArchiveTypeEnabled>

★「カテゴリアーカイブ」ウィジェットテンプレート（デフォルトテンプレート）

003のdt要素にid属性categoryname、004のdd要素にid属性categorylistを追加し、022～026にdd要素とscript要素を追加します。024のFoldNavigationの第1パラメータには、categoryを設定します。

001:<mt:IfArchiveTypeEnabled archive_type="Category">
002:<div class="widget-archive widget-archive-category widget">
003:  <h3 class="widget-header" id="categoryname">カテゴリ</h3>
004:  <div class="widget-content" id="categorylist">
      ...中略...
020:  </div>
021:</div>
022:<script type="text/javascript">
023://<![CDATA[
024:FoldNavigation('category','on');
025://]]>
026:</script>
027:</mt:IfArchiveTypeEnabled>

「月別カテゴリアーカイブ」を折りたたむ

「月別カテゴリアーカイブ」ウィジェットテンプレート（サンプルテンプレート）

<mt:if name="module_category-monthly_archives">
<mt:ifArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle" id="categorymonthlyname">月別カテゴリ一覧</dt>
<dd class="side" id="categorymonthlylist">
...中略...
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('categorymonthly','on');
//]]>
</script>
</dd>
</mt:ifArchiveTypeEnabled>
</mt:if>

★「月別カテゴリアーカイブ」ウィジェットテンプレート（デフォルトテンプレート）

005のdt要素にid属性categorymonthlyname、006のdd要素にid属性categorymonthlylistを追加し、016～020にdd要素とscript要素を追加します。018のFoldNavigationの第1パラメータには、categorymonthlyを設定します。

001:<mt:IfArchiveTypeEnabled archive_type="Category-Monthly">
002:  <mt:ArchiveList archive_type="Category-Monthly">
003:    <mt:ArchiveListHeader>
004:<div class="widget-archive-current-category-monthly widget-archive widget">
005:  <h3 class="widget-header" id="categorymonthlyname"><$mt:CategoryLabel$>: 月別アーカイブ</h3>
006:  <div class="widget-content" id="categorymonthlylist">
    ...中略...
012:  </div>
013:</div>
014:    </mt:ArchiveListFooter>
015:  </mt:ArchiveList>
016:<script type="text/javascript">
017://<![CDATA[
018:FoldNavigation('categorymonthly','on');
019://]]>
020:</script>
021:</mt:IfArchiveTypeEnabled>

「月別アーカイブ一覧」を折りたたむ

「月別アーカイブ」ウィジェットテンプレート（サンプルテンプレート）

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle" id="monthlyname">月別アーカイブ一覧</dt>
<dd class="side" id="monthlylist">
...中略...
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('monthly','on');
//]]>
</script>
</dd>
</mt:ifArchiveTypeEnabled>

★「月別アーカイブ」ウィジェットテンプレート（デフォルトテンプレート）

005のdt要素にid属性monthlyname、006のdd要素にid属性monthlylistを追加し、016～020にdd要素とscript要素を追加します。018のFoldNavigationの第1パラメータには、monthlyを設定します。

001:<mt:IfArchiveTypeEnabled archive_type="Monthly">
002:  <mt:ArchiveList archive_type="Monthly">
003:    <mt:ArchiveListHeader>
004:<div class="widget-archive-monthly widget-archive widget">
005:  <h3 class="widget-header fold" id="monthlyname"><$mt:ArchiveTypeLabel$> アーカイブ</h3>
006:  <div class="widget-content" id="monthlylist">
    ...中略...
012:  </div>
013:</div>
014:    </mt:ArchiveListFooter>
015:  </mt:ArchiveList>
016:<script type="text/javascript">
017://<![CDATA[
018:FoldNavigation('monthly','on',false);
019://]]>
020:</script>
021:</mt:IfArchiveTypeEnabled>

P.561

「ページ一覧」を折りたたむ

「ページ一覧」ウィジェットテンプレート（サンプルテンプレート）

<mt:ifArchiveTypeEnabled archive_type="Page">
<mt:if tag="blogPageCount">
<dt class="sidetitle" id="pagename">ウェブページ一覧</dt>
<dd class="side" id="pagelist">
...中略...
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
FoldNavigation('page','on');
//]]>
</script>
</dd>
</mt:if>
</mt:ifArchiveTypeEnabled>

★「ページ一覧」ウィジェットテンプレート（デフォルトテンプレート）

003のdt要素にid属性pagename、004のdd要素にid属性pagelistを追加し、036～040にdd要素とscript要素を追加します。038のFoldNavigationの第1パラメータには、pageを設定します。

001:<mt:IfArchiveTypeEnabled archive_type="Page">
002:<div class="widget-pages widget">
003:  <h3 class="widget-header" id="pagename">ウェブページ</h3>
004:  <div class="widget-content" id="pagelist">
      ...中略...
034:  </div>
035:</div>
036:<script type="text/javascript">
037://<![CDATA[
038:FoldNavigation('page','on');
039://]]>
040:</script>
041:</mt:IfArchiveTypeEnabled>

■JavaScriptを一括設定する

「フッター」テンプレートモジュール（サンプルテンプレート）
「バナーフッター」テンプレートモジュール（デフォルトテンプレート）

...前略...
<script type="text/javascript">
//<![CDATA[
<mt:if tag="blogEntryCount">FoldNavigation('entry','on');</mt:if>
<mt:if tag="blogCommentCount">FoldNavigation('comment','on');</mt:if>
<mt:if tag="blogPingCount">FoldNavigation('trackback','on');</mt:if>
<mt:ifArchiveTypeEnabled archive_type="Category"><mt:if tag="blogCategoryCount">FoldNavigation('category','on');</mt:if></mt:ifArchiveTypeEnabled>
<mt:if name="module_category-monthly_archives"><mt:ifArchiveTypeEnabled archive_type="Category-Monthly">FoldNavigation('categorymonthly','on');</mt:ifArchiveTypeEnabled></mt:if>
<mt:ifArchiveTypeEnabled archive_type="Monthly">FoldNavigation('monthly','on');</mt:ifArchiveTypeEnabled>
<mt:ifArchiveTypeEnabled archive_type="Page"><mt:if tag="blogPageCount">FoldNavigation('page','on');</mt:if></mt:ifArchiveTypeEnabled>
//]]>
</script>
...後略...

P.562

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

menufolder.js

...前略...
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark = true;
...後略...

menufolder.js

...前略...
// タイトルと折りたたみマークのスペース(上記以外で折りたたみマークを表示をする場合に有効)
// 折りたたみマークを左端または右端に配置する場合'0'を設定
var offsetForTitleAndMark = 1;
...後略...

menufolder.js

...前略...
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '▼';
var closeMarkForSideBarMenu = '▲';
...後略...

P.563

<script type="text/javascript" src="<mt:blogURL />menufolder.js" charset="shift_jis"></script>

折りたたみマークをタイトルの後方にする

...前略...
// 折りたたみマーク位置(折りたたみマークを表示する場合のみ有効)
// タイトル前に折りたたみマークを配置：true
// タイトル後に折りたたみマークを配置：false
// 左端または右端に折りたたみマークを配置：true
var preMarkForSideBarMenu = false;
...後略...

P.564

折りたたみマークを画像で表示する

open.png
close.png

●menufolder.jsの変更

...前略...
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '<img src="open.gif" alt="開く" title="開く" />';
var closeMarkForSideBarMenu = '<img src="close.gif" alt="閉じる" title="閉じる" />';
...後略...

カテゴリ

月別 アーカイブ

ウェブページ

Powered by Movable Type 4.261

検索

このアーカイブについて

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。