css - 如何在vue js中将侧边导航栏从左侧移动到右侧

Question

我想使用 vue js 将我的侧导航从窗口的左侧移动到右侧。

我尝试包括以下 css top: 0 和 right: 0 但它没有在导航栏的右侧打开。

无法解决这个问题。

<nav class="navbar navbar-expand-lg bg-dark sticky-top navbar-top" :class="{ navbaropen: opened}">
  <span class="open-slide">
      <a href="#" @click="opened = !opened">
          <div class="con">
              <div class="bar top" :class="{ topopen: opened}"></div>
              <div class="bar mid" :class="{ midopen: opened}"></div>
              <div class="bar bot" :class="{ botopen: opened}"></div>
          </div>
      </a>
  </span>
  </div>
</nav>
<div id="side-menu" class="side-nav" :class="{ sidenavopen: opened}">
    <a href="#">Home</a>
    <a href="#">Contact Us</a>
    <a href="#">Social Media</a>
</div>
.navbaropen{
  background-color: white;
  overflow: hidden;
  height: 63px;
  margin-right: 250px;
}

.navbar a:hover{
  background-color: #ddd;
  color: #000;
}

.side-nav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  opacity: 0.9;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.3s;
}

.sidenavopen{
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  opacity: 0.9;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.3s;
}

nav{
  transition: margin-left 0.3s;
}
export default {
    data () {
        return {
            listOne: false,
            listTwo: false,
            opened: false
        }
    }
}

我希望在单击导航按钮时在右侧打开侧边导航。

Answer 1

将 left:auto 用于 .side-nav 类它会起作用

.side-nav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  left:auto;
  background-color: #111;
  opacity: 0.9;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.3s;
}