

次のHTMLの「BBB」をクリックした時に、下に展開するメニューを出したいです。

AAA BBB CCC DDD  
メニュー1(←展開されるメニュー)  
メニュー2(←展開されるメニュー)

ただ、普通に展開すると「ここにウェブページのコンテンツなどが書き込まれます。」がそのまま下にずれてしまいます。

やりたいのは、「ここにウェブページのコンテンツなどが書き込まれます。」の上にクリック時のメニューを展開したいです。(展開メニューの文字が乗っかって上書きされるようなイメージ)

可能でしょうか？

[code]

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>トップページ</title>
    </head>
    
    <body>
        <div id="header">
    
        <div style="background-color : #b1c4e0">
            <br/>
            <span style="font-size:x-large">
                &nbsp;&nbsp;
                テスト 
            </span>
        </div>
    
        <table border="1" style="width:100%;background-color : #6068de">
          <tr >
            <td style="width:12%"><div style="text-align:center;color:#ffffff">AAA</div></td>
            <td style="width:12%">
                <div style="text-align:center;color:#ffffff">
                    BBB
                </div>
            </td>
            <td style="width:12%"><div style="text-align:center;color:#ffffff">CCC</div></td>
            <td style="width:12%"><div style="text-align:center;color:#ffffff">DDD</div></td>
            <td style="width:52%"><div style="text-align:right;color:#ffffff">EEE&nbsp;&nbsp;&nbsp;</div></td>
          </tr>
        </table>
    
    </div> 
    
    ここにウェブページのコンテンツなどが書き込まれます。
    
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-01-25T10:26:41.243
21297
2016-02-24T14:54:11.777
14130
question
javascript html
HTMLでクリック時に展開するメニューで、下のコンテンツをずらしたくない


bootstrap を使うか、ソースを参考にカスタマイズされてはいかがでしょうか？  
<http://getbootstrap.com/javascript/#dropdowns>


CC BY-SA 3.0
2016-01-25T14:35:33.380
21306
2016-01-25T14:35:33.380
7471
21297
answer


`position`スタイルの`absolute`もしくは`fixed`を使用することになると思います。

<https://developer.mozilla.org/ja/docs/Web/CSS/position>

> absolute
>
>
> 要素のためのスペースが確保されません。代わりに、その要素の位置を、位置指定された祖先要素のうちもっとも近いもの、もしくは、その要素の包含ブロックを基準にして決めます。絶対位置指定されたボックスのマージンは、他の要素のマージンと相殺されません。

簡単なスニペットを以下挿入します。「BBB」メニューをクリックするとその下にメニューが展開します。

[code]

    !function() {
      var menuElements = document.getElementsByClassName("menu");
      
      [].forEach.call(menuElements, function(menuElement) {
        menuElement.onclick = function() {
          this.getElementsByClassName("submenu")[0].className = "submenu";
        };
      });
    }();
[/code]

[code]

    .menu {
      position: relative;
      border: solid 1px #ccc;
    }
    
    .submenu {
      position: absolute;
      width: 400px;
    }
    
    .submenu.is-hidden {
      display: none;
    }
[/code]

[code]

    <table>
      <tr>
        <td class="menu">
          <div>AAA</div>
        </td>
        <td class="menu">
          <div>BBB</div>
          <div class="submenu is-hidden">
            <p>メニュー1(←展開されるメニュー)</p>
            <p>メニュー2(←展開されるメニュー)</p>
          </div>
        </td>
        <td class="menu">
          <div>CCC</div>
        </td>
        <td class="menu">
          <div>DDD</div>
        </td>
        <td class="menu">
          <div>EEE</div>
        </td>
      </tr>
    </table>
    
    <p>メニューの下のコンテンツ</p>
    <p>メニューの下のコンテンツ</p>
    <p>メニューの下のコンテンツ</p>
    <p>メニューの下のコンテンツ</p>
    <p>メニューの下のコンテンツ</p>
[/code]


CC BY-SA 3.0
2016-01-25T14:44:25.273
21307
2016-01-25T14:44:25.273
13493
21297
answer