Question

有没有人可以帮助我？如何从下到上打开sidenav。这是从左到右的代码。我想让下面的代码从下到上打开sidenav。此代码现在从左到右打开sidenav。

这是我的CSS代码：

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align:center;
}

这是javascript代码：

function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

有人可以帮我纠正代码，我是新手。

Answer 1

你可以试试这个：

＆＃13;

function openNav() {
    document.querySelector(".sidenav").style.height = "100vh";
    document.querySelector(".sidenav").style.paddingTop = "60px";
}

function closeNav() {
    document.querySelector(".sidenav").style.height = "0";
    document.querySelector(".sidenav").style.paddingTop = "0";
}

＆＃13;

.sidenav {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition:height 0.5s;
padding-top:0;
text-align:center;
}

button {
position:relative;
z-index:9999;
}

＆＃13;

<div class="sidenav"></div>
<!-- the button used for test -->
<button onClick='openNav()'>Open</button>
<button onClick='closeNav()'>Close</button>

＆＃13;

Answer 2

检查此代码，您需要设置bottom: 0

.sidenav {
  height: 0;
  width: 100px;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  text-align: center;
}

Answer 3

function openNav() {
    document.getElementById("mySidenav").style.height = "100%";
}

function closeNav() {
    document.getElementById("mySidenav").style.height = "0";
}

如何从下到上创建Sidenav

3 个答案: