ひとりごと
2004年06月16日
折りたたみメニュー
chiricoyet
折りたたみメニュー作戦の任務遂行せよ！
∠(￣∧￣) ラジャ！
___ψ(‥ ) カキカキ ___ロ(‥ ) ケシケシ ___ψ(‥ ) カキカキ
＿φ( °-°)/ ヽ◇ マチガッター ___ψ(‥ ) カキカキ ___ψ(‥ ) 長いね
＿φ(・＿・"）まだこんなにあるのか・・・ ___ψ(‥ ) カキカキ
(〃´o`)=3 フゥ 終わった〜
無事任務完了致しました∠(￣∧￣)
これは便利ですわ。
既定の状態を開いたままにするか閉じたままにするか悩みましたけど
考えるのも面倒になりましたので、殆どを閉じた状態にしてしまっただよ(*ﾟдﾟ)
お陰ですっきり〜 
やり方はUnderDoneさんのサイトに書いてありました通りで完璧でしたが
一応ご参考に。。。
まず「JavaScript」の準備として
function showMoreMenu(varA1, varB1){
varHIDE = ('varMH_' + (varA1));
varSHOW = ('varMS_' + (varA1));
varBODY = ('varB_' + (varA1));
if( document.getElementById ) {
oElemHide = document.getElementById(varHIDE);
oElemShow = document.getElementById(varSHOW);
oElemBody = document.getElementById(varBODY);
if( varB1 == 1 ) {
oElemShow.style.display = "none";
oElemHide.style.display = "block";
oElemBody.style.display = "none";
} else {
oElemShow.style.display = "block";
oElemHide.style.display = "none";
oElemBody.style.display = "block";
}
} else {
return false;
}
}
varHIDE = ('varMH_' + (varA1));
varSHOW = ('varMS_' + (varA1));
varBODY = ('varB_' + (varA1));
if( document.getElementById ) {
oElemHide = document.getElementById(varHIDE);
oElemShow = document.getElementById(varSHOW);
oElemBody = document.getElementById(varBODY);
if( varB1 == 1 ) {
oElemShow.style.display = "none";
oElemHide.style.display = "block";
oElemBody.style.display = "none";
} else {
oElemShow.style.display = "block";
oElemHide.style.display = "none";
oElemBody.style.display = "block";
}
} else {
return false;
}
}
これを用意する。
ちなみに私はマニュアルとおりに「ShowMore.js」として
<script language="JavaScript" type="text/JavaScript" src="../js/ShowMore.js">
を、<head></head>間に入れております。
次に閉じたり開いたりするメニュータイトル部分を（私の設置例）
<div class="sidetitle">
Search
</div>
Search
</div>
を
<div class="sidetitle">
<div id="varMS_Search">
<a href="#_top" onclick="showMoreMenu('Search', 1);return false;">
▲Search
</a>$lt;/div>
<div id="varMH_Search" style="display: none">
<a href="#_top" onclick="showMoreMenu('Search', 0);return false;">
▼Search
</a></div>
</div>
<div id="varMS_Search">
<a href="#_top" onclick="showMoreMenu('Search', 1);return false;">
▲Search
</a>$lt;/div>
<div id="varMH_Search" style="display: none">
<a href="#_top" onclick="showMoreMenu('Search', 0);return false;">
▼Search
</a></div>
</div>
とします。（太字部分を項目により変えること）
最後に表示したり隠したりしたい個所を（私の設置例）
<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>
</div>
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>
</div>
を
<div id="varB_Search">
<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>
</div>
</div>
とします。（太字部分は上記の設定とあわせること）
この設定では最初にページにアクセスした時は開いた状態ですので
最初から閉じた状態にしたい場合は
<script language="JavaScript" type="text/JavaScript">
showMoreMenu('Search', 1);
</script>
showMoreMenu('Search', 1);
</script>
として（太字部分はあわせること）
<div id="varB_Search">
<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<script language="JavaScript" type="text/JavaScript">
showMoreMenu('Search', 1);
</script>
<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<script language="JavaScript" type="text/JavaScript">
showMoreMenu('Search', 1);
</script>
となります。
注：スタイルシートの関係上私の場合は
<div id="varB_Search">
<div class="side">
の部分は入れ替えてあります。
今のところTOPページしか反映させておりませんです。
それに「Birthday Blog 」だけを開いているのは意味があるんです(¬ー¬) フフフ
このエントリーのトラックバックURL:
[ 参考になりましたか？ ] [ blog ]
お得な情報
このおりたたみってまるでDHTMLみたいね
javascriptでもできるのねぇ〜
Posted by: cafe at 2004年06月17日 08:58 ___ψ(‥ ) カキカキ
JavaScriptですと何でも出来ちゃうのですかね。
Posted by: hi^-^ro at 2004年06月17日 11:59 ___ψ(‥ ) カキカキ
コメントする
Trackback
Title: MovableType 変更メモ
Excerpt: せっかくなのでMovableTypeの変更でお世話になったところのリンクでも貼っ...
From: SNOWFLAKES! Yukky's Note
Date: 2005.07.27
Excerpt: せっかくなのでMovableTypeの変更でお世話になったところのリンクでも貼っ...
From: SNOWFLAKES! Yukky's Note
Date: 2005.07.27
この記事に関する商品 by:amazon
本日のリンク元
最近のエントリー
ニュースメニュー
読売・産経- 一般・スポーツ
- コンピューター
- 音楽
- アサヒ･コム（全ジャンル）
- Ａｍａｚｏｎ
- ＭＳ新着サポート（IE）
- ＭＳ新着サポート（OS）
- ＭＳ新着サポート（Office）
└Internet Explorer
└IME
└Windows XP
└Windows 2000
└Windows NT 4.0
└Windows 98/Windows 98 SE
└Windows Me
└Office
└Office 2003
└Excel
└Excel 2003
└Word
└Word 2003
└Outlook
└Outlook 2003
└Access
└PowerPoint
└Project
カテゴリー
月別アーカイブ
お勧めＡｍａｚｏｎ
