- ベストアンサー
ホームページビルダー15 メニュー作成について
- ホームページビルダー15で折りたたみ式のメニューを作成する方法について質問があります。
- 参考にしたいメニューはこちらです↓ http://okwave.xrea.jp/jquery/test6797636/e.html 自分の作ろうとしているメニューはCSSプロフェッショナルテンプレートの「企業」から作ったものであり、うまくいかない状況です。具体的には、メニューBをクリックしたときにだけサブメニューが表示されたままになるようにしたいと思っています。
- どこに、どのように記述を入れれば、ボタンのデザインを崩さずに思い通りのメニューを実現できるのかご教示ください。
- suzutatyu
- お礼率66% (2/3)
- その他（ビジネス・キャリア）
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは。 CSS（スタイルシート）はどのように画面表示するかを定義するまでの機能しか持っていません。 （静的な定義・・・リンクしたHTMLファイルを呼び出す機能まで） Javascriptは画面でこのボタンが選択された場合、どのようなアクションを行い、その結果をどのように画面表示するかまでを定義しています。 （動的な定義・・・他HTMLファイルの呼び出し＋自HTMLファイル内での動作・結果表示までを行う） ビルダーはHTMLファイルを作成する汎用ツールであり、Javascript・PHPなど、HTMLファイル内での動作定義までは行えません。 逆を言えば、ビルダーでscriptやPHPまで対応できれば、WEB製作会社なんて要らないですよね・・・。 HTML技術に加えて、プログラミングまで勉強しないと難しいです・・・。 残念な回答でごめんなさい。
その他の回答 (2)
- wr_limited2004
- ベストアンサー率21% (271/1265)
すみません、補足をする前に回答ボタンを押してしまいました。 下記のソースを流用し、★マークのところを自分のHTMLファイル名やボタン名を変更すれば良いと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <style type="text/css"><!-- ul#navi,ul#navi > li ul{ list-style: none; padding: 0; margin: 0; } ul#navi > li{ width: 100px; border: 1px solid #000000; margin-bottom: 3px; padding: 3px 5px; background-color: #cccccc; } ul#navi > li > div{ cursor: pointer; } ul#navi > li ul{ display: none; } ul#navi > li ul li{ padding: 3px 5px; background-color: #999999; border: 1px solid #000000; margin-bottom:3px; } --></style> <script type="text/javascript"><!-- $(function(){ var ckarr = new Array();var menuck = new Array(); if(document.cookie){ ckarr = document.cookie.split("; "); for( var i = 0; i < ckarr.length; i++ ){ if(ckarr[i].indexOf('menuOpen=') === 0){ menuck = ckarr[i].substr(9,ckarr[i].length).split(":"); break; } } } if(menuck.length){ $("#navi > li").children("ul").each(function(i){ if($.inArray(String(i), menuck) >= 0){ $(this).css("display","block"); } }); } $("ul#navi > li > div").click( function(){ if($("~ ul",this).css("display") == "none"){ $("~ ul",this).css("display","block"); } else{ $("~ ul",this).css("display","none"); } setOpenMenu(); } ); }); function setOpenMenu(){ var arr = new Array(); $("#navi > li").children("ul").each(function(i){ if($(this).css("display") == "block"){ arr.push(i); } }); if(arr.length){ document.cookie="menuOpen="+arr.join(":")+"; path=/jquery/test6797636/; expires=Tue, 31-Dec-2030 23:59:59;"; } else{ document.cookie="menuOpen=; path=/jquery/test6797636/; expires=Tue, 1-Jan-1980 00:00:00;"; } } --></script> </head> <body> <ul id="navi"> <li> <div>折りたたみ１</div>・・・・・・・・・・・・・・★ <ul> <li><a href="./">TOP</a></li>・・・・・・・・・・★ <li><a href="a.html">項目Ａ</a></li>・・・・・・★ <li><a href="b.html">項目Ｂ</a></li>・・・・・・★ </ul> </li> <li> <div>折りたたみ２</div>・・・・・・・・・・・・・・★ <ul> <li><a href="c.html">項目Ｃ</a></li>・・・・・・★ <li><a href="d.html">項目Ｄ</a></li>・・・・・・・★ </ul> </li> <li> <div>折りたたみ３</div>・・・・・・・・・・・・・・★ <ul> <li><a href="e.html">項目Ｅ</a></li>・・・・・・★ </ul> </li> </ul> </body> </html>
お礼
お礼が遅くなりまして、申し訳ありませんでした。 ご丁寧にありがとうございました。 こちらのコードは、実は私も前に試してみていたのですが、今作成しているデザインの中に組み込みたいと考えておりまして、なんとかボタンで使用している画像などを使いつつ折りたたみメニューができないものかと思っております。 ですが、ホームページビルダーのCSSプロフェッショナルテンプレートで作った場合は無理なのでしょうか・・・ もし無理なら、お教えいただいたコードを実行したときに、グレーのメニューになりますが、これを任意の色や画像にする方法がありましたら教えていただけますでしょうか。 たびたび申し訳ございませんが、どうぞよろしくお願いいたします。
- wr_limited2004
- ベストアンサー率21% (271/1265)
＞参考にしたいメニューはこちらです →HTMLの他にjavascriptと言う技術も使って実現しています。 多分、ビルダーでは作成できないと思います。 直接、コードをコーディングしないと無理だと思います。 以下に参考にしたいメニューのコードを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"><!-- ul#navi,ul#navi > li ul{ list-style: none; padding: 0; margin: 0; } ul#navi > li{ width: 100px; border: 1px solid #000000; margin-bottom: 3px; padding: 3px 5px; background-color: #cccccc; } ul#navi > li > div{ cursor: pointer; } ul#navi > li ul{ display: none; } ul#navi > li ul li{ padding: 3px 5px; background-color: #999999; border: 1px solid #000000; margin-bottom:3px; } --></style> <script type="text/javascript"><!-- $(function(){ var ckarr = new Array();var menuck = new Array(); if(document.cookie){ ckarr = document.cookie.split("; "); for( var i = 0; i < ckarr.length; i++ ){ if(ckarr[i].indexOf('menuOpen=') === 0){ menuck = ckarr[i].substr(9,ckarr[i].length).split(":"); break; } } } if(menuck.length){ $("#navi > li").children("ul").each(function(i){ if($.inArray(String(i), menuck) >= 0){ $(this).css("display","block"); } }); } $("ul#navi > li > div").click( function(){ if($("~ ul",this).css("display") == "none"){ $("~ ul",this).css("display","block"); } else{ $("~ ul",this).css("display","none"); } setOpenMenu(); } ); }); function setOpenMenu(){ var arr = new Array(); $("#navi > li").children("ul").each(function(i){ if($(this).css("display") == "block"){ arr.push(i); } }); if(arr.length){ document.cookie="menuOpen="+arr.join(":")+"; path=/jquery/test6797636/; expires=Tue, 31-Dec-2030 23:59:59;"; } else{ document.cookie="menuOpen=; path=/jquery/test6797636/; expires=Tue, 1-Jan-1980 00:00:00;"; } } --></script> </head> <body> <ul id="navi"> <li> <div>折りたたみ１</div> <ul> <li><a href="./">TOP</a></li> <li><a href="a.html">項目Ａ</a></li> <li><a href="b.html">項目Ｂ</a></li> </ul> </li> <li> <div>折りたたみ２</div> <ul> <li><a href="c.html">項目Ｃ</a></li> <li><a href="d.html">項目Ｄ</a></li> </ul> </li> <li> <div>折りたたみ３</div> <ul> <li><a href="e.html">項目Ｅ</a></li> </ul> </li> </ul> </body> </html>
お礼
ご回答いただき、ありがとうございました。 よく分かりました。 また何かの機会によろしくお願いいたします。