onclickを利用した伸縮メニューの作成方法を教えてください。
http://javascript123.seesaa.net/article/10746799 …さんののサンプルソースを基に自分なりのメニューができて非常に感謝しているのですが、もう2点改良したいのでどなたか教えてください。
(1):一番上のメニュー"画像 img "をクリックするとサブメニューが表示されるのですが、2番目のメニュー”ブログ カスタマイズ”を押した時に一番上のメニューが閉じずにそのまま”ブログ カスタマイズ”のサブメニューが表示して欲しいのです。3番目のメニュー"スタイルシート "も同じです。つまり1回目のクリックで開き次クリックするまで閉じないで欲しいのです。
(2):一番上のメニュー"画像 img "のサブメニューは常時開いたままで2つめ以降のメニューを(1)で書いたような動作はできないでしょうか?
改良すべきソース箇所とソースを詳細に教えてください。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
<!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;
}
わかりました!!!!! my--さん本当にありがとうございました。
私がCSSをわかっていないのが大きな原因でした。
教えていただいたソースをいろしろ分解してみたら、質問した(1)は思ったように動きそうです。
厚かましいお願いなのですが、1番目のメニューは伸縮メニューを開いたまま2番目と3番目のメニューだけを伸縮させることは難しいのでしょうか?頂いたソースをいろいろかまってみるのですが上手くいきません。ぜひご伝授ください。
お手数ですがよろしくお願いします
No.3
- 回答日時:
>質問者
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属性を削除してみて下さい。
すいませんした。
用件(2)の意味が今わかりました。
頂いた意見を基に自分なりにアレンジしてみます。
未熟な私にご指導いただき感謝いたします。
ありがとうございました。
No.2
- 回答日時:
スタイルシートがゴチャゴチャしすぎてチェックする気がおこらない…
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 を書き直してみる事をオススメします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Visual Basic(VBA) 条件に一致した場合の処理 2 2022/10/18 06:30
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- その他(IT・Webサービス) メニューについて 3 2022/07/12 16:06
- Visual Basic(VBA) 【ExcelVBA】動的にボタン、ボタン名を生成できますか? 7 2022/04/08 12:54
- デスクトップパソコン PCでファイルを右ドラッグして出てくるメニューの編集方法を教えて下さい 2 2023/01/17 13:31
- その他(Microsoft Office) Microsoft Edgeの「ニュースと関心事項」についてお聞きします。 3 2023/05/22 12:08
- Word(ワード) ワードでメニュー表を作っています。 1番上の「メニュー」の文字を枠で囲っているのですが、この枠をもう 3 2023/01/23 14:55
- 筋トレ・加圧トレーニング 高校生女子です。 私は一年ほど前から自宅で腹筋トレーニングをしているんですが、なかなかメニューを安定 2 2022/10/06 14:22
- 飲食店・レストラン 飲食店で食べ物を選ぶのに時間をかける友人。男です。例えばレストランでメニューを選ぶ際、私は30秒あれ 3 2022/10/15 08:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptテキストBOX色を元に...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
指定したパスが現URLに含まれて...
-
removeAttribute()メソッドで削...
-
クリックすると下に説明文が出...
-
リンク色を動的に変更したい。i...
-
ネストされたハッシュの値から...
-
iframe内からjQueryで指定したい
-
JavascriptでDIV~DIVをリロードで
-
プルダウンとチェックボックス...
-
checkboxにチェックを入れると...
-
テキストエリア内の一部の文字...
-
折りたたみ式JavaScriptをcheck...
-
背景色を一定時間ごとにランダ...
-
JSで動的にリンクを作成
-
javascriptでのアコーディオン...
-
複数のリンク画像を一定時間で...
-
ページ遷移後のcssプロパティ保持
-
IFRAMEの表示/非表示を切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
背景色を透明化
-
createElementで作成した要素を...
-
javascriptでpostした値が取得...
-
読み込んだQRコードをフォーム...
-
iframe内のリンクが飛ばないの...
-
jQueryでクリックされた要素のi...
-
ダブルクォーテーションが消え...
-
<div ~ </div> で囲まれたテキ...
-
【HP作成】クリックすると下...
-
<Div>の中の要素の数を調べる
-
jQueryで特定id以外の下にある...
-
VBScript+IEのチェックボック...
-
removeAttribute()メソッドで削...
-
折りたたみ部分にアンカーでリ...
-
onclickを利用した伸縮メニュー...
-
背景色を一定時間ごとにランダ...
おすすめ情報
