Как затемнить веб-страницу при наведении на панель навигации, как на модале начальной загрузки?

Question

Можно ли использовать ту же процедуру, которую использует Bootstrap при затемнении страницы при открытии модального окна?

Мне бы хотелось, чтобы она затемнялась при наведении курсора на панель начальной загрузки.
Конечно, я делаюне хочу, чтобы навигационная панель была затемнена!

Как работает modal-dim?
Могу ли я использовать один и тот же css?

Answer 1

Вы можете сделать это с чистым CSS, поддерживаемым всеми основными браузерами.

.navbar:hover+.nav-sibling {
  display: block;
  opacity: 0.5;
  background: rgba(0, 0, 0, 1);
  transition: opacity .15s linear;
}

.nav-sibling {
  position: fixed;
  display: none;
  overflow: hidden;
  outline: 0;
  /* equal to the navbar height */
  top: 56px;
  bottom: 0;
  left: 0;
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<div class="nav-sibling">

</div>
<footer class=" container-fluid bg-dark text-white py-5">
  <div class="row">
    <div class="col-12">
      <h6>Lorem ipsum</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>

nav-sibling аналогично модальному коду начальной загрузки, за исключением свойства top.

---

Обновление

Непрозрачность устанавливает значение непрозрачности для элемента и всех его дочерних элементов;В то время как RGBA устанавливает значение непрозрачности только для одного объявления.- StackOverflow - непрозрачность по сравнению с RGBA

Лучше использовать число от 0 до 1 для alpha channel вместо opacity.В приведенном ниже коде я использовал 0.9.

.navbar:hover+.nav-sibling {
  display: block;
  background-color: rgba(0, 0, 0, 0.9);
  transition: all .15s linear;
}

Answer 2

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