Как сделать автоматическую ширину дочернего элемента элемента относительной позиции, как если бы родитель был stati c? - PullRequest
Новая
       31

Как сделать автоматическую ширину дочернего элемента элемента относительной позиции, как если бы родитель был stati c?

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

Я пытаюсь сделать выпадающий список на фиксированной верхней панели навигации, используя только HTML, S CSS и PHP (НЕТ JavaScript, так как мое приложение / веб-сайт должно работать должным образом с его выключенным ).

У меня есть position: relative; меню, всплывающее справа, с кнопками навигации внутри <ul>, и вот где я застреваю: у меня либо <div> (выпадающий контейнер) в position: static;, где раскрывающийся список имеет правильную ширину авто, но выровнен по левому краю. Посмотреть весь код (CSS изначально был S CSS): 

* {
  font-family: "Helvetica", sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}
#navbar {
  height: 50px;
  width: 100%;
  z-index: 3;
  position: fixed;
  top: 0;
  display: block;
  background-color: white;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3);
  overflow: visible;
}
#navbar a {
  display: block;
  color: black;
  text-decoration: none;
}
#navbar .logonav {
  height: 100%;
  width: auto;
  min-width: 183px;
  float: left;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
#navbar .navmenu {
  z-index: 10;
  list-style: none;
  background-color: white;
}
#navbar .navmenu .navbtn:hover, #navbar .navmenu .navbtn:active {
  background-color: lightgrey;
}
#navbar .menu-btn {
  display: none;
}
@media screen and (max-width: 749.4px) {
  #navbar .navmenu {
    max-height: 0;
    width: 50%;
    display: block;
    position: fixed;
    top: 50px;
    right: 0;
    z-index: 8;
    transition: max-height 0.5s ease-out, height 0.5s ease-out;
  }
}
@media screen and (max-width: 749.4px) and (max-width: 375px) {
  #navbar .navmenu {
    width: 100%;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .navmenu .navbtn {
    padding: 20px;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .hamburger-label {
    height: 100%;
    width: 50px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    position: relative;
    float: right;
    cursor: pointer;
    overflow: hidden;
  }
  #navbar .hamburger-label div {
    display: block;
    overflow: hidden;
  }
  #navbar .hamburger-label .hamburger-bar-one, #navbar .hamburger-label .hamburger-bar-two, #navbar .hamburger-label .hamburger-bar-three {
    height: 2px;
    width: 22px;
    display: block;
    position: relative;
    background-color: #333;
    box-sizing: content-box;
    margin: 4px auto;
    transition: all 0.1s ease-out;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .mobile-menu-disable-screen {
    height: 0;
    width: 100%;
    display: block;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 7;
    opacity: 0;
    background-color: black;
    transition: height 0s linear 0.5s, opacity 0.5s ease-out;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .menu-btn:checked ~ .hamburger-label .hamburger-bar-one {
    transform: translate(0, 6px) rotate(45deg);
  }
  #navbar .menu-btn:checked ~ .hamburger-label .hamburger-bar-two {
    opacity: 0;
  }
  #navbar .menu-btn:checked ~ .hamburger-label .hamburger-bar-three {
    transform: translate(0, -6px) rotate(-45deg);
  }
}
@media screen and (max-width: 749.4px) and (min-width: 375px) {
  #navbar .menu-btn:checked ~ .navmenu {
    height: 100vh;
    max-height: 100vh;
  }
}
@media screen and (max-width: 749.4px) and (max-width: 375px) {
  #navbar .menu-btn:checked ~ .navmenu {
    max-height: 100vh;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .menu-btn:checked ~ .mobile-menu-disable-screen {
    height: 100vh;
    max-height: 100vh;
    opacity: 0.5;
    transition-delay: 0s;
  }
}
@media screen and (min-width: 749.5px) {
  #navbar .navmenu {
    height: 100%;
    width: 56.6%;
    max-width: 625px;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-around;
    position: relative;
    float: right;
    overflow: visible;
    margin-right: 10px;
  }
  #navbar .navmenu li {
    display: block;
  }
  #navbar .navmenu .navbtn {
    font-size: 16px;
    padding: 16px 1.25vw;
  }
  #navbar .navmenu .dropdown {
    display: block;
    overflow: visible;
  }
  #navbar .navmenu .dropdown-content {
    display: none;
    position: absolute;
  }
  #navbar .navmenu .dropdown:hover .dropdown-content {
    display: block;
    top: 50px;
    float: right;
    background-color: white;
  }
  #navbar .hamburger-label, #navbar .mobile-menu-fill {
    display: none;
  }
}
<div id="navbar" role="navigation">
  <a class="logonav" href="/">
    <img src="/images/favicon.png" height="100%"/>
    <p>Some<br />Website Name</p>
  </a>
  <input id="menu-btn" class="menu-btn" type="checkbox"/>
  <label class="hamburger-label" for="menu-btn">
    <div>
      <span class="hamburger-bar-one"></span>
      <span class="hamburger-bar-two"></span>
      <span class="hamburger-bar-three"></span>
    </div>
  </label>
  <ul class="navmenu">
    <li><a class="navbtn" href="/">Home</a></li>
    <li><a class="navbtn" href="/some-place">Some Place</a></li>
    <div class="dropdown">
      <li><a class="dropbtn navbtn" href="/some-place">Some Place</a></li>
      <ul class="dropdown-content">
        <li><a class="navbtn" href="Drop-Link-1">Drop Link 1</a></li>
        <li><a class="navbtn" href="Drop-Link-2">Drop Link 2</a></li>
        <li><a class="navbtn" href="Drop-Link-3">Drop Link 3</a></li>
        <li><a class="navbtn" href="Drop-Link-4">Drop Link 4</a></li>
      </ul>
    </div>
    <li><a class="navbtn" href="/some-place">Some Place</a></li>
    <li><a class="navbtn">More</a></li>
  </ul>
  <label class="mobile-menu-disable-screen" for="menu-btn"></div>
