CODEWITHSUNDEEP
htmlcssvue.jsvuejs2bootstrap-vue
deadbeforesunlight
deadbeforesunlight

Reputation: 229

keeping the menu attached to the sidebar

I'm trying to create a hovering menu which you would show up when you click on the text on the sidebar. I have used position:absolute so that I can position it at the end of the sidebar. However, if I resize the window, the submenu is not attached to the sidebar. I want that the submenu is always attached to the sidebar. I'm using bootstrap vue for the grid system. How do I achieve this?

Codesandbox demo

<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>

Upvotes: 0

Views: 610

Answers (1)

Raul Rene
Raul Rene

Reputation: 10270

Not sure if I got it correctly, but in order to do what you want you need a relative parent to your absolute sidebar

<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;
}

And now you can style the submenu w.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

}

Upvotes: 1

Related Questions