« [伊藤園] スーパーマリオ3Dランド オリジナルマスコット | トップページ | [mixiアプリ] マイ・レジェンド : 勇者の大陸「炎の神殿」クリア »

2012年7月 4日 (水)

[Web作成] アコーディオンメニュー

2012年5月22日の「メニューの展開と折りたたみ : すべて展開とすべて折りたたみ」記事のコメント欄で、「展開した部分が他の部分を展開した際に自動で閉じるというようなことはできますでしょうか?」というリクエストに応えてみました。

実際の動作は次の通り。

メニュー1
メニュー2
メニュー3

※2010年3月11日の「メニューの展開と折りたたみ」のjavascript部に一部機能追加することで、アコーディオンメニューを実現。

修正箇所は、次の通り。

■修正前のソース(javascript部のみ)
function doToggleClassName(obj, onClassName, offClassName){
  obj.className = (obj.className != onClassName) ? onClassName : offClassName;
}

■修正後のソース(javascript部のみ)
function doToggleClassName(obj, onClassName, offClassName){
  obj.className = (obj.className != onClassName) ? onClassName : offClassName;
  var elements = document.getElementsByTagName(obj.tagName);
  for (var i = 0; i < elements.length; i++) {
    if ((elements[i] != obj) && (elements[i].className == onClassName))
      elements[i].className = offClassName;
  }
}

また実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_vertmenu_accordion.html (別ウィンドウ表示)


■過去記事
2012年5月22日 (火) : すべて展開とすべて折りたたみ
2010年3月11日 (木) : メニューの展開と折りたたみ

|

« [伊藤園] スーパーマリオ3Dランド オリジナルマスコット | トップページ | [mixiアプリ] マイ・レジェンド : 勇者の大陸「炎の神殿」クリア »

プログラミング」カテゴリの記事

HTML・CSS・JS関連」カテゴリの記事

コメント

リクエストにお応えいただいたのですね!そうです。これが実現したかったことです。お忙しい中、わざわざありがとうございました。早速、サイトのメニュー部分に使用させていただきます。本当にありがとうございました。

投稿: サイケン | 2012年7月 6日 (金) 23時49分

■サイケンさんへ
お返事遅くなりましたが、無事やりたいことが実現できたようでよかったです!ヽ( ̄▽ ̄)ノ
サイトを拝見させていただきましたが、各作品の詳しい説明と作成過程がわかりやすく、子供たちにとってとても参考になる良い図画工作作品アイディア集サイトですね!!(^^) 授業の資料なども丁寧でわかりやすくとても参考になります。
今後のさらなる充実と発展を楽しみにしています。

投稿: fji | 2012年7月11日 (水) 07時50分

サイトを見ていただいたのですね。ありがとうございます。感想をいただきとてもうれしいです。当初、メニューを長々と表示していたのですが、ここを拝見してアコーディオンメニューですっきりとさせることができました。そうしたら今度は欲が出て、厚かましくリクエストさせていただいた次第です。快くお応えいただき本当に感謝しております。fjiさんのブログのご発展をお祈りいたします。これからもよろしくお願いいたします。

投稿: サイケン | 2012年7月18日 (水) 23時14分

何度もすみません。言葉間違えてました。アコーディオンメニューは、今回教えていただいたメニューですね。

投稿: サイケン | 2012年7月19日 (木) 21時59分

■サイケンさんへ
何かと多忙によりお返事遅くなってしまってますが・・・
こちらこそ、その後のご報告を頂きとても嬉しく思います。(^^)
また何かありましたら力になれるかどうかわかりませんが、気軽にリクエストしていただければ幸いです。
こちらこそ、これからもよろしくお願いいたします。

投稿: fji | 2012年7月29日 (日) 00時01分

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: [Web作成] アコーディオンメニュー:

« [伊藤園] スーパーマリオ3Dランド オリジナルマスコット | トップページ | [mixiアプリ] マイ・レジェンド : 勇者の大陸「炎の神殿」クリア »