CODEWITHSUNDEEP
htmlcssdropdown
Milan
Milan

Reputation: 811

Stack Menu Items to be on the left instead of bottom

I have the following menu:

enter image description here

and I would like it to stack vertically on the left hand side:- something like (sorry for the bad paintjob) :

enter image description here

HTML Code:-

<div class="dropdown">
   <button class="btn bg-transparent fas fa-ellipsis-v fa-lg">
      <div class="dropContent">
         <a data-tooltip="View Activity" onclick="" class="btn icon-gls-option m-b-10 m-l-5 d-print-none"><i class="fas fa-book-open"><span class=""></span></i></a>
         <a data-tooltip="Edit" onclick="" class="btn icon-gls-option m-b-10 m-l-5 d-print-none"><i class="fas fa-pen-alt fa-md"></i></a>
         <a data-tooltip="New Task" onclick="" class="btn icon-gls-option m-b-10 m-l-5 d-print-none"><i class="fas fa-tasks fa-md"></i></a> +
         <a data-tooltip="Delete" onclick="" class="btn icon-gls-danger m-b-10 m-l-5 d-print-none"><i class="fas fa-trash fa-md"></i></a>
      </div>
   </button>
</div>

CSS Code:-

.dropdown {
    position: relative;
    display: inline-block;
}

.dropContent {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    margin-top: 2px;
    color: black;
}

    .dropContent a {
        display: block;
    }

.dropdown:hover .dropContent {
    display: block;
    z-index: 1
}

Upvotes: 0

Views: 33

Answers (1)

Tom
Tom

Reputation: 287

Hopefully this can get you started - hover over blue, red menu options appear on left.

overlayItem positioned relative so absolute positioning is in relation to it

hoverMe this is the blue blob. Hover over it, dropdown is displayed as flex to achieve row of menu options

dropdown positioned absolute and moved in line with hoverMe using transform. Width is fit-content so flex row doesn't take up more than the content inside the div

.overlayItem {
  position: relative;
  
  margin-left: 400px;
  
  height: 50px;
}

.hoverMe {
  width: 50px;
  height: 100%;
  background-color: blue;
}

.hoverMe:hover + .dropdown {
  display: flex;
}
.dropdown:hover {
  display: flex;
}

.dropdown {
  display: none;
  
  gap: 10px;

  height: 100%;

  position: absolute;
  transform: translate(-100%, -100%);
  
  background-color: red;
  
  width: fit-content;
}
<div class="overlayItem">
  <div class="hoverMe"></div>
  <div class="dropdown">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
    <p>item 4</p>
  </div>
</div>

Upvotes: 1

Related Questions