Question

我已经尝试了几天才能使其工作，我希望按原样覆盖，但只需启动页面加载而不必单击链接以使其打开。当有人访问时，有人可以建议我可以做什么让它自动叠加？

{{1}}

Answer 1

只需在document.addEventListener('DOMContentLoaded', openNav());

中添加<script>即可

速记：document.ready(openNav());

有关详细信息，请查看：js document.ready()

Answer 2

添加openNav（）

openNav()

<!DOCTYPE html>
    <html>
    <style>
    body {
        margin: 0;
        font-family: 'Lato', sans-serif;
    }
    
    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.6);
        overflow-y: hidden;
        transition: 0.5s;
    }
    
    .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 {overflow-y: auto;}
      .overlay a {font-size: 20px}
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }
    </style>
    <body>
    
    <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>
    
    <h2></h2>
    
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    
    <script>
    function openNav() {
        document.getElementById("myNav").style.height = "100%";
    }
    
    function closeNav() {
        document.getElementById("myNav").style.height = "0%";
    }
    </script>
         
    </body>
    </html>

在页面加载时自动显示叠加

2 个答案: