人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページ 左のリンク に サブメニューがでるようにしたい。
また ご教示
(?すいません 私の場合はご教示じゃないですねm(_ _)m)
公開している下記のページですが・・・・
http://kago-shintaisou.digi2.jp/
うまく 表現 できないのですが・・・
左のリンク に サブメニューのリンクを つくって
右にページを表示したい と 思ってます。
たとえば、「コース区分」のところに サブメニューを
つくって 「コース区分」のところには なんか ▼ が
あって たとえば 小学生 とか 中学生・高校生
とかのリンクをつくって 中学生・高校生 のリンクを
クリックすると 右に その 内容が 表示 される
ように したいです。
↑のいいまわし で つたわり ますでしょうか。
わたし むちゃくちゃな 相談を しているのでしょうか。
大変 すみませんが どうか よろしく お願いします。
m(_ _)m
いちおう IE9 Firefox20 スマホ(Android・・←つづりあってないかも)
の3つ で 動作確認 したい と 思って ます。


●質問者: meichi
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● だわかき
●40ポイント

インラインフレーム(iframeタグ)を使えばできます。
iframeはHTML5対応していますので、スマホでも大丈夫です。

下のサイトが参考になります。

iframe型左メニュー
http://adan.noor.jp/f/iframemenu/


meichiさんのコメント
ご回答 ありがとう ございます. 見たのですが さっぱり ??です.m(_ _)m どこが 分からないかも ??? です. すみません. レイアウトは くずしたしないです 非難 中傷 は ご勘弁 ください

だわかきさんのコメント
何が分からないのか書いてくれないとフォローしようがありません。

2 ● holoholobird
●400ポイント

質問は、左のメニューをこんな感じに改変したいってことですよね。

直接の回答ではありませんが、どんなプログラムを作ればいいのか確認するために、一度メニューのみのプログラムで確認したいと思います。

下のhtmlを適当に保存して、開いてみてください。
コース区分→小学生 とクリックすると、shougakkou.htmlが開くようになっています。

このような動作をアコーディオンパネルと言います。

こういうプログラムを実装したいのであれば、その旨を教えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script type='text/javascript'>
$(function() {
 $("#accordion li ul").hide();
 $("#active").show();
 $("#accordion > li > a").click(function(){
 var click = $("+ul",this);
 click.slideDown();
 $("#accordion ul").not(click).slideUp();
 $(".arrow").removeClass("rotate");
 $("> .arrow",this).addClass("rotate");
 return false;
 });
});
</script>

<style>
@font-face {
font-family: 'Typicons';
src: url('fonts/typicons-regular-webfont.eot');
src: url('fonts/typicons-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/typicons-regular-webfont.woff') format('woff'),
url('fonts/typicons-regular-webfont.ttf') format('truetype'),
url('fonts/typicons-regular-webfont.svg#TypiconsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#accordion{
 list-style: none;
 width: 500px;
 font-size: 16px;
 line-height: 1;
 background-color: #add8e6;
 background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 

255, .2) 75%,transparent 75%, transparent);
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 

255, 255, .2) 75%,transparent 75%, transparent);
 background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 

255, .2) 75%,transparent 75%, transparent);
 background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 

255, .2) 75%,transparent 75%, transparent);
 background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 

