css+js全屏覆盖导航菜单栏先看效果：
完整代码如下：js导航栏下拉菜单
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏覆盖响应式导航菜单</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="toggleIcon" onclick="menuToggle()"></div>
<div id="menu-overlay">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script type="text/javascript">
function menuToggle(){
var nav = ElementById('menu-overlay');
le('active');
var nav = ElementById('toggleIcon');
le('active');
}
</script>
</body>
</html>
CSS：
@import url('leapis/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
font-family: 'Poppins',sans-serif;
}
#menu-overlay
{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f00;
justify-content: center;
align-items: center;
overflow-y: auto;
transform: scale(0);
transition: 0.5s;
}
#menu-overlay.active
{
transform: scale(1);
}
#menu-overlay ul
{
position: relative;
}
#menu-overlay ul li
{
position: relative;
list-style: none;
text-align: center;
/* ⼀个内联元素设置为display:block
是不允许有它内部的嵌套块元素。 */
display: block;
}
#menu-overlay ul li a
{
position: relative;
text-decoration: none;
font-size: 3.5em;
padding: 0 10px;
color: rgb(253, 250, 250);
/* font-weight：字体加粗
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900 定义由细到粗的字符。400 等同于 normal，⽽ 700 等同于 bold。    inherit 规定应该从⽗元素继承字体的粗细。*/
font-weight: 700;
/* text-transform：属性控制⽂本的⼤⼩写。
none 默认。定义带有⼩写字母和⼤写字母的标准的⽂本。
capitalize ⽂本中的每个单词以⼤写字母开头。
uppercase 定义仅有⼤写字母。
lowercase 定义⽆⼤写字母，仅有⼩写字母。
inherit 规定应该从⽗元素继承 text-transform 属性的值。 */
text-transform: uppercase;
display: inline-block;
}
#menu-overlay ul li a::before
{
content: '';
position: absolute;
/* 删除线化到字体50%的位置*/
top: 50%;
height: 8px;
background: #ff0;
/* Transform属性应⽤于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。    translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
scale(x[,y]?) 定义 2D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定⾓度。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
*/
transform: translateY(-50%) scaleX(0);
/* transform-Origin属性允许您更改转换元素的位置。
使⽤此属性必须先使⽤ transform 属性。 */
transform-origin: right;
/* transition 属性设置元素当过渡效果，四个简写属性为：
transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候
注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
*/
transition: 0.5s transform;
}
#menu-overlay ul li a:hover::before
{
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: 0.5s transform;
}
#toggleIcon
{
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #ff0 ;
/* z-index 属性指定⼀个元素的堆叠顺序。
拥有更⾼堆叠顺序的元素总是会处于堆叠顺序较低的元素的前⾯。
注意： z-index 进⾏定位元素(position:absolute, position:relative, or position:fixed)。 */
z-index: 1;
/* cursor 属性规定要显⽰的光标的类型（形状）。
pointer 光标呈现为指⽰链接的指针（⼀只⼿）
crosshair 光标呈现为⼗字线。 */
cursor: pointer;
}
#toggleIcon.active
{
background: rgb(199, 199, 196) ;
}
更多css动画，js⼩案例见我的主页

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。