重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

onclickを利用した伸縮メニューの作成方法を教えてください。
http://javascript123.seesaa.net/article/10746799 …さんののサンプルソースを基に自分なりのメニューができて非常に感謝しているのですが、もう2点改良したいのでどなたか教えてください。

(1):一番上のメニュー"画像 img "をクリックするとサブメニューが表示されるのですが、2番目のメニュー”ブログ カスタマイズ”を押した時に一番上のメニューが閉じずにそのまま”ブログ カスタマイズ”のサブメニューが表示して欲しいのです。3番目のメニュー"スタイルシート "も同じです。つまり1回目のクリックで開き次クリックするまで閉じないで欲しいのです。

(2):一番上のメニュー"画像 img "のサブメニューは常時開いたままで2つめ以降のメニューを(1)で書いたような動作はできないでしょうか?

改良すべきソース箇所とソースを詳細に教えてください。
よろしくお願いします。

A 回答 (3件)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>sample</title>
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<style type="text/css">
<!--
#accordion{
width:400px;
font-size : 15px;
border:5px solid #eee;
padding:5px;
width:400px;
}

.Tab{
text-align:left;
width:390px;
border:1px solid gray;
margin-bottom : 5px;
cursor:pointer;
background:#00b51e;
}

.Tab_child{
color : black;
/*display:none;*/
overflow:hidden;
line-height :1.2;
text-align:left;
width:380px;
margin-bottom : 2px;
padding-left : 10px;
background-color : #f6f6f6;
font-weight : normal;
cursor : default;
}

.titlemoji{
color:#FFFFFF;
font-weight:bold;
height : 18px;
text-indent : 10px;
}

-->
</style>

<script type="text/javascript">
<!--
var i = 1;
var v, TabH;
var toggle = { Tab01: "opn", Tab02: "opn", Tab03: "opn" };

function Myshow(TabID, Hi) {
TabH = Hi;
if (toggle[TabID] == "cls") {
sameTab(TabID);
toggle[TabID] = "opn";
} else if (toggle[TabID] == "opn") {
var elemt = document.getElementById(TabID);
var par = elemt.parentNode;
par.style.backgroundColor = '#00CCFF';
opnTab(TabID);
toggle[TabID] = "cls";
}
}

function sameTab(TabID) {
var elemt = document.getElementById(TabID);
var par = elemt.parentNode;
par.style.backgroundColor = '#00b51e';
clsTab(TabID)
}

function clsTab(TabID) {
i = Math.ceil(i * 1.2);
v = TabH - i;
if (v > 0) {
document.getElementById(TabID).style.height = v + "px";
} else {
document.getElementById(TabID).style.height = 0;
i = 1;
return;
}
setTimeout("clsTab('" + TabID + "')", 1);
}

function opnTab(TabID) {
if (i < TabH) {
i = Math.ceil(i * 1.2);
document.getElementById(TabID).style.height = i + "px";
} else {
document.getElementById(TabID).style.height = TabH + "px";
i = 1;
return;
}
setTimeout("opnTab('" + TabID + "')", 1);
}

document.write(
'<style type="text/css">'
//+ '#Tab01 { height: 100px; }' // 要件(2) onclick ="Myshow('Tab01','100')" 削除
+ '.Tab_child { height: 0; }'
+ '<\/style>'
);
// -->
</script>
</head>
<body>
<div id = "accordion">
<div class="Tab" onclick ="Myshow('Tab01','100')"><span class="titlemoji">画像 img</span>
<div class="Tab_child" id="Tab01">
ドラッグして移動<br>
フェードイン<br>
ズームアップ<br>
補足説明文<br>
ロールオーバー<br>
</div></div>
<div class="Tab" onclick ="Myshow('Tab02','145')"><span class="titlemoji">ブログ カスタマイズ</span>
<div class="Tab_child" id="Tab02">
ファビコンの設置<br>
ブラウザのアドレスバー、ブックマーク(お気に入り)リストやタブブラウザのタブに表示される小さなアイコンです。<br>
背景画像の固定<br>
background-attachment :fixed;を使ってこのブログの背景を固定してみました。
</div></div>
<div class="Tab" onclick ="Myshow('Tab03','200')"><span class="titlemoji">スタイルシート</span>
<div class="Tab_child" id="Tab03">
スタイルシートだけでポップアップメニューを表示<br>
画像や文字列にマウスを載せると補足説明文を表示します<br>
疑似クラス a:hover <br>
アンカーテキストにマウスが来たときにアンカーのスタイルを変更するという動作を、JavaScriptを利用しなくてもスタイルシートだけで実行します。<br>
display プロパティ<br>
display プロパティは表示の仕方を指定するプロパティです。このサンプルでも使っています。
</div></div>
</div>
</body>
</html>

