アプリ版：「スタンプのみでお礼する」機能のリリースについて

ホームページビルダー15 メニュー作成について

解決済

  • 質問者：suzutatyu
  • 質問日時：
  • 回答数：3件

いつもお世話になっております。
以下のような、どなたかのご回答をもとに、ホームページビルダー15で同じような折りたたみ式のメニューを作成したいと考えおります。

参考にしたいメニューはこちらです↓

http://okwave.xrea.jp/jquery/test6797636/e.html

ですが、自分の作ろうとしているメニューはCSSプロフェッショナルテンプレートの「企業」から作ったものであり、なかなかうまくいきません。

以下、自分の記述を記載いたしますが、以下のようにしたいと思います。

通常は、
メニューA
メニューB
メニューC

というように、なっており、メニューBをクリックしたときにだけ

メニューA
メニューB
　　B-1
　　B-2
　　B-3
メニューC

と、サブメニューが表れ、メニューBをクリックするまでサブメニューも表示されたままにしておきたいと思います。（もちろん、メニューA～Cも、どのページでも表示されるようにする）

どこに、どのように記述を入れれば、ボタンのデザインなども崩さず、思い通りのメニューになるのか、ご教示いただければと思います。

どうぞよろしくお願いいたします。

*********自分の記述（ヘッダー情報も含まれていますが無視してください）***********

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.8.0 for Windows">
<title>TOP</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1A_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1A_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
</head>
<body id="hpb-template-01-01-02" class="hpb-layoutset-02" bgcolor="#ffffff" background="blue_p7b.gif">
<div style="top : 2px;left : 100px;
position : absolute;
z-index : 1;
visibility : visible;
" id="Layer1">
<div id="hpb-container">
<!-- header --><br>
<!-- header end --><!-- inner -->
<div id="hpb-inner">
<!-- wrapper -->
<div id="hpb-wrapper"><!-- main end -->
</div>
<!-- wrapper end --><!-- navi -->
<div id="hpb-nav">
<h3 class="hpb-c-index"></h3>
<ul>
<li id="nav-toppage"><a href="a.html"><span class="ja">メニューA</span><span class="en">TOPPAGE</span></a>
<li id="nav-concept"><a href="b.html"><span class="ja">メニューB</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="c.html"><span class="ja">メニューC</span><span class="en">SERVICE&amp;PRODUCTS</span></a>
</ul>
</div>
</div>

</div>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

こんばんは。



CSS（スタイルシート）はどのように画面表示するかを定義するまでの機能しか持っていません。
（静的な定義・・・リンクしたHTMLファイルを呼び出す機能まで）

Javascriptは画面でこのボタンが選択された場合、どのようなアクションを行い、その結果をどのように画面表示するかまでを定義しています。
（動的な定義・・・他HTMLファイルの呼び出し＋自HTMLファイル内での動作・結果表示までを行う）

ビルダーはHTMLファイルを作成する汎用ツールであり、Javascript・PHPなど、HTMLファイル内での動作定義までは行えません。
逆を言えば、ビルダーでscriptやPHPまで対応できれば、WEB製作会社なんて要らないですよね・・・。
HTML技術に加えて、プログラミングまで勉強しないと難しいです・・・。

残念な回答でごめんなさい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただき、ありがとうございました。
よく分かりました。
また何かの機会によろしくお願いいたします。

通報する
お礼日時：2011/09/17 23:02

No.2

すみません、補足をする前に回答ボタンを押してしまいました。


下記のソースを流用し、★マークのところを自分の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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなりまして、申し訳ありませんでした。
ご丁寧にありがとうございました。

こちらのコードは、実は私も前に試してみていたのですが、今作成しているデザインの中に組み込みたいと考えておりまして、なんとかボタンで使用している画像などを使いつつ折りたたみメニューができないものかと思っております。

ですが、ホームページビルダーのCSSプロフェッショナルテンプレートで作った場合は無理なのでしょうか・・・

もし無理なら、お教えいただいたコードを実行したときに、グレーのメニューになりますが、これを任意の色や画像にする方法がありましたら教えていただけますでしょうか。

たびたび申し訳ございませんが、どうぞよろしくお願いいたします。

通報する
お礼日時：2011/09/17 18:03

No.1

＞参考にしたいメニューはこちらです


→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. …
<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>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報