.2) 75%,transparent 75%, transparent);
 -moz-background-size: 4px 4px;
 -webkit-background-size: 4px 4px;
 -o-background-size: 4px 4px;
 -ms-background-size: 4px 4px;
 background-size: 4px 4px;
 margin: 0;
 padding: 0;
 border-top: 15px solid #1b4958;
 border-bottom: 15px solid #1b4958;
 border-radius: 3px;
 box-shadow: 2px 3px 2px rgba(0,0,0,.2);
}
#accordion > li{
 padding: 0;
 border-right: 1px solid #3a9fc0;
 border-left: 1px solid #3a9fc0;
}
#accordion li a{
 display: block;
 position:relative;
 color: #333;
 text-decoration:none;
 text-shadow: 0 1px 1px rgba(255,255,255,.7);
 padding: 15px 45px;
 border-bottom: 1px solid #79bfd6;
 border-top: 1px solid #eef7fa;
 -moz-transition: .3s;
 -webkit-transition: .3s;
 -o-transition: .3s;
 -ms-transition: .3s;
 transition: .3s;
}
#accordion > li:first-child > a{
 border-top: 0px;
}
#accordion > li a:before {
 position: absolute;
 top: 50%;
 left: 15px;
 font: 24px/100% 'Typicons';
 content: "\0023";
 color: #2f7f99;
 margin-top: -10px;
 text-shadow: 1px 1px 0px rgba(255,255,255,.7);
}
#accordion li a:hover{
 color: #1b4958;
 background: rgba(0,0,0,.1);
 border-top-color: #c7e4ee;
}
.arrow{
 position:absolute;
 top:50%;
 right: 30px;
 width: 30px;
 height: 20px;
 line-height: 1;
 text-shadow: 0 -1px 0px rgba(0,0,0,.3);
 margin-top: -10px;
 color: #d4ebf2;
 -moz-transition: .3s;
 -webkit-transition: .3s;
 -o-transition: .3s;
 -ms-transition: .3s;
 transition: .3s;
}
.arrow:before{
 font: 30px 'Typicons';
 content: "▼";
}
#accordion li > a:hover .arrow{
 color: #2f7f99;
}
.rotate {
 color:#2f7f99;
 -moz-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);
}
#accordion li ul {
 list-style: none;
 background: #e1f1f6;
 margin: 0;
}
#accordion li ul li a{
 position:relative;
 background: none;
 line-height: 1;
 padding: 15px 70px;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #a0d2e2;
}
#accordion li ul li a:before {
 position: absolute;
 top: 50%;
 left:45px;
 content: "x";
 font:16px/100% 'Typicons';
 color: #2f7f99;
 margin-top: -8px;
 text-shadow: 1px 1px 0 rgba(0,0,0,.5);
 -moz-transition: .3s;
 -webkit-transition: .3s;
 -o-transition: .3s;
 -ms-transition: .3s;
 transition: .3s;
}
#accordion li ul li:first-child a{
 border-top: 0px;
 box-shadow: 0 7px 7px -7px rgba(0,0,0,.5) inset;
}
#accordion li ul li:last-child a{
 border-bottom: 1px solid #5fb3ce;
}
#accordion li ul li a:hover{
 background: #d4ebf2;
 border-top-color: #eef7fa;
}
</style>


<div class="sampleBox sampleBoxWhite">
<ul id="accordion">
 <li><a href="#">講師<span class="arrow"></span></a>
 <ul>
 <li><a href="#">サブカテゴリー1</a></li>
 <li><a href="#">サブカテゴリー2</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 </ul>
 </li>
 <li><a href="#">コース区分<span class="arrow"></span></a>
 <ul>
 <li><a href="shougakkou.html">小学生</a></li>
 <li><a href="chuugaku-koukou.html">中学生・高校生</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 <li><a href="#">サブカテゴリー4</a></li>
 </ul>
 </li>
 <li><a href="#">練習の曜日・時間<span class="arrow"></span></a>
 <ul>
 <li><a href="#">サブカテゴリー1</a></li>
 <li><a href="#">サブカテゴリー2</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 </ul>
 </li>
 <li><a href="#">内容<span class="arrow"></span></a>
 <ul>
 <li><a href="#">サブカテゴリー1</a></li>
 <li><a href="#">サブカテゴリー2</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 <li><a href="#">サブカテゴリー4</a></li>
 <li><a href="#">サブカテゴリー5</a></li>
 </ul>
 </li>
 <li><a href="#">H25.3.26 発表会<span class="arrow"></span></a>
 <ul>
 <li><a href="#">サブカテゴリー1</a></li>
 <li><a href="#">サブカテゴリー2</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 </ul>
 </li>
 <li><a href="#">4月の大会結果<span class="arrow"></span></a>
 <ul>
 <li><a href="#">サブカテゴリー1</a></li>
 <li><a href="#">サブカテゴリー2</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 </ul>
 </li>
 <li><a href="#">問い合わせ<span class="arrow"></span></a>
 <ul>
 <li><a href="#">サブカテゴリー1</a></li>
 <li><a href="#">サブカテゴリー2</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 </ul>
 </li>
 <li><a href="#">リンク集<span class="arrow"></span></a>
 <ul>
 <li><a href="#">サブカテゴリー1</a></li>
 <li><a href="#">サブカテゴリー2</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 </ul>
 </li>
 <li><a href="#">トップへ<span class="arrow"></span></a>
 <ul>
 <li><a href="#">サブカテゴリー1</a></li>
 <li><a href="#">サブカテゴリー2</a></li>
 <li><a href="#">サブカテゴリー3</a></li>
 </ul>
 </li>
