ひとりごと

2004年06月16日

折りたたみメニュー

hare.gif laugh.gif

chiricoyet


折りたたみメニュー作戦の任務遂行せよ!

∠( ̄∧ ̄) ラジャ!


___ψ(‥ ) カキカキ ___ロ(‥ ) ケシケシ ___ψ(‥ ) カキカキ

_φ( °-°)/ ヽ◇ マチガッター ___ψ(‥ ) カキカキ ___ψ(‥ ) 長いね

_φ(・_・")まだこんなにあるのか・・・  ___ψ(‥ ) カキカキ

(〃´o`)=3 フゥ 終わった〜


無事任務完了致しました∠( ̄∧ ̄)

これは便利ですわ。
既定の状態を開いたままにするか閉じたままにするか悩みましたけど
考えるのも面倒になりましたので、殆どを閉じた状態にしてしまっただよ(*゚д゚)
お陰ですっきり〜 grin.gif

やり方は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;
}
}

これを用意する。
ちなみに私はマニュアルとおりに「ShowMore.js」として
<script language="JavaScript" type="text/JavaScript" src="../js/ShowMore.js">

を、<head></head>間に入れております。

次に閉じたり開いたりするメニュータイトル部分を(私の設置例)

<div class="sidetitle">
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 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 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 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 id="varB_Search">
<div class="side">
の部分は入れ替えてあります。

今のところTOPページしか反映させておりませんです。

それに「Birthday Blog 」だけを開いているのは意味があるんです(¬ー¬) フフフ




このエントリーのトラックバックURL:
      [ 参考になりましたか? ] [ blog ]
blank_space
投稿者 hi^-^ro : 2004年06月16日 15:08 | トラックバック | Edit | Clip!! | このエントリーを含むはてなブックマーク


コメント 

このおりたたみってまるでDHTMLみたいね
javascriptでもできるのねぇ〜

Posted by: cafe at 2004年06月17日 08:58 ___ψ(‥ ) カキカキ

JavaScriptですと何でも出来ちゃうのですかね。

Posted by: hi^-^ro at 2004年06月17日 11:59 ___ψ(‥ ) カキカキ
blank_space
コメントする




必須ですが表記はされません





たま〜にですが、「酢鶏」という人工無能によるコメント投稿があります。
可愛くも人工無能ですのでどんな投稿をするのかサッパリと分かりません。
ですのでコメント内容に関してはあまり気にしないでくださいね。
作者のLanタソさんに感謝! 





名前、アドレスを登録しますか?






blank_space
Trackback
Title: MovableType 変更メモ
Excerpt: せっかくなのでMovableTypeの変更でお世話になったところのリンクでも貼っ...
From: SNOWFLAKES! Yukky's Note
Date: 2005.07.27
blank_space

この記事に関する商品 by:amazon
blank_space

本日のリンク元
blank_space
6456101561612706452
最近のエントリー
blank_space
カテゴリー
blank_space
Amagle PartnerNet
blank_space
お勧めAmazon
Amazon Web Services

Amazon Web Services

2017綛927 憜
  若悟 / 6101562若娯賢   罨<若
blank_space
リンク

クルマの部屋

本家のサイトだす(*゚д゚)
とほほのWWW入門
PHP マニュアル
レッツPHP!
できるCGI
TohrudcFamilyPage
コロボースキンDL
昨日 今日 明日
† Atelier Kanon †
Yahoo! JAPAN
Google ニュース 日本版

☆クルマ&ブログ仲間☆
GARAGE ODYSSEY
アエラスSとオレ物語
FULL-SCRATCH
ody industrial
サイコドライブblog
カービュー






track feed












Sony Style(ソニースタイル)

オートバックスドットコム

犬・猫の総合情報サイト『PEPPY(ペピイ)』

アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

【車買取ガリバー】高価買取ならガリバー

価格.com 自動車保険 一括見積り





RSS feed meter for http://blog.vaioclub.com/

QLOOKアクセス解析
blank_space
Powered by
blank_space