こんな感じでしょうか。
「改良すべきソース箇所」とありますが、そのあたりは元と比較していただくとして。
もっと美しく書くことができると思いますから、あとは自身で工夫して下さい。

この回答への補足

myさんありがとうございました。ソースをコピーしてHPを作成たら思ったように動きました。思ったようなな動きをして感動しました。本当に・本当にありがとうございました。
教えて頂いたのに申し訳ないのですが、自分が作成したCSSに変更したら伸縮メニューが動きませんでした。どこが悪いのか全然わかりません。また質問(2)の1番目のメニューは伸縮メニューを開いたまま2番目と3番目のメニューだけを伸縮させることはできないでしょうか?
お手数ですがよろしくお願いします。

自分で変更したCSSです。サンプルのCSSを下記のCSSに変更するとメニューは伸縮しませんでした。どこが悪いのか全然わかりません。

#accordion{
width : 226px;
padding : 2px;
background-color : #eeeeee;
}

.Tab{
text-align:left;
width : 225px;
border-top-style : solid;border-right-style : solid;border-bottom-style : solid;border-left-style : solid;border-top-color : #cccccc;border-right-color : #cccccc;border-bottom-color : #cccccc;border-left-color : #cccccc;border-top-width : 1px;border-right-width : 1px;border-bottom-width : 1px;border-left-width : 1px;
margin-bottom : 5px;
cursor:pointer;
background : #ffffff;
padding-top : 5px;
padding-bottom : 5px;
bottom : auto;
right : auto;
}

.Tab_child{
color : black;
display:none;
overflow:hidden;
line-height :1.2;
text-align:left;
margin-bottom : 2px;
padding-left : 10px;
background-color : #f6f6f6;
font-weight : normal;
cursor : default;
padding-right : 5px;
font-size : 0.8em;
letter-spacing : 3px;
padding-top : 10px;
}

.titlemoji{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Verdana, Arial, sans-serif, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
color : #0080c0;
font-weight:bold;
padding-left : 10px;
font-size : 0.9em;
letter-spacing : 3px;
text-align : left;
padding-top : 7px;
padding-bottom : 7px;
}

補足日時:2010/03/27 19:41
    • good
    • 0
この回答へのお礼

わかりました!!!!! my--さん本当にありがとうございました。
私がCSSをわかっていないのが大きな原因でした。
教えていただいたソースをいろしろ分解してみたら、質問した(1)は思ったように動きそうです。
厚かましいお願いなのですが、1番目のメニューは伸縮メニューを開いたまま2番目と3番目のメニューだけを伸縮させることは難しいのでしょうか?頂いたソースをいろいろかまってみるのですが上手くいきません。ぜひご伝授ください。

お手数ですがよろしくお願いします

お礼日時:2010/03/27 23:43

>質問者



document.write(
'<style type="text/css">'
//+ '#Tab01 { height: 100px; }' // 要件(2) onclick ="Myshow('Tab01','100')" 削除
+ '.Tab_child { height: 0; }'
+ '<\/style>'
);
------------------------------
No.1ではスクリプト(writeメソッド)でCSS「height: 0」を設定しています。
displayプロパティ(block|none)の操作はしていません。

.Tab_child{
/*display:none;*/
------------------------------
「display: none」は書かないように。

>要件(2)

//+ '#Tab01 { height: 100px; }' // 要件(2) onclick ="Myshow('Tab01','100')" 削除
------------------------------
ここに書いてある通りなんですが
「//」はそれ以降の行をコメントとして扱います。
先頭の「//」を削除しHTMLの「onclick ="Myshow('Tab01','100')" 」
onclick属性を削除してみて下さい。
    • good
    • 0
この回答へのお礼

すいませんした。
用件(2)の意味が今わかりました。
頂いた意見を基に自分なりにアレンジしてみます。
未熟な私にご指導いただき感謝いたします。
ありがとうございました。

お礼日時:2010/03/28 22:23

スタイルシートがゴチャゴチャしすぎてチェックする気がおこらない…



border-top-style : solid;border-right-style : solid;border-bottom-style : solid;border-left-style : solid;border-top-color : #cccccc;border-right-color : #cccccc;border-bottom-color : #cccccc;border-left-color : #cccccc;border-top-width : 1px;border-right-width : 1px;border-bottom-width : 1px;border-left-width : 1px;

上のような書き方では訳がわかりません。なぜバラバラに同じ設定を?
まとめられるものはまとめてしまいましょう。

border : solid #ccc 1px;

また、position 属性を使用していないのに right 属性や bottom 属性を指定するなど、意味不明な箇所も見受けられます。
もう一度最初から CSS を書き直してみる事をオススメします。
    • good
    • 0
この回答へのお礼

すいませんでした。
まだまだCSSについて初心者で理解していないのでせっかく見ていただいたのに・・・
今後更に勉強ます。

お礼日時:2010/03/28 22:19

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