显示整个页面导航阴影

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>

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

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

任何帮助将不胜感激。提前致谢。

Answer 1

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

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

在您的 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>