« [mixiアプリ] 通信制 脳力大学-漢字テスト : 沖縄コンプリート、漢字レベル28へ | トップページ | [コネタマ] 春夏秋冬、あなたが一番好きな季節はいつ? »

2010年3月11日 (木)

[Web作成] メニューの展開と折りたたみ

Web作成でJavaScriptを利用したメニューの展開と折りたたみを作ってみました。 ただネット検索するとたくさんの方法がありますが、どれもがIDを指定したやり方であったり、汎用性の無いJavaScriptコードによるやり方だったりするので、自分なりにCSSで展開と折りたたみを指定できる汎用性の高いものを意識してみました。
メニュー1
メニュー2
メニュー3

ソースコードは、次の通り。
<script type="text/javascript"><!--
function doToggleClassName(obj, onClassName, offClassName){obj.className = (obj.className != onClassName) ? onClassName : offClassName;}
function getParentObj(obj){return obj.parentElement || obj.parentNode;}
//--></script>

<style type="text/css">
.vmenuitem{background-color:#ffffcc; cursor:pointer; width:100px;}
.vmenu_on, .vmenu_off{margin:2px 0px;}
.vmenu_on .vmenuitem{border:1px solid #cccc77; border-left:5px solid #cccc77;}
.vmenu_off .vmenuitem{border:1px solid #77cccc; border-left:5px solid #77cccc;}
.vmenu_on ul{display:auto; margin:2px auto;}
.vmenu_off ul{display:none;}
</style>

<div class="vmenu_on">
  <div class="vmenuitem" onclick="doToggleClassName(getParentObj(this),'vmenu_on','vmenu_off')">メニュー1</div>
  <ul>
    <li><a href="#">項目1-1</a></li>
    <li><a href="#">項目1-2</a></li>
    <li><a href="#">項目1-3</a></li>
  </ul>
</div>
<div class="vmenu_off">
  <div class="vmenuitem" onclick="doToggleClassName(getParentObj(this),'vmenu_on','vmenu_off')">メニュー2</div>
  <ul>
    <li><a href="#">項目2-1</a></li>
    <li><a href="#">項目2-2</a></li>
    <li><a href="#">項目2-3</a></li>
  </ul>
</div>
<div class="vmenu_off">
  <div class="vmenuitem" onclick="doToggleClassName(getParentObj(this),'vmenu_on','vmenu_off')">メニュー3</div>
  <ul>
    <li><a href="#">項目3-1</a></li>
    <li><a href="#">項目3-2</a></li>
    <li><a href="#">項目3-3</a></li>
  </ul>
</div>


すべて展開とすべて折りたたみ」へ続く。

|

« [mixiアプリ] 通信制 脳力大学-漢字テスト : 沖縄コンプリート、漢字レベル28へ | トップページ | [コネタマ] 春夏秋冬、あなたが一番好きな季節はいつ? »

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

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

コメント

こんばんわ
すごいですねw
僕もプログラミングに興味があるんですが
なにから始めればいいですかね?
なんだかよく分からないので教えてください!

投稿: BEA | 2010年3月13日 (土) 00時52分

■BEA さんへ
どもどもー!(  ̄▽ ̄)ノ ありが㌧w
プログラミングを始めるなら、手始めにHTMLとJavaScriptを触るところから始めると良いかなと思いますw(投資費用0円だしw)
特にJavaScriptの書き方(構文)を覚えると、代表的なC言語やVB言語など、書き方はほとんど共通してるので取っ掛かりとして始めて行くのが良いと思いますw
まずは、Windows標準のメモ帳にこの日記のソースコードをコピペして、test.htmlというファイル名で保存後、保存したファイルをブラウザで開くと動作を確認できたりとかね!w
JavaScriptの書き方については、次のサイトをオススメしておきます( ̄▽ ̄ )ゞ
http://www.tohoho-web.com/js/index.htm

投稿: fji | 2010年3月13日 (土) 01時54分

はじめましてWEB初心者です。
テンカイメニュー使わせていただきました。
ありがとうございます。

投稿: matrasan | 2011年2月 7日 (月) 22時56分

■matrasanさんへ
ご丁寧にご連絡ありがとうございます。
リンク先サイトを訪問させていただきましたが、とても内容が充実し良く作りこまれたサイトですね!
展開メニューを活用していただきとても嬉しいです(^^)

投稿: fji | 2011年2月 8日 (火) 10時43分

お返事まで頂き感謝です。
7つのカテゴリメニューページを持っていたのを
トップページに集約したのです。
fji様の御蔭でコンパクトになりました。
検索から枝葉に訪問いただいても一直線にお帰りに
なられます。せいぜいカテゴリメニューページ内で
往復されるのを強引にトップページに
誘導しようとしているのです。

作り手の勝手とは思うのですが。
プロに一度教わりたいと思います。

投稿: matrasan | 2011年2月 8日 (火) 14時13分

■matrasanさんへ
作り手としては、関連する他のページも一通り見ていって欲しいと願いますよね。(^^)
そのためには手間はかかりますが、ご訪問いただいた枝葉ページにも他にどんなページがあるのかが一目で見えるようにカテゴリメニューをすべてのページに埋め込むことで、誘導させやすくなるかなと思います。
しかしページを新規追加するたびに、すべてのページに対してカテゴリメニューを更新していく作業がかなりの労力となってしまいますので、インラインフレーム(iframe)でカテゴリメニューだけのページを表示させるようにすることで、更新の手間が一気に省けるようになると思います。
(また逆にコンテンツページをiframeで表示する方法もあると思います)
matrasanさんの運営しているサイトを改めて拝見させていただきましたが、好みによるとは思いますが、各ページの左右コンテンツ幅などのレイアウトを崩さないようにページ上部にプルダウン型の横メニューを設置するのが良いかもしれませんね。(^^)

投稿: fji | 2011年2月 8日 (火) 18時08分

ご指導ありがとうございます。
全てのページ上部にプルダウンメニューですね。
なるほど。
今回コピペさせていただく前にプルダウンメニューも
検討しましたがトップページにはFji様の展開メニューが
最適だったので採用させていただきました。
Htmlも今だ理解できていないのに
また悪あがきになりそうですが。
ご指導感謝。

投稿: matrasan | 2011年2月 8日 (火) 19時53分

■matrasanさんへ
さっそくページ上部の多くのページにプルダウンメニューが追加されたようで、同一カテゴリのページがまとまっていて、とても使い勝手がよくなりましたね(^^)
今後のご活躍を応援したいと思います。

投稿: fji | 2011年2月 9日 (水) 02時57分

おおっ!
ご覧頂きありがとうございます。
プルするだけで他のページがチラッと見える。
これが良いのかもしれません。
ご指導ありがとうございました。
感謝、感激です。

また是非教えてください!

投稿: matrasan | 2011年2月 9日 (水) 09時38分

■matrasanさんへ
また何かお力になれることがありましたら幸いです。(^^)
サイト作りはコンテンツの量や他所からの刺激に応じて、いつまでも試行錯誤が続くものだとは思いますが、少しでも満足できるものに仕上がっていく過程が一番楽しい時間でもありますよね。
色々な食品の作り方や、DIYによるテレビ台やラックなど今後何かを作ろうと思ったときに、とても参考になりそうなので、そのときは是非参考にさせていただきますね!(^^)

投稿: fji | 2011年2月 9日 (水) 13時04分

はじめまして。
いろいろ探していたのですが、
ここに載ってるコードが一番簡潔かつわかりやすくて、
使い勝手もよかったので参考にさせていただきました!
ありがとうございます!

投稿: 121.103.51.70 | 2011年10月 1日 (土) 22時37分

■121.103.51.70さんへ
参考にしていただき、とても嬉しく思います。
こちらこそ、ありがとうございます!(^^)

投稿: fji | 2011年10月 2日 (日) 00時11分

初めまして!メニューのレイアウトに悩んでいたらたどり着きました。
こちらのソースがスクリプト知識の無い自分でも簡単な装飾もできたのでありがたいです!
やっぱりCSSをやるならjavaも知っておいたほうがいいのでしょうか…少しずつ触れていきたいです。

投稿: 宏太 | 2012年2月13日 (月) 23時30分

■宏太さんへ
ご訪問&コメントありがとうございます!
少しでもこちらのソースを元に活用できたのなら、とても嬉しいです。(^^)
できることならCSSのみで実現したいところではありますが、
スクリプトを利用することでやりたいことがよりシンプルに解決できることがあるため、手段の一つとして知っておくとより可能性が広がるかと思います。(^^)

投稿: fji | 2012年2月14日 (火) 00時35分

はじめまして。
いきなりですが、質問させて頂きます。

このページに掲載されているソースでは、個々のメニューを展開したり折りたたんだりしていますよね。これをすべて展開やすべて折りたたむようにできませんでしょうか。

ご返答、お待ちしております。

投稿: YTk | 2012年5月21日 (月) 15時54分

■YTkさんへ
はじめまして。
質問ありがとうございます。(^^)
このページのソースコードを元に「すべて展開」や「すべて折りたたむ」方法を実現した記事を新たに書いてみましたので参考にしていただけると幸いです。
http://fjiblog.cocolog-nifty.com/blog/2012/05/web-0bf7.html

投稿: fji | 2012年5月22日 (火) 21時26分

はじめまして。
ホームページの更新履歴を展開したり、折りたたんだり出来ないかと思い、その方法を検索サイトで探していたところ、こちらのブログにたどりつきました。
早速、ソースコードを使わせて頂いたところ、無事に更新履歴の展開と折りたたみが出来ました。
自分の力では不可能だった事が、こんなにも簡単に出来た時の感動は、何とも言葉では表現できません。
このようなノウハウを広く公開して下さっている事に、感謝の気持ちでいっぱいです。ありがとうございました。
これからの更なるご活躍をお祈りしております。

投稿: kankan25 | 2012年7月 5日 (木) 19時32分

■kankan25さんへ
はじめまして。
ご訪問&コメントありがとうございます!
こちらからもサイトを訪問させていただきましたが、更新履歴に見事活用していただき、とても嬉しく思います。(^^)
こちらこそ、kankan25さんの更なるご活躍を楽しみにしています。
ご丁寧なご連絡ありがとうございました。(^^)

投稿: fji | 2012年7月 5日 (木) 19時52分

初めまして。
HPのリニューアルに、こちらの折りたたみメニューを使用させていただき、現在構築中です。

さて、使用する上で、メニューの大きさ(長さ)を変えようと思ったのですが、思ったようにうまくいきません。
こちらで表示されているタグのうち、変えたのは枠の色のみです。

メニューの大きさ(長さ)はどのようにして変えたらいいでしょうか?

投稿: shu | 2013年1月 4日 (金) 10時27分

■shuさんへ
初めまして。
折りたたみメニューを活用していただき、とても嬉しく思います。
メニューの大きさ(長さ)を変えたいのは、横幅のことでしょうか?

横幅は、
.vmenuitem{background-color:#ffffcc; cursor:pointer; width:100px;}
のwidth:100pxの数値をwidth:150pxに変更することで横幅を150pxへ変更可能になるかと思います。

また、各縦幅を変更したいのでしたら、
例えば、height:50px; を追加することで、縦幅を50pxへ変更可能になるかと思います。
例:(
.vmenuitem{background-color:#ffffcc; cursor:pointer; width:100px; height:50px;}
)
上記以外の大きさのことでしたら、より詳しく教えていただけると幸いです。

投稿: fji | 2013年1月 4日 (金) 19時28分

以前質問させていただきました、shuです。

おかげさまでHPに組み込むことができました。

訳もわからず作ったので、駄作ですが、見てください。

http://daikonnohana.sakura.ne.jp/

投稿: shu | 2013年5月24日 (金) 23時38分

■shuさんへ
HP拝見させていただきました。
スタイルシートとうまく組み合わされていて、お見事です!
デザインも綺麗にまとまっていてサイト全体がとても見やすく使いやすいですねー!!
ご丁寧なお返事ありがとうございました。
また何かありましたら気軽に声をかけていただければと思います。(^^)

投稿: fji | 2013年5月25日 (土) 01時14分

初めまして。
展開メニュー拝見させていただきました。
当方、Webコンテンツを表示するためにこちらを応用させていただきたいのですがプログラムの著作権等制約はございますでしょうか。

投稿: fire | 2013年6月 6日 (木) 11時25分

■fireさんへ
初めまして。
展開メニューの拝見ありがとうございます。
著作権には値しないほどの単純なプログラムコードだと思いますので、制約無しで自由に利用、応用していただければ幸いです。

投稿: fji | 2013年6月 6日 (木) 11時46分

さっそくのご回答ありがとうございました。

> 著作権には値しないほどの単純なプログラムコードだと思いますので、制約無しで自由に利用、応用していただければ幸いです。
ご許可いただきありがとうございます。
活用させていただきます。

展開メニューの欄にコメントしてしまいましたが、実際はアコーディオン方式の方だったようです・・・

完成イメージは・・

①・タイトル-
  ・内容
  ・内容
②・タイトル+
③・タイトル+

すべて閉じている状態から始まり。
タイトル部分は画像になり(+-表示があるような物)
①の様に開いたら+⇒-になりコンテンツ表示
②を開くと①は-⇒+になり閉じ②は①の様にコンテンツ表示
をするというものを想定しております。

当方javascript初心者な為度々質問等してしまうかもしれませんが、その時は宜しくお願い致します。

投稿: fire | 2013年6月 6日 (木) 12時09分

■fireさんへ
画像への置き換えに関してはスタイルシートの調整で表現できると思いましたので、ちょっと試しにそれっぽいものを作ってみましたので、参考になれば幸いです。

http://fjiblog.cocolog-nifty.com/html/fji_vertmenu_accordion_img.html

別のやり方も色々あると思いますので、もし行き詰まったときは気軽に質問していただければと思います。

投稿: fji | 2013年6月 6日 (木) 14時07分

サンプルまで作成していただきありがとうございます。
参考にさせていただきます。

話は変わりますが、実際本文の箇所にgoogleMAPを挿入することを想定しており、そのままiframeを本文に記述すると、mapがずれるという現象が起こっておりはまっております・・
おそらく読み込みのタイミングの問題だと思うのですが。
何か良い対処方法はございますでしょうか?

投稿: fire | 2013年6月 6日 (木) 15時00分

続けてすいません。

説明が不足していたので追記します。
メニューは初期状態はすべて閉じた状態です。
という文言が抜けておりました。

申し訳ございません。宜しくお願い致します。

投稿: fire | 2013年6月 6日 (木) 15時12分

■fireさんへ
グーグルマップがずれる現象は、実際のHTMLの記載内容を一つ一つ確認してみないことには判断が難しいところですが、もしhtmlコードの最初に記載する宣言で、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
となっていなければ、一度上記の宣言に差し替えて見てみて下さい。
それでもズレるようでしたら、iframeのパラメータ<iframe width="***" height="***" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="***"></iframe>がグーグルマップ指定のものと合っているかどうか再確認してみてください。
(コメント欄にそのままだとタグコードが表示されないため、"<"と"http"を全角の"<"と"http"に置き換えてコードを書いてます。)

さきほどのサンプルを作る過程で、すべて閉じている状態から始まり。という説明がありましたので、メニューの初期状態もすべて閉じた状態に合わせてあります。

投稿: fji | 2013年6月 6日 (木) 16時12分

こんにちは

主様に教えていただいたものを試したのですが結果は変わらず・・
ググってみた所、メニューがすべて閉じている状態(display:none;)でiframeをすでに読み込んでいると起きる現象の様です。

この間からいろいろ試してはいるのですが、ことごとく打ちのめされています・・

何か良い方法があればご教授ください。お願い致します。

投稿: fire | 2013年6月10日 (月) 13時03分

こんにちは。
すぐ思いつく対処方法でも結果は変わらずでしたかー。
それは残念です。
ブラウザはIE6とかではなく、どのブラウザでも同じ現象でしょうか?
もしよろしければその現象が起きるHTMLコードを見せていただけないでしょうか?
(display:none;)でダメなら、(visibility:hidden;)などに置き換えた方法など、こちらで試行錯誤してみた対処方法をアドバイスできるかもです。

投稿: fji | 2013年6月10日 (月) 13時47分

お返事ありがとうございます。

ブラウザはIEでは○ FirefoxとCromeでは×です。
単純に主様のコードにGOOGLEMAPで取得するIFRAMEを入れただけの物です。
LI部分にマップを張り付けて、すべてメニューを閉じた状態から表示すると中心部がずれて表示されます。

投稿: fire | 2013年6月10日 (月) 14時02分

■fireさんへ
なるほど!症状を確認できました。
さっそく試行錯誤してみたところ、以下に記載のスタイルシートの調整のみでこちらはうまく行きましたので、試してみてください。

・旧コード
.vmenu_on ul {display:auto; margin:2px auto; padding-left:25px;}
.vmenu_off ul {display:none; padding-left:25px;}

・新コード
.vmenu_on ul {height:auto; overflow-y:visible; margin:2px auto; padding-left:25px;}
.vmenu_off ul {height:0px; overflow-y:hidden; margin:0px; padding:0px; padding-left:25px;}

投稿: fji | 2013年6月10日 (月) 14時34分

お返事ありがとうございます。

コード書き換えて実行したらできました。
ずっとjavascriptでどうやったらできるのかと考えていてまさかcssの方をいじれば良かったのかと・・

迷宮に入っていたので助かりました。
ありがとうございました。

投稿: fire | 2013年6月10日 (月) 15時02分

■fireさんへ
無事動作したようで良かったです。
また何かありましたら、気軽に声をかけていただければと思います。(^^)

投稿: fji | 2013年6月10日 (月) 15時37分

初めまして。

自分のHPのサイドバーを折りたたみ・展開したくて、
こちらのブログにたどり着きました。
元々のHPは
http://bluegreen.jp/template/sample/cool01_green/
上記からテンプレートをダウンロードしています。
これで既にHPは作成済みなのですが、コンテンツが増えてきて折りたたみ・展開したいと思っています。
自分なりにカスタマイズしてみたのですが、
元々のHPでは、マウスが乗ると背景色が変わって
矢印の画像が出ます。
それをメニュー1やメニュー2に当たる部分
(展開前の状態)でも同様にマウスが乗ると背景色が変わって矢印画像が出るようにしたいのですが、
どうしたらいいのでしょうか。

(テストURLを任意の欄に入れています。)

現在cssの部分は
.vmenuitem a:hover{
color: #096;
background-image: url(../img/navi_li_bg.gif);
background-position: right bottom;
}
なっています。

お手数ですが、どうぞよろしくお願いしますm(_ _)m

投稿: ruru | 2014年10月17日 (金) 14時52分

■ruruさんへ
初めまして、ruruさん。
長らく留守にしていたため、かなり遅いお返事となってしまい申し訳ございません。
その後、展開前の状態での動作は無事解決したでしょうか?
(サイトを拝見させていただいたところ、無事解決しているように見えます)
今回はお役にたてませんでしたが、また何かありましたら気軽に声を掛けていただければと思います。(^^;)

投稿: fji@管理人 | 2015年1月 3日 (土) 18時56分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/503754/47784080

この記事へのトラックバック一覧です: [Web作成] メニューの展開と折りたたみ:

« [mixiアプリ] 通信制 脳力大学-漢字テスト : 沖縄コンプリート、漢字レベル28へ | トップページ | [コネタマ] 春夏秋冬、あなたが一番好きな季節はいつ? »