我想使用vue js将侧面导航从窗口的左侧移到右侧。
我尝试包括以下CSS顶部:0和右侧: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
}
}
}
我希望在单击导航按钮时在右侧打开侧面导航。
答案 0 :(得分:0)
将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;
}