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.

Answer 2

主要原因是以下课程。需要在右边而不是左边。

.navigationR.active 
{
     right: 0;
}

此外，您可能还需要在.navigationR li上使用float：right。

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

2 个答案: