自适应滑动特效菜单(滚动选项)

自适应滑动特效菜单(滚动选项)

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

主要效果
自适应

代码区

html

<div class="fullpageMenu" id='nav'>
  <div class="banner">
    <img src="img/bg.jpg">
  </div>
  <div class="nav">
    <ul>
      <li><a href="#" data-text="Home1">Home1</a></li>
      <li><a href="#" data-text="Home2">Home2</a></li>
      <li><a href="#" data-text="Home3">Home3</a></li>
      <li><a href="#" data-text="Home4">Home4</a></li>
      <li><a href="#" data-text="Home5">Home5</a></li>
      <li><a href="#" data-text="Home6">Home6</a></li>
    </ul>
  </div>
</div>
<span class="menuicon" id='toggle' onclick="menuToggle()"></span>

CSS

* {
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  box-sizing: border-box; /* 盒子大小规则 */
  font-family: 'Teko', sans-serif; /* 字体 */
}

body {
  min-height: 100vh; /* 最小高度 */
}

/* 完整页面的菜单 */

.fullpageMenu {
  position: fixed; /* 固定定位 */
  top: -100%; /* 距上部 */
  width: 100%; /* 宽 */
  height: 100%; /* 高 */
  display: flex; /* 弹性盒模型 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
  background: #111; /* 背景颜色 */
  transition: 0.5s; /* 过渡动画 */
}

/* 通过修改top定位实现下拉显示 */
.fullpageMenu.active {
  top: 0;
}

/* 右侧图片 */

.fullpageMenu .banner {
  position: relative;
  min-width: 600px;
  height: 100%;
}

.fullpageMenu .banner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例进行覆盖 */
  overflow-y: auto; /* Y轴溢出自定义，当设置了cover时无用处 */
}

/* 菜单 */

.fullpageMenu .nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.fullpageMenu .nav ul {
  position: relative;
}

.fullpageMenu .nav ul li {
  position: relative;
  list-style: none; /* 清理默认样式 */
  padding: 0 20px;
  margin: 5px 0;
  overflow: hidden; /* 溢出隐藏 */
  display: table; /* 表格模型 */
}

/* 红色背景 */
.fullpageMenu .nav ul li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff0047;
  transition: transform 0.5s ease-in-out; /* 过渡时间，0.5s 执行速率 */
  transform: scaleY(0); /* Y轴放大 */
  transform-origin: bottom;
}

.fullpageMenu .nav ul li:hover::before{
  transition: transform 0.5s ease-in-out;
  transform: scaleY(1);
  transform-origin: top;
}

.fullpageMenu .nav ul li a {
  position: relative;
  color: #fff;
  text-decoration: none; /* 字体附加样式 */
  font-size: 4em; /* 字体大小 */
  font-weight: 700; /* 字体维度 */
  padding-top: 12px;
  display: inline-block;
  text-transform: uppercase; /* 大写 */
  transition: 0.5s ease-in-out;
}

.fullpageMenu .nav ul li:hover a {
  transform: translateY(-100%); /* Y轴移动，以显示before */
  color: #fff;
}

.fullpageMenu .nav ul li a::before {
  content: attr(data-text); /* 内容 */
  position: absolute;
  bottom: -100%;
  left: 0;
  color: #fff;
}

/* 菜单设置 */
/* 未展开 */
.menuicon {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: transparent url(../img/menu.png);
  background-size: 40px; /* 背景大小 */
  cursor: pointer; /* 鼠标悬停样式 */
  background-repeat: no-repeat; /* 不重复覆盖 */
  background-position: 10px;
  transition:  0.5s;
}
/* 展开 */
.menuicon.active {
  /* 通过修改url实现 */
  background: transparent url(../img/exit.png);
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 10px;
}

/* 自适应布局，隐藏图片 */

@media (max-width: 991px) {
  .banner {
    display: none;
  }
}

JS

		function menuToggle() {
			// 根据ID获取元素
			var nav = document.getElementById('nav');
			var toggle = document.getElementById('toggle');
			// 切换active的类
			nav.classList.toggle('active');
			toggle.classList.toggle('active')
		}

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）