右上隅に固定されたSidenavオーバーレイ

Question

こんにちは、右上に固定されたナビゲーションを画面の右側（右から左のアニメーション）から作成しようとしています。今、私は次のコードを思い付くことができましたw3schoolから例を使用して： 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'; 
} 

は今のコードは、その正常に動作します私の問題ではありません。私は右から左へ、私が作ったすべての試合が終わったことを完全に突き止め、私のサイドナブを右上に固定したい。だから私の質問は、これを行うことが可能であり、あなたはそれをどのようにしますか？ は、ここで私はあなたがright: 0;にアクションhttps://codepen.io/Karadjordje/pen/MpKvXp

Answer 1

変更left: 0;のコードを見ることができます作らcodepenへのリンクです。

の作業例：このような

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>