时间戳

首页 > 解决方案 > 显示整个页面导航阴影

javascript - 显示整个页面导航阴影

问题描述

标签： javascripthtmlcssnavbarnav

解决方案

Use your <button class="nav"> elements to switch between states. A state can be defined in CSS, like how does it look by default and how does it look when activated. In your case you'll want to change the state of the <div class="site-nav"> element to hide by default, and show when clicking the button.

Remove the onclick attributes on the buttons as you don't want to navigate. Instead select them in JavaScript and listen for the click. Give them both the same event handler function that will toggle a class on the site-nav element.

In your CSS add opacity: 0 and visibility: hidden to the .site-nav styles. This will make the element transparent and hide it completely. These properties also allow you to use a transition from visible to invisible and vice versa.

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">☰&lt;/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>

推荐阅读