Блог

Главная - Вопросы по программированию - Элементы меню стека должны быть слева, а не внизу

Элементы меню стека должны быть слева, а не внизу

#html #css #dropdown

#HTML #css #выпадающий список

Вопрос:

У меня есть следующее меню:

введите описание изображения здесь

и я бы хотел, чтобы они располагались вертикально с левой стороны: — что-то вроде (извините за плохую покраску) :

введите описание изображения здесь

HTML-код:-

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

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

Комментарии:

1. попробуйте этот .dropdown:hover .dropContent { display: flex; right: 100%; z-index: 1 }

2. @Vlad это ничего не делает 🙁

Ответ №1:

Надеюсь, это поможет вам начать — наведите курсор на синий, слева появятся красные пункты меню.

overlayItem позиционируется относительно, поэтому абсолютное позиционирование находится по отношению к нему

hoverMe это синий двоичный объект. Наведите на него курсор, выпадающий список отображается как гибкий, чтобы получить строку параметров меню

dropdown позиционируется как абсолютный и перемещается в соответствии с hoverMe использованием transform. Ширина соответствует содержимому, поэтому строка flex не занимает больше содержимого внутри 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>