モバイルナビを左から右へ移動

Question

モバイルナビゲーションを左上から移動して、左から右にスライドしようとしています。私は左から右に位置設定を変更しようとしましたが、うまくいかなかった。 本当に助けてもらえますか？

コード、ありがとうございます！

#wrapper { 
 
    position: absolute; 
 
    width: auto; 
 
    min-width: 60px; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
&:focus { 
 
    outline: none; 
 
} 
 

 
.menu { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: #fff; 
 
    width: 240px; 
 
    height: 100%; 
 
    transform: translate3d(-240px, 0, 0); 
 
    transition: transform 0.35s; 
 
} 
 

 
label.menu-toggle { 
 
    position: absolute; 
 
    right: -60px; 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: 0px; 
 
    display: block; 
 
    padding: 0; 
 
    text-indent: -9999px; 
 
    background: transparent url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50%/25px 25px no-repeat; 
 
} 
 

 
label.active { 
 
    background: transparent url(menu-cross.png) 50% 50%/25px 25px no-repeat; 
 
} 
 

 
ul li>label { 
 
    background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50%/16px 16px no-repeat; 
 
} 
 

 
a, 
 
label { 
 
    display: block; 
 
    text-align: left; 
 
    padding: 0 30px; 
 
    line-height: 60px; 
 
    text-decoration: none; 
 
    margin: 0 auto; 
 
    color: #000; 
 
} 
 

 
&:hover { 
 
    color: #666; 
 
} 
 
    
 
.menu-checkbox{ 
 
    display: none; 
 
} 
 

 
    
 
.menu .menu label.menu-toggle { 
 
    background: none; 
 
}  
 

 
.menu-checkbox:checked + .menu { 
 
    transform: translate3d(0, 0, 0); 
 
}

<div id="wrapper"> 
 
    <input type="checkbox" id="menub" name="menu" class="menu-checkbox"> 
 
    <div class="menu"> 
 
    <label class="menu-toggle" for="menub"><span>Toggle</span></label> 
 
    <ul> 
 

 
     <li> 
 
     <a href="">link</a> 
 
     </li> 
 
     <li> 
 
     <a href="">link</a> 
 
     </li> 
 
     <li> 
 
     <a href="">link</a> 
 
     </li> 
 

 
    </ul> 
 
    </div> 
 
</div> 
 
<!-- #wrapper -->

Answer 1

私はあなたのタスクをovercomplicatedていると信じています。あなたは単にビジュアルスタジオで新しいプロジェクトを開いてそこから行くことができます。達成したい結果が同じである可能性が最も高いので、これが最良の選択肢になります。

これに固執したい場合は、スタイルコードを注意深く見て、アイテムが右側に揃っていない可能性があります。