I don't want to shift the content below from the HTML click menu.

Next time I click BBB in HTML, I'd like to bring up a menu that I want to expand below.

AAA BBB CCC DDD
　　 Menu 1 (←Expanded Menu)
　　 Menu 2 (←Deployed Menu)

"However, if you expand it normally, ""The contents of the web page will be written here"" will be shifted down."

"What I want to do is to expand the menu when I click on ""The contents of the web page will be written here."""(Image of characters on the deployment menu being overwritten)

Is it possible?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Top Page</title>
</head>

<body>
    <divid="header">

    <div style="background-color:#b1c4e0">
        <br of >
        <span style="font-size: x-large">
            &nbsp;&nbsp;
            test 
        </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;</div></td>
      </tr>
    </table>

</div> 

The contents of the web page are written here.

</body>
</html>

javascript html

2022-09-30 14:41

2 Answers

You will probably use the absolute or fixed style.

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

No space is available for the element.Instead, the location of the element is determined by the closest of the positioned ancestor elements or by the inclusion block of the element.The margin of the absolutely positioned box is not offset by the margin of the other elements.

Insert a simple snippet below.When you click on the BBB menu, the menu expands below it.

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

.menu{
  position:relative;
  border —solid1px#cc;
}

US>.submenu{
  position:absolute;
  width —400px;
}

.submenu.is-hidden{
  display: none;
}

<table>
  <tr>
    <td class="menu">
      <div>AAA</div>
    </td>
    <td class="menu">
      <div>BBB</div>
      <div class="submenu is-hidden">
        <p>Menu 1 (←Deployed Menu)</p>
        <p>Menu 2 (←Deployed Menu)</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>Content under menu </p>
<p>Content under menu </p>
<p>Content under menu </p>
<p>Content under menu </p>
<p>Contents under the menu </p>

2022-09-30 14:41

Why don't you use bootstrap or customize it by referring to the source?
http://getbootstrap.com/javascript/ #dropdowns

2022-09-30 14:41

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656