文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Gsap响应菜单

问Gsap响应菜单
EN

Stack Overflow用户
提问于 2022-07-25 08:57:56
回答 2查看 245关注 0票数 0

我是gsap的新手，它是JavaScript动画库。我在YouTube上找到了这个很酷的导航代码。所以我试着把它转换成响应程序，所以对于大于1000 no的屏幕大小和小于1000 no的屏幕大小都不需要菜单按钮，它将默认工作。我做了一些改变，但他们并没有像我预期的那样去做。所以有人能帮我吗。

提前谢谢。

​

代码语言：javascript
复制
$('ul.main-menu li').click(function(e) {
  e.preventDefault();

  if ($(this).siblings('li').find('ul.submenu:visible').length) {
    $('ul.submenu').slideUp('normal');
  }
  $(this).find('ul.submenu').slideToggle('normal');
});

var t1 = new TimelineMax({
  paused: true
});

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

t1.staggerFrom(".main-menu li a:not(.submenu li a)", 1, {
  opacity: 1,
  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
});

t1.reverse();

$(document).on("click", ".menu-btn", function() {
  t1.reversed(!t1.reversed());
});

$(document).on("click", ".close-menu", function() {
  t1.reversed(!t1.reversed());
});
代码语言：javascript
复制
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;
}

.main-menu {
  display: flex;
  gap: 1rem;
  justify-content: end;
}

.close-menu {
  display: none;
}

@media(max-width: 1000px) {
  .menu-btn {
    display: block;
    position: fixed;
    margin: 1em;
    font-size: 24px;
  }
  .menu {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #121212;
    opacity: 0;
  }
  .close-menu {
    display: block;
    position: fixed;
    margin: 1em;
    font-size: 24px;
    color: #fff;
    z-index: 1;
  }
  .main-menu {
    display: block;
  }
  .nav {
    position: absolute;
    left: 21%;
    margin-top: 8%;
  }
  .nav ul {
    list-style: none;
  }
  .main-menu-item {
    padding-top: 30px;
  }
  .main-menu-item a {
    text-decoration: none;
    color: #fff;
    font-weight: lighter;
  }
  .submenu-item a {
    color: grey;
  }
  .submenu li {
    margin: 20px 0;
  }
  a ion-icon {
    position: relative;
    font-size: 9px;
    opacity: 0.4;
  }
  .submenu {
    display: none;
  }
  .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;
  }
  .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;
  }
}
代码语言：javascript
复制
<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>

​

javascript
html
css
gsap
EN

回答 2

Stack Overflow用户

发布于 2022-07-29 20:44:57

您需要将所有.menu-btn内容添加到媒体查询中的.media ul li中。

就像这样：

代码语言：javascript
复制
@media(max-width: 768px) {
  
  .menu-btn {
    display: block;
    position: fixed;
    margin: 1em;
    font-size: 24px;
  }
  .menu {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #121212;
    opacity: 0;
  }
  .close-menu {
    display: block;
    position: fixed;
    margin: 1em;
    font-size: 24px;
    color: #fff;
    z-index: 1;
  }
  .main-menu {
    display: block;
  }
  .nav {
    position: absolute;
    left: 21%;
    margin-top: 8%;
  }
  .nav ul {
    list-style: none;
  }
  .main-menu-item {
    padding-top: 30px;
  }
  .main-menu-item a {
    text-decoration: none;
    color: #fff;
    font-weight: lighter;
  }
  .submenu-item a {
    color: grey;
  }
  .submenu li {
    margin: 20px 0;
  }
  a ion-icon {
    position: relative;
    font-size: 9px;
    opacity: 0.4;
  }
  .submenu {
    display: none;
  }
  .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;
  }
  .media ul li {
    display: inline-block;
    color: grey;
    font-weight: lighter;
    padding-right: 16px;
  }
}
票数 0
EN

Stack Overflow用户

发布于 2022-08-03 10:23:49

您可以维护两个菜单。一个用于桌面，另一个用于移动。隐藏用于max-width:1000px的桌面部分。提供了密码。如果对你有用的话请告诉我。

​

代码语言：javascript
复制
$('ul.main-menu li').click(function(e) {
  e.preventDefault();

  if ($(this).siblings('li').find('ul.submenu:visible').length) {
    $('ul.submenu').slideUp('normal');
  }
  $(this).find('ul.submenu').slideToggle('normal');
});

var t1 = new TimelineMax({
  paused: true
});

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

t1.staggerFrom(".main-menu li a:not(.submenu li a)", 1, {
  opacity: 1,
  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
});

t1.reverse();

$(document).on("click", ".menu-btn", function() {
  t1.reversed(!t1.reversed());
});

$(document).on("click", ".close-menu", function() {
  t1.reversed(!t1.reversed());
});
代码语言：javascript
复制
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  font-family: "Helvetica";
}

.hero-section {
  width: 100%;
}

.menu{
  opacity:1;
  visibility:visible;

 }

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

.menu-btn {
  display: none;
}

.main-menu {
  display: flex;
  gap: 1rem;
  justify-content: end;
}

.close-menu {
  display: none;
}
.menu.desktop{
visibility:visible !important;
opacity:1 !important;
position:absolute;
top:0;
right:0;
 }

@media(max-width: 1000px) {
  .menu.desktop{
    display:none;
  }
  .menu-btn {
    display: block;
    position: fixed;
    margin: 1em;
    font-size: 24px;
  }
  .menu {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #121212;
    opacity: 0;
  }
  .close-menu {
    display: block;
    position: fixed;
    margin: 1em;
    font-size: 24px;
    color: #fff;
    z-index: 1;
  }
  .main-menu {
    display: block;
  }
  .nav {
    position: absolute;
    left: 21%;
    margin-top: 8%;
  }
  .nav ul {
    list-style: none;
  }
  .main-menu-item {
    padding-top: 30px;
  }
  .main-menu-item a {
    text-decoration: none;
    color: #fff;
    font-weight: lighter;
  }
  .submenu-item a {
    color: grey;
  }
  .submenu li {
    margin: 20px 0;
  }
  a ion-icon {
    position: relative;
    font-size: 9px;
    opacity: 0.4;
  }
  .submenu {
    display: none;
  }
  .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;
  }
  .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;
  }
}
代码语言：javascript
复制
<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 class="menu desktop">
    <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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73106482

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档