Question

我用javascript为我的网站创建了一个导航菜单。当我单击“关于”之类的div时，它将在下面显示其他“ div”，例如“关于本网站”，“与我联系”。

问题在于，展开的菜单下的每个文本也都在下面，以便为菜单腾出空间。当我再次关闭菜单时，下面的文本又出现了。

我想将展开的菜单放入第二层并使其透明。因此，下面的文本不会更改其位置，并且展开的菜单将超过下面的内容。在尝试使此菜单甚至运行很多之后，我最终使用了一个简单的包含div和网格的结构。

<main>
  <div class=navGrid>
    //Example of one Menu containing links
    <div class=navMenuX onclick="clickNavMenu(1)">
      <div>Example Title</div>
      <div id=1>
        <div class=navLink>Link 0</div>
        <div class=navLink>Link 1</div>
        <div class=navLink>Link 2</div>
      </div>
    </div>
 </main>




 <style>
  //horizontalMenu (columns)
  .navMenuGrid{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    display: grid;
  }
  .navMenuX{  
    //verticalMenu (rows)
    grid-template-rows: 0.1fr 0.1fr;
    display: grid;
  }
<style>



<script>
    function loadNav(){
      console.log("loaded navigation menu.");
      for(i=0; i<5; i++){
        document.getElementById(i).style.display = "none";
      }
    }
    clicks=0;
    lastparam = "none";
    function clickNavMenu(param){
      if(lastparam != param) clicks=0;
      if(clicks==2) clicks=0;
      console.log("clicked item"+param+" in navMenu.");
      for(i=0; i<5; i++)
        document.getElementById(i).style.display = "none";
      if(clicks == 0)
        document.getElementById(param).style.display = "inline-block";
      clicks++;
      lastparam = param;
    }
  </script>

是否可以在文档的div中添加图层？

我想要div：

  <div id=i>
    <div class=navLink>Link 0</div>
    <div class=navLink>Link 1</div>
    <div class=navLink>Link 2</div>
  </div>

位于文档的第二层，因此，除这些div之外的所有内容都位于第一层。

然后，最后我想将第二层的所有项目放在第一层的所有项目之上。

有人曾做过类似的尝试并且知道在哪里看吗？

Answer 1

我为此div添加了一个类。

  <div class=navGroup id=i> // < < < < < fix
    <div class=navLink>Link 0</div>
    <div class=navLink>Link 1</div>
    <div class=navLink>Link 2</div>
  </div>

此类具有绝对位置

  .navGroup {
    padding: 5px;
    background-color: rgba(245,245,245, 0.6);
    border-left: 2px solid rgba(130,180,220, 0.5);
    border-right: 2px solid rgba(130,180,220, 0.5);
    border-bottom: 2px solid rgba(130,180,220, 0.5);
    position: absolute; // < < < < < fix
    width: 20%;
  }

（主）下面的文本现在具有相对位置

main {
  padding-top: 10px;
  position: relative; // < < < < < fix
}

这完全解决了问题。

在不同的图层显示div？

1 个答案: