在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()">×</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>
答案 0 :(得分:3)
在CSS中删除'top:0'并添加'bottom:0'。希望这会有所帮助。
答案 1 :(得分:3)
将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()">×</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>