Максимальная ширина меню при наведении мыши игнорируется, когда родитель имеет относительное расположение - PullRequest
Новая
       11

Максимальная ширина меню при наведении мыши игнорируется, когда родитель имеет относительное расположение

0 голосов
/ 16 февраля 2019

Абсолютно позиционированная ширина элемента ограничена, когда родительский элемент является относительным

У меня есть панель навигации, у которой есть меню при наведении курсора.Меню будет содержать теги, а длина текста в тегах будет варьироваться.

Я хочу, чтобы в меню была минимальная, а для максимальной ширины дочернего элемента div необходимо установить min-width / max-width.Но независимо от того, какая ширина меню ограничена точкой минимальной ширины.

Можно ли заставить дочерний элемент div игнорировать ширину родительского элемента, при этом оставляя его дочерним (я не могу переместить этоот родителя, который, я знаю, был бы простым решением)?

вот пример поведения, с которым я сталкиваюсь: https://codepen.io/vee1234/pen/omQxWP

.navBar {
  background-color: #222;
  width: 50px;
  min-height: 100%;
  height: 100vh;
}

.navItem {
  color: #a1a1a1;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}

.menu {
font-family: "Open Sans", sans-serif;
  position: absolute;
  display: none;
  min-width: 200px;
  max-width: 600px;
  background-color: #333;
  z-index: 100;
  left: 100%;
  top: 20%;
}

.menu div a {
  display:block;
  border: 1px solid red;
}

.navItem:hover .menu {
  display: block;
}
 <div class="navBar">
    <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div class="menu">
        <div class="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
    <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div class="menu">
        <div class="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
     <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div className="menu">
        <div className="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
  </div>

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

Один трюк состоит в том, чтобы сделать относительный элемент больше, добавив немного padding-right, которое не повлияет на то, как будет проходить текст, но будет учитываться при вычислении ширины абсолютного элемента.Затем просто раскрасьте только ту часть, которую вы хотите.Вы также можете добавить отрицательное поле для исправления добавленного отступа. 

.menu {
  width:50px;
  padding-right:500px;
  margin-right:-500px;
  background:#000 content-box;
  height:100px;
  position:relative;
  color:#fff;
}

.menu div{
  position:absolute;
  top:0;
  left:50px;
  background:blue;
  min-width:200px;
  max-width:500px;
}
.menu div a {
  border:1px solid;
  display:block;
}
<div class="menu">
 some text here
  <div>
    <a>some text here</a>
    <a>some text here some text here some text here some text here some text here some text here some text here some text here</a>
    <a>some text here</a>
  </div>
</div>
0 голосов
/ 16 февраля 2019

Абсолютное позиционирование вынимает элемент из того места, где он фактически находится в DOM, и позиционирует его там, где вы говорите.Из-за этого элемент теряет ссылки на родительские элементы, которые помогут определить ширину.Вам нужно будет установить ширину явно.

...