Wie Create Sidenav von unten nach oben

Question

Gibt es jemanden, der mir helfen kann? So öffnen Sie Sitenav von unten nach oben. Dies ist der Code von links nach rechts. Ich möchte den Code unten von unten nach oben öffnen. Dieser Code öffnet sich nun von links nach rechts.

Das ist mein CSS-Code:

.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; 
} 

Und das ist Javascript-Code:

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

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

Kann mir jemand helfen, den Code zu korrigieren, ich bin hier.

Answer 1

Sie können dies versuchen:

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"; 
 
}

.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; 
 
}

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

Answer 2

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

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

Answer 3

Überprüfen Sie diesen Code, müssen Sie 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; 
}