2016-09-22 66 views
2

我一直在嘗試幾天才能得到這個工作,我正在尋找這個覆蓋原樣,但只是啓動頁面加載,而不必點擊鏈接,以打開它。任何人都可以建議我能做些什麼來讓它在有人訪問時自動覆蓋?加載頁面加載時自動顯示

<!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>

+0

只需添加'document.addEventListener( 'DOMContentLoaded',openNav());'裏面你''

0

添加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>