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

Question

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

<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;&nbsp;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.

Answer 2

主要原因是下面的类。需要向右而不是向左。.navigationR.active&nbsp;{&nbsp; &nbsp; &nbsp;right: 0;}你也可能需要 float:right 在 .navigationR li 上。