显示整个页面导航阴影

Question

我正在为一个个人项目设计一个导航栏，它在所有设备上看起来都一样，而汉堡包只在移动设备上显示。目前我正在使用 ☰ 和 × 进行导航，但最终想为它们和阴影打开设置动画，但我需要它首先发挥作用。

我目前的问题是允许导航栏显示在网站顶部并使用 × 关闭。许多移动网站的一个问题是您无法点击下拉菜单下方的其他地方，这减轻了用户尝试以不同方式关闭它的问题。

这是我正在使用的代码；

.site-header {
 height: 80px;
 background-color: #FFFFFF;
 display: inline-flex;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1;
 box-shadow: 0px 0.5px 10px #000000;
}

.site-header-fill {
 height: 80px;
}

.site-logo-container {
 height: 60px;
 margin-left: 20px;
 margin-right: auto;
 margin-top: 10px;
 margin-bottom: 10px;
 display: block;
 float: left;
}

.site-logo {
 height: 60px;
 width: auto;
 float: left;
}

.site-nav-action-container {
 height: 50px;
 width: 50px;
 max-width: 50px;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 15px;
 margin-bottom: 15px;
 display: block;
 float: right;
 text-align: right;
}

.site-nav {
 height: 100%;
 left: 0px;
 position: fixed;
 top: 0px;
 width: 100%;
 background: #3399ff;
 z-index: 2;
}

.site-nav-content {
 width: 20%;
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
 .site-nav-content {
  width: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 }
}

.site-nav-pages {
 text-align: center;
}

<div class="site-header ">
   <div class="site-logo-container">
      <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
   </div>
   <div class="site-nav-action-container">
      <button class="nav" onclick="location.href='/'">
         <p class="site-log-in-text w700">☰</p>
      </button>
   </div>
</div>
<div class="site-nav">
   <div class="site-nav-action-container">
      <button class="nav" onclick="location.href='/'">
         <p class="site-log-in-text w700">X</p>
      </button>
   </div>
   <div class="site-nav-content">
      <div class="site-nav-pages">
         <p>Page 1</p>
         <p>Page 2</p>
         <p>Page 3</p>
         <p>Page 4</p>
         <p>Page 5</p>
      </div>
   </div>
</div>

您在运行时会遇到的问题是导航阴影始终存在。我不确定采用哪种方法来显示 it/having 它最初是隐藏的。

理想情况下，按 ☰ 应该会打开它，而按 × 会关闭它。它可以显示在页面内容的顶部，因为它总是会填满整个屏幕。我只是不确定该采用哪种方法。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

使用您的 <button class="nav"> 元素在状态之间切换。状态可以在 CSS 中定义，比如它默认情况下的外观以及激活时的外观。在您的情况下，您需要将 <div class="site-nav"> 元素的状态更改为默认隐藏，并在单击按钮时显示。

删除按钮上的 onclick 属性，因为您不想导航。相反 select 它们在 JavaScript 中并听取点击。为它们提供相同的事件处理函数，该函数将在 site-nav 元素上切换 class。

在您的 CSS 中，将 opacity: 0 和 visibility: hidden 添加到 .site-nav 样式。这将使元素透明并完全隐藏它。这些属性还允许您使用从可见到不可见的转换，反之亦然。

const navButtons = document.querySelectorAll('button.nav');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
}

navButtons.forEach(button => button.addEventListener('click', onClick));

.site-header {
 height: 80px;
 background-color: #FFFFFF;
 display: inline-flex;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1;
 box-shadow: 0px 0.5px 10px #000000;
}

.site-header-fill {
 height: 80px;
}

.site-logo-container {
 height: 60px;
 margin-left: 20px;
 margin-right: auto;
 margin-top: 10px;
 margin-bottom: 10px;
 display: block;
 float: left;
}

.site-logo {
 height: 60px;
 width: auto;
 float: left;
}

.site-nav-action-container {
 height: 50px;
 width: 50px;
 max-width: 50px;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 15px;
 margin-bottom: 15px;
 display: block;
 float: right;
 text-align: right;
}

.site-nav {
 height: 100%;
 left: 0px;
 position: fixed;
 top: 0px;
 width: 100%;
 background: #3399ff;
 z-index: 2;
  opacity: 0;
  visibility: 0;
  transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out;
}

.site-nav.active {
  opacity: 1;
  visibility: visible;
}

.site-nav-content {
 width: 20%;
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
 .site-nav-content {
  width: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 }
}

.site-nav-pages {
 text-align: center;
}

<div class="site-header ">
   <div class="site-logo-container">
      <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
   </div>
   <div class="site-nav-action-container">
      <button class="nav">
         <p class="site-log-in-text w700">☰</p>
      </button>
   </div>
</div>
<div class="site-nav">
   <div class="site-nav-action-container">
      <button class="nav">
         <p class="site-log-in-text w700">X</p>
      </button>
   </div>
   <div class="site-nav-content">
      <div class="site-nav-pages">
         <p>Page 1</p>
         <p>Page 2</p>
         <p>Page 3</p>
         <p>Page 4</p>
         <p>Page 5</p>
      </div>
   </div>
</div>

显示整个页面导航阴影

Displaying whole page nav shade

html

javascript

css

nav

navbar