Sidenav Overlay in der oberen rechten Ecke behoben

Question

Hallo Leute Ich versuche, Navigation, die in der rechten oberen Ecke behoben ist kommen von der rechten Seite des Bildschirms (Animation von rechts nach links). Jetzt mit Beispiel aus w3school konnte ich mit dem folgenden Code kommen: HTML:

<div id="mySidenav" class="sidenav"> 
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a> 
<a href="#">About</a> 
<a href="#">Services</a> 
<a href="#">Clients</a> 
<a href="#">Contact</a> 
</div> 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 

SCSS:

#mySidenav { 
height: 100%; 
width: 0; 
position: fixed; 
z-index: 1; 
top: 0; 
left: 0; 
background-color: #111; 
overflow-x: hidden; 
padding-top: 60px; 
transition: 0.5s; 
a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s 
} 
a:hover, .offcanvas a:focus{ 
color: #f1f1f1; 
} 
.closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 55px; 
    margin-left: 50px; 
} 

JS:

function openNav() { 
document.getElementById('mySidenav').style.width = '300px'; 
} 

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

nun der Code funktioniert gut, dass nicht mein Problem. Ich möchte mein Sitenav in der oberen rechten Ecke mit Animation von rechts nach links fixiert haben, jeder Versuch, den ich gemacht habe, war und völliges Versagen. So meine Frage ist es möglich, dies zu tun und wie würdest du es tun ???? Hier ist der Link zum codepen ich gemacht, so können Sie den Code in Aktion sehen https://codepen.io/Karadjordje/pen/MpKvXp

Answer 1

ändern left: 0;-right: 0;.

Arbeitsbeispiel:

function openNav() { 
 
    document.getElementById('mySidenav').style.width = '300px'; 
 
} 
 

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

.hamburger { 
 
    font-size: 30px; 
 
    cursor: pointer; 
 
    top: 20px; 
 
    right: 20px; 
 
    position: fixed; 
 
} 
 

 
#mySidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    padding-top: 60px; 
 
    transition: 0.5s; 
 
} 
 

 
#mySidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
#mySidenav a:hover, 
 
#mySidenav .offcanvas a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
#mySidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 55px; 
 
    margin-left: 50px; 
 
} 
 

 
body { 
 
    height: 200em; 
 
    position: relative; 
 
}

<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
</div> 
 
<span class="hamburger" onclick="openNav()">&#9776;</span>