如何使用 CSS 和 JavaScript 创建全屏覆盖导航菜单?
javascriptweb developmentfront end technology更新于 2024/6/15 4:13:00
在本文中，我们将讨论如何使用 CSS 和 JavaScript 创建全屏覆盖导航菜单。
Web 应用程序中的覆盖只不过是将一个 HTML 元素转置到另一个元素上。我们可以覆盖图像、页面、文本等。
有三种方法可以创建全屏覆盖导航栏，如下所示。
从左侧，
从顶部，以及
无动画。
没有直接的方法来创建覆盖；您可以使用上面指定的技术叠加两个 HTML 元素。
创建全屏叠加导航菜单的步骤
以下是创建全屏叠加导航菜单的步骤。
创建一个类名为 overlay 的 div，并将叠加样式指定为 z−index:1、top:0、left:0 和 overflow-x: hidden。
创建一个 openNav 函数，并使用函数内的样式通过 DOM 100% 显示页面(document.getElementById("myNav").style.width = "100%")
创建一个 closeNav 函数，并使用函数内的样式通过 DOM 隐藏页面(document.getElementById("myNav").style.width = "0%")
使用 onClick 方法调用两个函数，openNav 用于打开按钮，closeNav 用于关闭按钮。
在下面的例子中，我们从左侧创建一个全屏覆盖导航栏。
Example.html
在本节中，我们将创建四种类型的链接并添加打开和关闭按钮。
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Navigation </h2>
<p>Click on the element below menu bar.</p>
<span style="font-size: 30px; cursor: pointer; color: rgb(123, 234, 39)" onclick="openNav()">☰</span>
Example.css
在本节中，我们将设置页面的背景颜色，并在鼠标悬停在链接上时更改链接的颜色。如果我们在覆盖类中设置 height: 100%; width: 0; 的样式，它将从左侧覆盖。
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(39, 18, 18);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: absolute;
display: grid;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
width: 40%;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 30px;
color: white;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: red;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: white;
}
/*media query*/
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
Example.js
在此部分，我们定义两个函数 - openNav 和 closeNav。如果您单击菜单按钮，页面将以全宽显示。如果您单击关闭按钮，页面宽度将为 0%。
<!-- Javascript -->
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(39, 18, 18);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: absolute;
display: grid;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
width: 40%;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 30px;
color: white;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: red;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: white;
}
/*media query*/
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Navigation</h2>
<p>Click on the element below menu bar.</p>
<span style="font-size: 30px; cursor: pointer; color: rgb(123, 234, 39)" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
