id:meichi
ポイントあり970ptベストアンサーあり
インターネットウェブ制作

ホームページ　左のリンク　に　サブメニューがでるようにしたい。

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

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2013/05/28 20:19:18
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.4

回答回数4973ベストアンサー獲得回数2154

ポイント500pt

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


実物の複製を作って、手元の環境で試してみました。
メニューのスタイルとかは、好みがあるかもしれませんが、とりあえず 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>
...

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

  • 元々、FONT タグを囲んでいた P タグを DIV タグに変更する（こうしないと、動かなかった）
  • サブメニューを開閉する「▼」の辺りは、そのまま書いてください
  • サブメニューの実体は、class="sub_menu" を指定している DIV です
    その中に、メニューの内容を書きます
  • 右側にページを表示するので、サブメニューの中身は class="anchor" を指定した A タグになります


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

他10件のコメントを見る
id:meichi

おはよう　ございます・・・・
いろいろ　できるんですね。　すっごい！！

また　ごじつ　やって　みます。　よろしくお願いします。

2013/05/31 08:22:12
id:a-kuma3

あ、違った。
メッセージが届いた順番が、入れ替わってましたわ　(^^;

きちんと動いてる、ってことで良いんですよね？
もしかしたら、色の質問の前にメッセージを出したのかな...

2013/05/31 14:54:54

その他の回答（3件）

id:dawakaki No.1

回答回数797ベストアンサー獲得回数122

ポイント40pt

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

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

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

id:meichi

ご回答 ありがとう ございます.
見たのですが さっぱり ??です.m(_ _)m

どこが 分からないかも ??? です.

すみません. レイアウトは くずしたしないです

非難 中傷 は ご勘弁 ください

2013/05/23 12:19:17
id:dawakaki

何が分からないのか書いてくれないとフォローしようがありません。

2013/05/25 10:28:32
id:holoholobird No.2

回答回数574ベストアンサー獲得回数104

ポイント400pt

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

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

下の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="#">サブカテゴリー１</a></li>
      <li><a href="#">サブカテゴリー２</a></li>
      <li><a href="#">サブカテゴリー３</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="#">サブカテゴリー３</a></li>
      <li><a href="#">サブカテゴリー４</a></li>
    </ul>
  </li>
  <li><a href="#">練習の曜日・時間<span class="arrow"></span></a>
    <ul>
      <li><a href="#">サブカテゴリー１</a></li>
      <li><a href="#">サブカテゴリー２</a></li>
      <li><a href="#">サブカテゴリー３</a></li>
    </ul>
  </li>
  <li><a href="#">内容<span class="arrow"></span></a>
    <ul>
      <li><a href="#">サブカテゴリー１</a></li>
      <li><a href="#">サブカテゴリー２</a></li>
      <li><a href="#">サブカテゴリー３</a></li>
      <li><a href="#">サブカテゴリー４</a></li>
      <li><a href="#">サブカテゴリー５</a></li>
    </ul>
  </li>
  <li><a href="#">H25.3.26　発表会<span class="arrow"></span></a>
    <ul>
      <li><a href="#">サブカテゴリー１</a></li>
      <li><a href="#">サブカテゴリー２</a></li>
      <li><a href="#">サブカテゴリー３</a></li>
    </ul>
  </li>
  <li><a href="#">4月の大会結果<span class="arrow"></span></a>
    <ul>
      <li><a href="#">サブカテゴリー１</a></li>
      <li><a href="#">サブカテゴリー２</a></li>
      <li><a href="#">サブカテゴリー３</a></li>
    </ul>
  </li>
  <li><a href="#">問い合わせ<span class="arrow"></span></a>
    <ul>
      <li><a href="#">サブカテゴリー１</a></li>
      <li><a href="#">サブカテゴリー２</a></li>
      <li><a href="#">サブカテゴリー３</a></li>
    </ul>
  </li>
  <li><a href="#">リンク集<span class="arrow"></span></a>
    <ul>
      <li><a href="#">サブカテゴリー１</a></li>
      <li><a href="#">サブカテゴリー２</a></li>
      <li><a href="#">サブカテゴリー３</a></li>
    </ul>
  </li>
  <li><a href="#">トップへ<span class="arrow"></span></a>
    <ul>
      <li><a href="#">サブカテゴリー１</a></li>
      <li><a href="#">サブカテゴリー２</a></li>
      <li><a href="#">サブカテゴリー３</a></li>
    </ul>
  </li>
</ul>

</div>
</body>
</html>
他3件のコメントを見る
id:meichi

ぜんっぜんっ！！（あたりまえか・・・）　わからないのですが、

とりあえず　ローカル　で　うごかして　みます。

よろしく　お願いします。m(_ _)m

2013/05/23 16:12:16
id:meichi

すいません、いま　うご　かしました。

次女の　新体操には　PC　は　ちょっと　もっていけそうにないです。
すいませんm(_ _)m

あの　これって　すごい　ですね。。。できたら、500pt で・・・・

印象は・・・・・・・・・・・・・m(_ _)m　
　・メニューの幅が　ひろい　ほんっと　すいません。
　・▼をクリックして　もと　に　もどすには？
　・文字が　おおきい
　・色は　かんがえて　ません　背景の　しろ　にあわせれば・・・
　
自分で　できるのは　リンク　を　張り替える　こと　ぐらいしか
できないのですが・・・

漠然　とした　要望　で　すいません。。。

　クローバーは　うごいている
　テーブル　構成　である
　javascript　の　あらし　である。

あたま　の　中は　？？？？？？？？？？？？？でででで

どうしよう　と　いう　感じ　なのですが、

これが　いま　アップしている　ホームページに　実装できたら
最高です・・・・

質問　を　かくので　精一杯　なのですが　17時　で　でかけるの
ですから　・・・・・すいませんm(_ _)m

どうか　よろしく　お願いします。。。。もうすぐPCをきらないと・・・m(_ _)m

2013/05/23 16:28:42
id:rafting No.3

回答回数2652ベストアンサー獲得回数176

ポイント30pt

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

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

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

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

id:meichi

質問者から

meichi2013/05/26 09:20:11

みなさま ご回答 いろいろ ありがとうございます

大変 すみませんが解決できることを 願って ベストな 結果 を まってます

規約違反として通知
id:a-kuma3 No.4

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント500pt

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


実物の複製を作って、手元の環境で試してみました。
メニューのスタイルとかは、好みがあるかもしれませんが、とりあえず 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>
...

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

  • 元々、FONT タグを囲んでいた P タグを DIV タグに変更する（こうしないと、動かなかった）
  • サブメニューを開閉する「▼」の辺りは、そのまま書いてください
  • サブメニューの実体は、class="sub_menu" を指定している DIV です
    その中に、メニューの内容を書きます
  • 右側にページを表示するので、サブメニューの中身は class="anchor" を指定した A タグになります


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

他10件のコメントを見る
id:meichi

おはよう　ございます・・・・
いろいろ　できるんですね。　すっごい！！

また　ごじつ　やって　みます。　よろしくお願いします。

2013/05/31 08:22:12
id:a-kuma3

あ、違った。
メッセージが届いた順番が、入れ替わってましたわ　(^^;

きちんと動いてる、ってことで良いんですよね？
もしかしたら、色の質問の前にメッセージを出したのかな...

2013/05/31 14:54:54
id:meichi

質問者から

meichi2013/05/29 16:25:21

ポイント　を　おしはらい　させて　いただきました。

なにか　ありましたら、コメントに　おねがい　します。

規約違反として通知

コメント（0件)

コメントはまだありません

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