</ul>

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


meichiさんのコメント
すいません いつも お世話に なります m(_ _)m すっごい の ひとことです. 家 に かえってから できるかどうか わかりませんが やってみます. あいがとう ございます m(_ _)m

meichiさんのコメント
すいません、 いま 自宅 に かえって きました。 これから 次女の 新体操 の練習 を 見 に いくのですが・・・ そこへ PC を もって いって コピペ を します m(_ _)m けっか を また ご連絡(?)できれば と 思います。 よろしくお願いします。m(_ _)m

meichiさんのコメント
すいません、コピペ を して 実装 の 具体的 イメージ が でてきましたら、お願いします。m(_ _)m

meichiさんのコメント
ぜんっぜんっ!!(あたりまえか・・・) わからないのですが、 とりあえず ローカル で うごかして みます。 よろしく お願いします。m(_ _)m

meichiさんのコメント
すいません、いま うご かしました。 次女の 新体操には PC は ちょっと もっていけそうにないです。 すいませんm(_ _)m あの これって すごい ですね。。。できたら、500pt で・・・・ 印象は・・・・・・・・・・・・・m(_ _)m ・メニューの幅が ひろい ほんっと すいません。 ・▼をクリックして もと に もどすには? ・文字が おおきい ・色は かんがえて ません 背景の しろ にあわせれば・・・ 自分で できるのは リンク を 張り替える こと ぐらいしか できないのですが・・・ 漠然 とした 要望 で すいません。。。 クローバーは うごいている テーブル 構成 である javascript の あらし である。 あたま の 中は ?????????????でででで どうしよう と いう 感じ なのですが、 これが いま アップしている ホームページに 実装できたら 最高です・・・・ 質問 を かくので 精一杯 なのですが 17時 で でかけるの ですから ・・・・・すいませんm(_ _)m どうか よろしく お願いします。。。。もうすぐPCをきらないと・・・m(_ _)m

3 ● ラフティング
●30ポイント

世の中的には、JQueryというJavaScriptのライブラリを使ったアコーディオンが簡単で便利ということで使われていますので、?2の回答者の方のようなサンプルコードが使用されることがポピュラーになっています。(プロの制作の現場でも。)

ただ、JQuery内部がブラックボックスになっていて、不安だという向きにはCSSのみやシンプルなJavaScriptのみで作るものの方がしっくりくるかもしれませんね。

【参考】
ホームページ作成講座 STEP12 アコーディオンメニュー
http://tamachan.tama777.com/stepuphtml12.html#STEP3

「アコーディオンメニュー」で検索してみてください!


質問者から

みなさま ご回答 いろいろ ありがとうございます
大変 すみませんが解決できることを 願って ベストな 結果 を まってます


4 ● a-kuma3
●500ポイント ベストアンサー

まだ、待ってます? :-)


実物の複製を作って、手元の環境で試してみました。
メニューのスタイルとかは、好みがあるかもしれませんが、とりあえず FF20 と IE8 では動くのを確認しました。

修正するところがいくつかに分かれているので、部分を切り出して説明します。
今回の修正に関係する場所に、コメントに音符記号を二つ (♪♪) 入れています。

まず、先頭の方に jquery の読み込みを移動します。
次に、サブメニューを開閉するスクリプトを追記します(コメント抜きで、5行)。

...
 <style type='text/css'>
 
 </style>
 
<!-- ♪♪ jquery は、ここで読み込みます -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type='text/javascript'>//<![CDATA[ 

