数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 和 JavaScript 创建全屏叠加导航菜单？
在本文中，我们将讨论如何使用 CSS 和 JavaScript 创建全屏叠加导航菜单。
Web 应用中的叠加层无非是在其他 HTML 元素之上叠加一个 HTML 元素。我们可以叠加图像、页面、文本等。
创建**全屏叠加导航**栏有三种方法，如下所示。
从左侧，
从顶部，以及
无动画。
没有直接创建叠加层的方法；您可以使用上面指定的技术叠加两个 HTML 元素。
创建全屏叠加导航菜单的步骤
以下是创建全屏叠加导航菜单的步骤。
创建一个 div，类名为 overlay，将叠加层样式设置为 **z-index:1, top:0, left:0, 和 overflow-x: hidden。**
创建一个 openNav 函数，并在函数内部使用样式，通过使用 DOM (**document.getElementById("myNav").style.width = "100%"**) 将页面显示为 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
在本节中，我们设置页面的背景颜色，并在鼠标悬停在链接上时更改链接的颜色。如果我们在 overlay 类中设置样式 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>
更新于：2022-12-19
2K+ 浏览量
广告