Как сделать так, чтобы раскрывающийся список занимал всю ширину области просмотра?

Я хочу построить навигацию со списком. Последний элемент списка будет иметь уль внутри. Я хочу, чтобы ul был скрыт по умолчанию, и он должен быть виден только тогда, когда находится родительский элемент li. я хочу сделать my-dropdown-content возьмите полную ширину области просмотра, а не только ширину его родителя. Я не могу этого сделать.

Прикрепленное изображение показывает, как выглядит моя навигация... Я хочу, чтобы этот испорченный выпадающий список занимал всю ширину при наведении на "Подробнее..."

https://imgur.com/a/6ID54

У меня есть такой код:

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

.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    min-width: 1400px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.my-dropdown-content li {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.my-dropdown:hover .my-dropdown-content {
    display: block;
}
<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li class="my-dropdown"><a href="#">More. . .</a>
    <ul class="my-dropdown-content">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4"><li><a href="#"></a></li></div>
          <div class="col-md-4"><li><a href="#"></a></li></div>
          <div class="col-md-4"><li><a href="#"></a></li></div>
        </div>  
      </div>
    </ul>
  </li>
</ul>

я использовал min-width чтобы он занимал всю ширину, но все разрушается, как только я изменяю размер окна. Там должно быть решение. Пожалуйста, я буду очень признателен, если вы поможете мне с этим.

Источник

4 ответа

Решение

В зависимости от поддержки браузера, которую вы хотите достичь, вы можете использовать vw единица (ширина области просмотра) и установите его в 100vw,

.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    width: 100vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

Полный рабочий пример

/* vv for demonstration purposes only*/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body{padding-top:60px;}
.menu{list-style:none;padding:0;}
.menu>li{float:left;width:20%;}
.menu>li>a{display:block;border:1px solid black;padding:1em}
/* ^^ for demonstration purposes only*/

.my-dropdown{
  position: relative;
  display: inline-block;
}
.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    width: 100vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.my-dropdown-content li {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.my-dropdown:hover .my-dropdown-content {
    display: block;
}
<ul class="menu">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li class="my-dropdown"><a href="#">More. . .</a>
    <ul class="my-dropdown-content">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
        </div>  
      </div>
    </ul>
  </li>
</ul>

Источник

Вы можете сделать это, используя position as fixed на hover как показано ниже,

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

.my-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #0A141A;
  min-width: 1400px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.my-dropdown-content li {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.my-dropdown:hover .my-dropdown-content {
  display: block;
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
}
.my-dropdown-content a{
  text-decoration:none;
  color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul>
  <li>
    <a href="#"></a>
  </li>
  <li>
    <a href="#"></a>
  </li>
  <li>
    <a href="#"></a>
  </li>
  <li>
    <a href="#"></a>
  </li>
  <li class="my-dropdown"><a href="#">More. . .</a>
    <ul class="my-dropdown-content">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4">
            <li><a href="#">one</a></li>
          </div>
          <div class="col-md-4">
            <li><a href="#">two</a></li>
          </div>
          <div class="col-md-4">
            <li><a href="#">three</a></li>
          </div>
        </div>
      </div>
    </ul>
  </li>
</ul>

Источник

Поскольку вы можете решить проблему, установив min-width из .my-dropdown-contentЭто хорошая отправная точка. Проблема с изменением размера окна. Поэтому вам нужно определить событие изменения размера окна:

document.getElementsByTagName("body")[0].addEventListener("resize", function() {
    var dropDownContents = document.getElementsByClassName("my-dropdown-content");
    for (var index in dropDownContents) {
        dropDownContents[index].style["min-width"] = getDesiredSize(dropDownContents[index]);
    }
});

куда getDesiredSize будет функция, которую вам нужно реализовать, которая будет принимать элемент и возвращать его min-width, Если все min-width значения будут эквивалентны друг другу независимо от значения размера, тогда вы можете рассчитать его один раз для события изменения размера.

Источник

Вам не нужно слишком усложнять.... вместо "min-width: 1400px" используйте "with: 100%"

.my-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    /* min-width: 1400px; */
    width:100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
Источник
Другие вопросы по тегам