// ♪♪ サブメニューを開閉する処理です
$(function() {
 $(".menu_button").click(function() {
 $(this).next().slideToggle(800);
 });
});

window.onload = function(){
 var settings = {
 interval : 3000, // cubeを出す間隔
 dur : 30000, // cubeが持続する時間
...

次は、<body> の始まりの辺り。
先頭の方に移動した jquery の読み込みを消します。

...
 <body link="#003300" vlink="#9900cc" alink="#ff6600">
<!-- ♪♪ 先頭の方に移動します
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-->
<script>
$(function() {
 // ★セレクタを id 指定から、class 指定に変えます
...

分かりやすいようにコメントにしてますが、ザクっと消して構いません。

30行ほど下って、<script> のお尻に、サブメニュー用のスタイルを追加します。

...
.display {
 width: 100%;
 /* ★★高さの設定を止める
 height: 100%;
 */
 border: 0;
}

/* ♪♪ サブメニューに関係するスタイルです */
.menu_button {
 cursor: pointer;
 margin-left: 1em;
}
.sub_menu {
 display: none;
 position: absolute;
 background-color: white;
 border: solid 1px green;
 padding: 3px;
}
.sub_menu div {
 border-bottom: solid 1px green;
}
</style>
...

最後は、メニューの実体を書きます。
コース区分のところに、三つの項目を持つサブメニューを作りました。

...
 ・<font size="-1"><a href="index1.html" target="display" class="anchor">講師</a></font>
 <!-- ♪♪ P タグを DIV タグに変えました 
 <p> ・<font size="-1"><a href="index2.html" target="display" class="anchor">コース<br>区分</a></font></p>
 -->
 <div style="margin: 10px 0;"><font size="-1"><a href="index2.html" target="display" class="anchor">コース<br>区分</a></font>

 <!-- ♪♪ サブメニューを開閉するボタンです -->
 <span class="menu_button"></span>

 <!-- ♪♪ サブメニューです -->
 <div class="sub_menu">
 <div><a href="http://www.hatena.ne.jp/" target="display" class="anchor">小学生コース</a></div>
 <div><a href="http://www.yahoo.co.jp/" target="display" class="anchor">中学生コース</a></div>
 <div><a href="http://www.goo.ne.jp/" target="display" class="anchor">高校生コース</a></div>
 </div>

 </div> <!-- 元々 P タグの閉じる方だったものに対応する DIV の閉じるタグです --><font size="-1"><a href="index3.html" target="display" class="anchor">練習の<br>曜日・時間</a></font>
...

込み入ってるので、ここだけ説明をしておきます。

ちょっと複雑ですが、なるべく修正内容があちこちに散らばらず、追記するだけで動作するようにしたつもりです。
念のため、今の index.html の複製を取っておいてから、修正をしてみてください。


meichiさんのコメント
ありがとう ございます m(_ _)m たいへん な お願い を して わたし も 反省 していたとこでした。 まだ まって ました。。。。 きょう は できそう に ないですが・・・ ごじつ やって みます。 コピペ ですが・・・・ これで 質問 を おわります。。。。 成功 したら ポイント を べつに 送信 させて いただきます。

meichiさんのコメント
たびたび すいません、もう一度 コピペしかできないですが・・・ やって みました。 a-kuma3 さま の 意図 が 少しは 理解 できました。。。。 IE9 FF20 (PC)では、無事 動くことを かくにんしました。 ただ スマホ(Android)だけが この 時間 だから かも しれませんが、、、、 クローバー も うごかず・・・アコーディオンプラス(?)も うごきませんでした。。。 また スマホは 確認 してみます。m(_ _)m

a-kuma3さんのコメント
あー、スマホ持ってないんですよね、ぼく... とりあえず、スマホのブラウザで、javascript が有効になっているかどうかを確認してみません?

meichiさんのコメント
さっそく の 返事 ありがとう ございますm(_ _)m じつは わたし タブレット(Android)も もってるのですが・・・ それでは うごきました。。。。 スマホを いじった おぼえが ないのですが javascriptの せってい が わかんないu-n ちょっと 確認してみます・・・・・

meichiさんのコメント
わたし せっかち で すいませんm(_ _)m スマホ の 電源 を 一回 きって また ためしてみました。 そしたら 無事 うごきました。。。。。ほんとう に 感謝 です。 あとは ほんとう に うごかしたい ぶぶん に ためしてみます。 コピペ だけ なのですが・・・ つまづいたら また ご教示いただけ ますでしょうか・・・・・たぶん きょうは むり m(_ _)m よろしく お願いします。

a-kuma3さんのコメント
良かった、良かった <tt>:-)</tt> >> コピペ だけ なのですが・・・ つまづいたら また ご教示いただけ ますでしょうか・・・・・たぶん きょうは むり m(_ _)m << どうぞ、どうぞ。 ぼくにできることであれば、遠慮なさらずに。 このコメント欄に書き込んでもらえれば、しばらくウォッチしてますんで。

meichiさんのコメント
おはよう ございます。 とりかかろう と おもうのですが・・・m(_ _)m コピペ が よく わかんないです・・・・・ コース区分 は アコーディオンパネル(?)の ない 状態で・・・・つまり 質問前の状態に 戻して H25.3.26 発表会 ・4月の 大会結果 ↑ 2つ を サブメニューにして 一つの たとえば イベント とか の 名前にして やりたいのですが・・・・ これで つたわり ます でしょうか。 すみませんが よろしく お願いします。 わたし の 予想で は この イベント が 増えていくと 思いますので・・・ イベント ▼ ↑ に して イベント ▼ をクリックすると(イベント ▼ がリンク) サブメニューがでるようにしたいです。

a-kuma3さんのコメント
お待たせしました。 イベントを追加して、発表会と大会の結果をサブメニューですね。 元の、この2行を書き換えます。 >|html| <p> ・<font size="-1"><a href="index5.html" target="display" class="anchor">H25.3.26<br>発表会</a></font></p> <p> ・<font size="-1"><a href="index6.html" target="display" class="anchor">4月の<br>大会結果</a></font></p> ||< 以下のようにしてください。 >|html| <div> ・<font size="-1">イベント</font> <span class="menu_button">▼</span> <div class="sub_menu"> <div><a href="index5.html" target="display" class="anchor">H25.3.26<br>発表会</a></div> <div><a href="index6.html" target="display" class="anchor">4月の<br>大会結果</a></div> </div> </div> ||< サブメニューの項目が、どこに対応しているか分かりますか? 後、サブメニューの幅が広がって良いなら、改行を入れない方が見やすいんじゃないかな、と。 &lt;br&gt; を削っただけですけど。 >|html| <div> ・<font size="-1">イベント</font> <span class="menu_button">▼</span> <div class="sub_menu"> <div><a href="index5.html" target="display" class="anchor">H25.3.26発表会</a></div> <div><a href="index6.html" target="display" class="anchor">4月の大会結果</a></div> </div> </div> ||<

meichiさんのコメント
すみません、たいへん 簡単な 質問 ですが ▼ の 色 は 変えられないのでしょうか・・・・

a-kuma3さんのコメント
変えられますよ。 回答に書いたコードのうち、三つ目で以下のようなコードがあります。これが、▼のスタイルの指定です。 >|css| .menu_button { cursor: pointer; margin-left: 1em; } ||< 例えば、緑色にするなら、以下のような感じ。 >|css| .menu_button { cursor: pointer; margin-left: 1em; color: green; /* 色の指定 */ } ||< 色に使える文字列は、こんなのがあります。 http://www.colordic.org/ それとも、ボタンみたいな感じにしたいのでしょうか。 背景色とか、縁取りとかも、色を指定することができます。

meichiさんのコメント
おはよう ございます・・・・ いろいろ できるんですね。 すっごい!! また ごじつ やって みます。 よろしくお願いします。

a-kuma3さんのコメント
あ、違った。 メッセージが届いた順番が、入れ替わってましたわ (^^; きちんと動いてる、ってことで良いんですよね? もしかしたら、色の質問の前にメッセージを出したのかな...

1-5件表示/6件
4.前の5件|次5件6.
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