Fatal编程技术网

Javascript 使覆盖层向上扩展

javascript html css

Javascript 使覆盖层向上扩展,javascript,html,css,overlay,Javascript,Html,Css,Overlay,在简单的示例中，覆盖从页面顶部开始，并扩展到底部。我怎样才能使它从页面底部开始扩展，然后到达顶部 CSS JAVASCRIPT /* Open */ function openNav() { document.getElementById("myNav").style.height = "100%"; } /* Close */ function closeNav() { document.getElementById("myNav").style.height = "0%";

在简单的示例中，覆盖从页面顶部开始，并扩展到底部。我怎样才能使它从页面底部开始扩展，然后到达顶部

CSS

JAVASCRIPT

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

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


打开
在CSS中删除“顶部：0”并添加“底部：0”。希望这有帮助。

将
底部：0
替换为
顶部：0


/*覆盖（背景）*/
.覆盖{
/*高度和宽度取决于您想要显示覆盖的方式（请参见下面的JS）
*/    
身高：0；
宽度：100%；
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
底部：0；
背景色：rgb（0,0,0）；/*黑色后备色*/
背景色：rgba（0,0,0,0.9）；/*黑色w/不透明度*/
溢出-x:隐藏；/*禁用水平滚动*/
转换：0.5s；/*0.5秒转换效果以滑入或滑下
覆盖层（高度或宽度，取决于分隔缝）*/
}
/*打开*/
函数openNav（）{
document.getElementById（“myNav”）.style.height=“100%”；
}
/*接近*/
函数closeNav（）{
document.getElementById（“myNav”）.style.height=“0%”；
}
打开
非常感谢！这就是解决办法！ 
/* Open */
function openNav() {
    document.getElementById("myNav").style.height = "100%";
}

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

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