Question

我正在使用以下代码来获取全屏叠加导航

＆＃13;

function openNav() {
    document.getElementById("myNav").style.display = "block";
}
    
function closeNav() {
    document.getElementById("myNav").style.display = "none";
}

＆＃13;

.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
}

＆＃13;

 <div id="myNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>

＆＃13;

我想在服务（菜单）导航项下添加子菜单，其他一切都在运作，但我没有任何关于如果有人有任何想法我怎么能完成，所以请与我分享或帮助我。

Answer 1

你基本上需要做与第一个菜单相同的事情：

在.overlay-content div下面添加：

  <div class="submenu" id="subNav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeSubNav()">&times;</a>
    <a href="#">sub</a>
    <a href="#">menu</a>
    <a href="#">items</a>
  </div>

将此添加到您的CSS（基本上复制主菜单的规则）：

.submenu {
  height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
}
.submenu a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

并将此添加到您的JS（基本上是从您的其他函数复制您的逻辑）：

function openSubNav(){
      document.getElementById("subNav").style.display = "block";
}

function closeSubNav() {
    document.getElementById("subNav").style.display = "none";
}

这几乎与您已经完成的内容重复。你只需要根据自己的喜好设计它。

CSS3：全屏叠加的嵌套菜单

1 个答案: