Есть ли CSS -существимый способ сделать элементы выпадающего меню того же размера, что и их родитель? - PullRequest
Новая
       6

Есть ли CSS -существимый способ сделать элементы выпадающего меню того же размера, что и их родитель?

0 голосов
/ 20 марта 2020

Я вмешивался в W3 Schools и до сих пор получил желаемый эффект, но теперь панель навигации расширяется с помощью выпадающего меню. Есть ли лучший способ сделать это, что я скучаю? Заранее извиняюсь за форматирование, и спасибо за потраченное время.

РЕДАКТИРОВАТЬ: Надеюсь, что уточнить немного: Пример

Ссылка на W3schools вещь: https://www.w3schools.com/code/tryit.asp?filename=GD1ZCKC1TKED

Код: 

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

body {
      font-family: Arial, Helvetica, sans-serif;
    }

.mainNav {
    background-color: #000;
    padding:12px 10px 0px 0px;
    float: right;
    overflow: hidden;
}

.mainNav a {
    color: #FFF;
    float: left;
    display: block;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.mainNav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;

}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.mainNav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;

}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 500px) {
    .logo {
        max-width: 25%;
        height: auto;
        padding-top:10px;
        margin-bottom:-50px;
        display: block;
        margin: auto;
    }
    .mainNav{
        background-color: black;
        width:100%;
        font-size: 18px;
    }
    .mainNav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }
    .mainNav a.icon {
        float: right;
        display: block;
    }
    .mainNav.responsive {
        position: relative;
    }
    .mainNav.responsive .icon {
        position: absolute;
        right: 0;
        top: 15px;
    }
    .mainNav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
    .mainNav.responsive .dropdown {
        float: none;
        }
    .mainNav.responsive .dropdown-content {
        position: relative;
        }
    .mainNav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: center;
    }
}
</style>
</head>
<body>

<div class="mainNav" id="navID">

            <a href="#home" class="active">Temp1</a>

            <div class="dropdown">
                <button class="dropbtn">Temp2 <i class="fa fa-caret-down"></i></button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div> 

            <div class="dropdown">
                <button class="dropbtn">Temp3<i class="fa fa-caret-down"></i></button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div> 

            <div class="dropdown">
                <button class="dropbtn">Temp4 <i class="fa fa-caret-down"></i></button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div> 

            <a href="#sources">Temp5</a>

            <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        </div>

        <script>
        function myFunction() {
            var x = document.getElementById("navID");
            if (x.className === "mainNav") {
                x.className += " responsive";
            } else {
                x.className = "mainNav";
          }
        }
        </script>
</body>
</html>

1 Ответ

0 голосов
/ 20 марта 2020

Причина, по которой расширяется вся ваша навигация, связана с позиционированием предмета. Вы установили .dropdown-content на position: relative;. Если вы установите position: absolute;, это исправит первую проблему.

Однако теперь, чтобы получить ширину, равную ширине родительского, есть несколько способов сделать это. Проще всего было бы просто установить для свойства width значение dropdown-content, чтобы оно всегда было одинаковым. Единственная проблема будет, если у вас есть более длинные выпадающие области контента, чтобы слова были обрезаны. Если это так, вы можете использовать min-width вместо этого. Я вычислил ширину, равную 97.45px;, из отступов, используемых в теге <button>.

Так что все, что вам нужно сделать, это изменить css из .dropdown-content на: 

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

или, как я сказал min-width: 97.45px;. Это будет иметь ту же ширину, что и родительский, при этом позволяя расширять опции с большим содержанием.

Если это не то, что вы ищете, пожалуйста, прокомментируйте ответ на это, и я буду рад помочь , Есть несколько разных способов сделать это. Чисто установить ширину может быть просто самым простым. Кстати, добро пожаловать в стек переполнения

...