獲取重疊向上擴展

在this簡單的W3Schools示例中，重疊從頁面頂部開始並擴展到底部。我如何才能實現從頁面底部開始擴展並達到頂端的結果？獲取重疊向上擴展

CSS

/* The Overlay (background) */ 
.overlay { 
    /* Height & width depends on how you want to reveal the overlay (see JS below) */  
    height: 0; 
    width: 100%; 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    left: 0; 
    top: 0; 
    background-color: rgb(0,0,0); /* Black fallback color */ 
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ 
    overflow-x: hidden; /* Disable horizontal scroll */ 
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ 
}

JAVASCRIPT

/* Open */ 
function openNav() { 
    document.getElementById("myNav").style.height = "100%"; 
} 

/* Close */ 
function closeNav() { 
    document.getElementById("myNav").style.height = "0%"; 
}

HTML

<body> 
<!-- The overlay --> 
<div id="myNav" class="overlay"> 

    <!-- Button to close the overlay navigation --> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 

    <!-- Overlay content --> 
    <div class="overlay-content"> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
    </div> 

</div> 

<!-- Use any element to open/show the overlay navigation menu --> 
<span onclick="openNav()">open</span> 
</body>

來源

2016-11-20 Alexander Edwards

取代bottom:0與top:0

<html><head> 
 
    <style type="text/css"> 
 
    
 
/* The Overlay (background) */ 
 
.overlay { 
 
    /* Height & width depends on how you want to reveal the overlay (see JS below) 
 

 
*/  
 
    height: 0; 
 
    width: 100%; 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    left: 0; 
 
    bottom: 0; 
 
    background-color: rgb(0,0,0); /* Black fallback color */ 
 
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ 
 
    overflow-x: hidden; /* Disable horizontal scroll */ 
 
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down 
 

 
the overlay (height or width, depending on reveal) */ 
 
} 
 
    </style> 
 

 
    <title></title> 
 

 
    
 
    
 

 

 

 

 
<script type="text/javascript"> 
 

 
/* Open */ 
 
function openNav() { 
 
    document.getElementById("myNav").style.height = "100%"; 
 
} 
 

 
/* Close */ 
 
function closeNav() { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
} 
 
</script> 
 

 
    
 
</head> 
 

 
<body> 
 
    
 
    
 

 

 

 

 
</body> 
 
<body> 
 
<!-- The overlay --> 
 
<div id="myNav" class="overlay"> 
 

 
    <!-- Button to close the overlay navigation --> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 

 
    <!-- Overlay content --> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 

 
</div> 
 

 
<!-- Use any element to open/show the overlay navigation menu --> 
 
<span onclick="openNav()">open</span> 
 
</body> 
 
</html>

來源

2016-11-20 07:22:37 jafarbtech

非常感謝您！這是解決方案！ –

@Alexander愛德華歡迎您 – jafarbtech

在CSS中刪除 '頂部：0'，添加 '底部：0'。希望這可以幫助。

來源

2016-11-20 06:31:48 Ishara

獲取重疊向上擴展

回答

相關問題