javascript - Sidenav 栏应从右侧而不是左侧打开

Question

我有一个简单的 javascript 可以为我打开一个侧边栏，但我希望它在右侧而不是左侧。请参阅下面的 gif 和代码。任何人都知道我需要做什么来解决这个问题？非常感谢您添加的任何解释，以便我更好地理解这段代码。我试图自己修复它，但我无法找到究竟是什么决定了它出现在屏幕的哪一侧。

.user-menu
{
    padding: 0px 10px;
    vertical-align: middle;
    height: 100%;
    color: white;
    font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
    font-size: 15px;
    cursor: pointer;
    display: block;
    float: right;
}

.user-menu li
{
    padding: 10px;
}

.user-menu:hover
{
    color:white; background:#292929;
    -o-transition:color .25s ease-out, background .25s ease-in;
    -ms-transition:color .25s ease-out, background .25s ease-in;
    -moz-transition:color .25s ease-out, background .25s ease-in;
    -webkit-transition:color .25s ease-out, background .25s ease-in;
    /* ...and now override with proper CSS property */
    transition:color .25s ease-out, background .25s ease-in;

    background-color: #185886;
}

.button
{
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.navigationR
{
    float: left;
    position: absolute;
    width: 6%;
    height: calc(10vh);
    background: #333;
    top: 40px;
    left: -100%;
    transition: .25s;
    display: grid;
}

.navigationR span
{
    display: block;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,.2);
}

.navigationR.active
{
    left: 0;
}

.navigationR li
{
    height: 100%;
    display: block;
    float: left;
    padding: 10px 10px;
    vertical-align: middle;
    height: 100%;
    color: white;
    font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
    font-size: 15px;
}

.navigationR span:hover
{
    color:white; background:#292929;
    -o-transition:color .25s ease-out, background .25s ease-in;
    -ms-transition:color .25s ease-out, background .25s ease-in;
    -moz-transition:color .25s ease-out, background .25s ease-in;
    -webkit-transition:color .25s ease-out, background .25s ease-in;
    /* ...and now override with proper CSS property */
    transition:color .25s ease-out, background .25s ease-in;

    background-color: #185886;
}

<ul class="navigationR">
  <span>
    <form action="/ucp/includes/logout.inc.php" method="post">
      <button class="button" type="submit" name="logout-submit">
        <li><i class="fa fa-sign-out"></i> Log out
      </button>
    </form>
    </li>
  </span>
  <span>
    <form action="/ucp/includes/logout.inc.php" method="post">
      <button class="button" type="submit" name="logout-submit">
        <li><i class="fa fa-sign-out"></i> Log out
      </button>
    </form>
    </li>
  </span>
</ul>
<div class="user-menu">
  <li> <?php echo '<i class="fa fa-user"></i>' . ' ' . $_SESSION["userUid"]; ?> </li></div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
                $(document).ready(function(){
                    $('.user-menu').click(function(){
                        $('.navigationR').toggleClass('active')
                    })
                })
</script>

Answer 1

通过在以下 CSS 类中放置 float: right 而不是 left 来解决此问题:

.navigationR {
float: right; 
right: -100%; }

.navigationR li {
float: right; }

.navigationR.active {
right: 0; }

Thanks a lot everyone for pointing it out, simple issues like these take me way too long to discover.