显示整个页面的导航阴影

问题描述 投票：1回答：3

我正在为一个个人项目设计一个导航遮罩，在所有设备上的外观都将与在移动设备上的汉堡包相同。目前，我正在使用☰和×进行导航，但最终希望为这些动画和阴影打开设置动画，但我首先需要使其起作用。

目前，我的问题是允许导航阴影显示在站点顶部，并使用×将其关闭。许多移动网站的问题是您无法点击下拉菜单下方的其他位置，这减轻了用户尝试以其他方式关闭它的麻烦。

这是我正在使用的代码；

.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>

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

理想地按下☰应该将其打开，而×将其关闭。最好将其显示在页面内容的顶部，因为它将始终覆盖整个屏幕。我只是不确定采用哪种方法。

任何帮助将不胜感激。预先感谢。

javascript html css navbar nav
3个回答
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>
0
投票

我想您已经用navbar解决了您的问题。您可以使用☰到×效果。您可以自己编写所有行标签。

  const menuIcon = document.querySelector(".menu-icon");
    menuIcon.addEventListener("click", () => {
        menuIcon.classList.toggle("toggle")
    })
.menu-icon {
  cursor: pointer;
}

.menu-icon div {
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 5px;
  transition: all .4s ease;
}
    
.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}
 <div class="menu-icon">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
-1
投票

我做了一个摘要，以使您了解下拉菜单的工作方式。重要的一点是，不使用可见性和不透明性来隐藏内容，这将在您尝试添加悬停效果时产生意想不到的结果，因为内容将显示在页面上，但对用户不可见。使用“显示”属性隐藏内容，因为这将完全从图像中删除内容，直到用户将其向下切换为止。

这不是用于生产的完美代码，而是使您理解的演示。

let nav = document.querySelector(".site-nav-content");
let button =  document.querySelector(".nav");

nav.style.display = "none";

button.addEventListener("click", () => {
  if(nav.style.display === "none"){
    nav.style.display = "block";
    button.innerHTML = "X";
  }else{
   nav.style.display = "none";
   button.innerHTML = "☰";
  }

})
.site-header {
	height: 80px;
	background-color: #FFFFFF;
	display: grid;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	box-shadow: 0px 0.5px 10px #000000;
  grid-template-columns: 80% 20%;
  text-align: right;
  }
  
  .site-nav{
  align-self: center;
  padding-right: 10px;

  }
  
  button{
  position: relative;
  font-size: 30px;
    cursor: pointer;
    z-index: 5555;
  }
  
  

.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-content{
background: red;
  position: fixed;
  width: 100%;
  height: 100%;
  transition: all 1000ms ease-in-out;
  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">
   <div class="site-nav-action-container">
      <button class="nav">
        X
      </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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.