将菜单附加到侧边栏

Question

我正在尝试创建一个悬停菜单，当你点击侧边栏上的文本时，它会显示出来。我已经使用了position:absolute，这样我就可以将它定位在侧边栏的末尾。但是，如果我调整窗口的大小，则子菜单不会附加到侧边栏。我希望子菜单总是附在侧边栏上。我正在为网格系统使用bootstrap vue。我该如何做到这一点？

Codesandbox演示

<template>
<div>
<div class="hello" @click="hoverMenu">click me</div>
<div v-if="showMenu" class="submenu">
<div>One</div>
<div>two</div>
</div>
</div>
</template>
<script>
export default {
props: {
msg: String,
},
data() {
return {
showMenu: false,
};
},
methods: {
hoverMenu() {
this.showMenu = !this.showMenu;
},
},
};
</script>
<style scoped>
.hello {
background: lightblue;
height: 100vh;
cursor: pointer;
}
.submenu {
position: absolute;
top: 5px;
display: block;
background: yellow;
left: 156px;
}
</style>

app.vue

<template>
<div id="app">
<b-row>
<b-col md="2">
<HelloWorld />
</b-col>
<b-col md="10"> hello </b-col>
</b-row>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld,
},
};
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
}
</style>

Answer 1

不确定我是否正确，但为了做你想做的事情，你需要一个绝对侧边栏的相对父级

<div class="sidebar-wrapper">
<div class="hello" @click="hoverMenu">click me</div>
<div v-if="showMenu" class="submenu">
<div>One</div>
<div>two</div>
</div>
</div>

.sidebar-wrapper {
position: relative;
}

现在您可以对submenuw.r.t.sidebar-wrapper:进行样式设置

.submenu { 
position: absolute;
top: 5px; 
background: yellow;
width: 90px;
right: 0; // set starting point to the right
transform: translateX(100%); // move it more to the right with 100% of it's width
}