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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/05/23 08:31:56
  • 終了:2013/05/28 20:19:18

ベストアンサー

id:a-kuma3 No.4

a-kuma3回答回数4363ベストアンサー獲得回数18002013/05/28 19:07:18

ポイント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ベストアンサー獲得回数1222013/05/23 09:35:35

ポイント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

holoholobird回答回数574ベストアンサー獲得回数1042013/05/23 12:18:27

ポイント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="#">サブカテゴリー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>

他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

ラフティング回答回数2648ベストアンサー獲得回数1762013/05/25 21:09:52

ポイント30pt

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

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

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

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

id:meichi

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

id:a-kuma3 No.4

a-kuma3回答回数4363ベストアンサー獲得回数18002013/05/28 19:07:18ここでベストアンサー

ポイント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

ポイント を おしはらい させて いただきました。
なにか ありましたら、コメントに おねがい します。

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません