寻求GSAP响应式菜单适配帮助：大屏无需菜单按钮

云上老周

2026-8-24

修复响应式GSAP导航菜单问题

你的代码主要有三个核心问题：

桌面端（>1000px）未正确配置菜单显示逻辑：.menu元素默认可见性不明确，多余的联系信息、社交媒体模块未隐藏，主菜单布局也未适配桌面端顶部导航需求。
子菜单的slideToggle逻辑在全屏幕宽度下生效，导致桌面端点击主菜单也会触发下拉，不符合预期。
窗口大小切换时，菜单状态未自动重置，会出现菜单残留或交互异常。

1. 修正CSS样式

明确桌面端与移动端的菜单展示规则：

桌面端默认显示主菜单，隐藏菜单按钮、关闭按钮、联系信息和社交媒体模块。
移动端保持全屏菜单样式，确保初始状态完全隐藏。

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  font-family: "Helvetica";
}

.hero-section {
  width: 100%;
}

h1 {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: lighter;
  text-align: center;
}

/* 桌面端基础样式 */
.menu-btn {
  display: none;
}

.close-menu {
  display: none;
}

.menu {
  opacity: 1;
}

.nav {
  padding: 1rem 2rem;
}

.main-menu {
  display: flex;
  gap: 2rem;
  justify-content: end;
  list-style: none;
  margin: 0;
}

.main-menu-item a {
  text-decoration: none;
  color: #121212;
  font-weight: lighter;
}

.submenu {
  display: none;
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1rem;
  list-style: none;
  margin: 0.5rem 0 0 0;
}

.submenu-item a {
  color: #666;
  padding: 0.5rem 1rem;
  display: block;
}

/* 移动端媒体查询 */
@media(max-width: 1000px) {
  .menu-btn {
    display: block;
    position: fixed;
    margin: 1em;
    font-size: 24px;
    z-index: 10;
  }

  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #121212;
    opacity: 0;
    visibility: hidden;
  }

  .close-menu {
    display: block;
    position: fixed;
    margin: 1em;
    font-size: 24px;
    color: #fff;
    z-index: 11;
  }

  .nav {
    position: absolute;
    left: 21%;
    margin-top: 8%;
    padding: 0;
  }

  .main-menu {
    display: block;
    padding: 0;
  }

  .main-menu-item {
    padding-top: 30px;
  }

  .main-menu-item a {
    color: #fff;
  }

  .submenu {
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 1rem;
  }

  .submenu-item a {
    color: grey;
  }

  .submenu li {
    margin: 20px 0;
  }

  a ion-icon {
    position: relative;
    font-size: 9px;
    opacity: 0.4;
  }

  .contact {
    color: #fff;
    position: absolute;
    bottom: 70px;
    right: 24%;
  }

  .contact p {
    font-weight: lighter;
    color: grey;
    font-family: "Helvetica";
  }

  .media {
    position: absolute;
    bottom: 70px;
    left: 22%;
  }

  .media ul {
    list-style: none;
    padding: 0;
  }

  .media ul li {
    display: inline-block;
    color: grey;
    font-weight: lighter;
    padding-right: 16px;
  }
}

@media(max-width: 768px) {
  h1 {
    font-size: 20px;
  }

  .nav {
    margin-top: 20%;
  }

  .contact {
    display: none;
  }
}

2. 优化JavaScript逻辑

限制子菜单切换仅在移动端生效
添加窗口resize监听，自动重置菜单状态
完善GSAP动画的初始状态与结束回调

// 子菜单切换逻辑，仅在移动端生效
function toggleSubmenu(e) {
  if (window.innerWidth > 1000) return;
  
  e.preventDefault();
  const $currentLi = $(this);
  const hasVisibleSiblingSubmenu = $currentLi.siblings('li').find('ul.submenu:visible').length;

  if (hasVisibleSiblingSubmenu) {
    $('ul.submenu').slideUp('normal');
  }
  $currentLi.find('ul.submenu').slideToggle('normal');
}

$('ul.main-menu li').click(toggleSubmenu);

// GSAP菜单动画时间线
var t1 = new TimelineMax({ 
  paused: true,
  onReverseComplete: function() {
    TweenMax.set(".menu", { autoAlpha: 0, visibility: 'hidden' });
  }
});

t1.to(".menu", 0.8, {
  autoAlpha: 1,
  visibility: 'visible'
});

t1.staggerFrom(".main-menu li a:not(.submenu li a)", 1, {
  opacity: 0,
  y: 10,
  ease: Power3.easeInOut
}, 0.1);

t1.from(".submenu", 0.8, {
  autoAlpha: 0
});

t1.staggerFrom(".media ul li", 1, {
  opacity: 0,
  y: 10,
  ease: Power3.easeInOut
}, 0.1, "-=2");

t1.from(".call", 1, {
  delay: -2,
  opacity: 0,
  y: 10,
  ease: Power3.easeInOut
});

t1.from(".mail", 1, {
  delay: -1.6,
  opacity: 0,
  y: 10,
  ease: Power3.easeInOut
});

// 初始化菜单状态
function initMenuState() {
  if (window.innerWidth <= 1000) {
    t1.reverse();
  } else {
    t1.pause();
    TweenMax.set(".menu", { autoAlpha: 1, visibility: 'visible' });
  }
}

// 窗口大小变化时重置菜单状态
$(window).resize(function() {
  initMenuState();
  if (window.innerWidth > 1000) {
    $('ul.submenu').slideUp('normal');
  }
});

// 页面加载时初始化
initMenuState();

// 菜单按钮点击事件
$(document).on("click", ".menu-btn", function() {
  if (window.innerWidth > 1000) return;
  t1.reversed(!t1.reversed());
});

$(document).on("click", ".close-menu", function() {
  if (window.innerWidth > 1000) return;
  t1.reversed(!t1.reversed());
});

3. HTML代码（无需修改）

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

<div class="wrapper">
  <div class="hero-section">
    <h1>Responsive Drop-down Menu Concept</h1>

    <div class="menu-btn">
      <ion-icon name="menu"></ion-icon>
    </div>
  </div>

  <div class="menu">
    <div class="close-menu">
      <ion-icon name="close"></ion-icon>
    </div>

    <div class="nav">
      <ul class="main-menu">
        <li class="main-menu-item">
          <a href="#">Home</a>
        </li>

        <li class="main-menu-item">
          <a href="#">Our Products &nbsp; <ion-icon name="add"></ion-icon></a>

          <ul class="submenu">
            <li class="submenu-item">
              <a href="#">Fonts</a>
            </li>
            <li class="submenu-item">
              <a href="#">Mockups</a>
            </li>
            <li class="submenu-item">
              <a href="#">Presets</a>
            </li>
          </ul>
        </li>

        <li class="main-menu-item">
          <a href="#">Portfolio &nbsp; <ion-icon name="add"></ion-icon></a>

          <ul class="submenu">
            <li class="submenu-item">
              <a href="#">Timeless flow</a>
            </li>
            <li class="submenu-item">
              <a href="#">Foretime</a>
            </li>
            <li class="submenu-item">
              <a href="#">Never again</a>
            </li>
            <li class="submenu-item">
              <a href="#">Departure</a>
            </li>
          </ul>
        </li>

        <li class="main-menu-item">
          <a href="#">Our Story</a>
        </li>

        <li class="main-menu-item">
          <a href="#">Contact &nbsp; <ion-icon name="add"></ion-icon></a>

          <ul class="submenu">
            <li class="submenu-item">
              <a href="#">Call now</a>
            </li>
            <li class="submenu-item">
              <a href="#">Mail us</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="contact">
      <p class="call">
        <ion-icon name="call"></ion-icon>&nbsp;&nbsp;&nbsp;+91 29000 23000</p>
      <p class="mail">
        <ion-icon name="mail"></ion-icon>&nbsp;&nbsp;&nbsp;codegridweb@gmail.com</p>
    </div>

    <div class="media">
      <ul>
        <li>Facebook</li>
        <li>Instagram</li>
        <li>Twitter</li>
      </ul>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者mr.Hritik

寻求GSAP响应式菜单适配帮助：大屏无需菜单按钮

1. 修正CSS样式 #

2. 优化JavaScript逻辑 #

3. HTML代码（无需修改） #

1. 修正CSS样式

2. 优化JavaScript逻辑

3. HTML代码（无需修改）