</div>

или <div> (выпадающий контейнер) равен position: relative;, а ширина раскрывающихся страниц свернута до ширины фактической навигационной кнопки. Посмотреть весь код: 

* {
  font-family: "Helvetica", sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}
#navbar {
  height: 50px;
  width: 100%;
  z-index: 3;
  position: fixed;
  top: 0;
  display: block;
  background-color: white;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3);
  overflow: visible;
}
#navbar a {
  display: block;
  color: black;
  text-decoration: none;
}
#navbar .logonav {
  height: 100%;
  width: auto;
  min-width: 183px;
  float: left;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
#navbar .navmenu {
  z-index: 10;
  list-style: none;
  background-color: white;
}
#navbar .navmenu .navbtn:hover, #navbar .navmenu .navbtn:active {
  background-color: lightgrey;
}
#navbar .menu-btn {
  display: none;
}
@media screen and (max-width: 749.4px) {
  #navbar .navmenu {
    max-height: 0;
    width: 50%;
    display: block;
    position: fixed;
    top: 50px;
    right: 0;
    z-index: 8;
    transition: max-height 0.5s ease-out, height 0.5s ease-out;
  }
}
@media screen and (max-width: 749.4px) and (max-width: 375px) {
  #navbar .navmenu {
    width: 100%;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .navmenu .navbtn {
    padding: 20px;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .navmenu .dropdown .dropbtn {
    display: none;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .hamburger-label {
    height: 100%;
    width: 50px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    position: relative;
    float: right;
    cursor: pointer;
    overflow: hidden;
  }
  #navbar .hamburger-label div {
    display: block;
    overflow: hidden;
  }
  #navbar .hamburger-label .hamburger-bar-one, #navbar .hamburger-label .hamburger-bar-two, #navbar .hamburger-label .hamburger-bar-three {
    height: 2px;
    width: 22px;
    display: block;
    position: relative;
    background-color: #333;
    box-sizing: content-box;
    margin: 4px auto;
    transition: all 0.1s ease-out;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .mobile-menu-disable-screen {
    height: 0;
    width: 100%;
    display: block;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 7;
    opacity: 0;
    background-color: black;
    transition: height 0s linear 0.5s, opacity 0.5s ease-out;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .menu-btn:checked ~ .hamburger-label .hamburger-bar-one {
    transform: translate(0, 6px) rotate(45deg);
  }
  #navbar .menu-btn:checked ~ .hamburger-label .hamburger-bar-two {
    opacity: 0;
  }
  #navbar .menu-btn:checked ~ .hamburger-label .hamburger-bar-three {
    transform: translate(0, -6px) rotate(-45deg);
  }
}
@media screen and (max-width: 749.4px) and (min-width: 375px) {
  #navbar .menu-btn:checked ~ .navmenu {
    height: 100vh;
    max-height: 100vh;
  }
}
@media screen and (max-width: 749.4px) and (max-width: 375px) {
  #navbar .menu-btn:checked ~ .navmenu {
    max-height: 100vh;
  }
}
@media screen and (max-width: 749.4px) {
  #navbar .menu-btn:checked ~ .mobile-menu-disable-screen {
    height: 100vh;
    max-height: 100vh;
    opacity: 0.5;
    transition-delay: 0s;
  }
}
@media screen and (min-width: 749.5px) {
  #navbar .navmenu {
    height: 100%;
    width: 56.6%;
    max-width: 625px;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-around;
    position: relative;
    float: right;
    overflow: visible;
    margin-right: 10px;
  }
  #navbar .navmenu li {
    display: block;
  }
  #navbar .navmenu .navbtn {
    font-size: 16px;
    padding: 16px 1.25vw;
  }
  #navbar .navmenu .dropdown {
    display: block;
    position: relative;
    overflow: visible;
  }
  #navbar .navmenu .dropdown-content {
    display: none;
    position: absolute;
  }
  #navbar .navmenu .dropdown:hover .dropdown-content {
    display: block;
    top: 50px;
    float: right;
    background-color: white;
  }
  #navbar .hamburger-label, #navbar .mobile-menu-fill {
    display: none;
  }
}
<div id="navbar" role="navigation">
  <a class="logonav" href="/">
    <img src="/images/favicon.png" height="100%"/>
    <p>Some<br />Website Name</p>
  </a>
  <input id="menu-btn" class="menu-btn" type="checkbox"/>
  <label class="hamburger-label" for="menu-btn">
    <div>
      <span class="hamburger-bar-one"></span>
      <span class="hamburger-bar-two"></span>
      <span class="hamburger-bar-three"></span>
    </div>
  </label>
  <ul class="navmenu">
    <li><a class="navbtn" href="/">Home</a></li>
    <li><a class="navbtn" href="/some-place">Some Place</a></li>
    <div class="dropdown">
      <li><a class="dropbtn navbtn" href="/some-place">Actual Nav Button</a></li>
      <ul class="dropdown-content">
        <li><a class="navbtn" href="Drop-Link-1">Drop Link 1</a></li>
        <li><a class="navbtn" href="Drop-Link-2">Drop Link 2</a></li>
        <li><a class="navbtn" href="Drop-Link-3">Drop Link 3</a></li>
        <li><a class="navbtn" href="Drop-Link-4">Drop Link 4</a></li>
      </ul>
    </div>
    <li><a class="navbtn" href="/some-place">Some Place</a></li>
    <li><a class="navbtn">More</a></li>
 </ul>
      <label class="mobile-menu-disable-screen" for="menu-btn"></div>
    </div>

Я хочу, чтобы раскрывающиеся списки действовали подобно второму сценарию, но чтобы width: auto; увеличивал раскрывающиеся кнопки влево до максимума при необходимости.

ПРИМЕЧАНИЯ. Я понимаю, что во втором сценарии я могу указать абсолютную высоту (xpx или x%), и это увеличит ее, но я не знаю необходимой ширины (ссылки могут быть чем угодно это просто модульная «схема» для клиента, которая может быть преобразована в веб-сайт любого размера). Кроме того, игнорируйте интервал на не выпадающих кнопках; они правильно отображаются в моем приложении.

Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...