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; 

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 

{

     right: 0;

}

你也可能需要 float:right 在 .navigationR li 上。