个人中心
gpt4 book ai didi

javascript - 如何让我的响应式菜单滑入？

转载 作者：太空宇宙 更新时间：2023-11-04 01:19:36 24 4
gpt4 key购买 nike

我觉得我在这里遗漏了很多信息，如何让我的菜单在单击右上角的圆圈时向左滑动？任何帮助将不胜感激。

https://jsfiddle.net/gehzbpyr/3/ 

$(document).ready(function() {
    $('.nav-icon').on('click', function(e) {
       e.preventDefault();
       $('.menu').toggleClass('slide-down');
    });
});
html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.navigation {
  background-color: rgba(255, 255, 255, 0);
  height: 100%;
}

.top-navigation {
  border: 1px solid black;
  width: 100%;
  height: auto;
  background-color: #fff !important;
}

.menu {
  background-color: #ff5f49;
  height: 100vh;
  /* display: none; */
  margin-top: 60px;
  top: 0;
  left: 0;
}

.menu li {
  list-style: none;
}

.menu li a {
  text-decoration: none;
  color: #efefef;
  display: block;
  text-align: center;
  font-family: 'Changa One';
  font-size: 7em;
}

.menu li a:hover {
  color: #353c42;
  transition: color 0.4s;
}

#logo {
  width: 200px;
  margin-top: 15px;
  position: absolute;
}

.nav-icon {
  margin: 10px 20px 10px 0;
  float: right;

}

@media (max-width: 802px) {
  .menu li a {
    font-size: 4em;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>KreativeZ | Reinventing the Digital Agency | Taking you to the stars!</title>
  <link rel="stylesheet" href="css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Changa+One|Nanum+Gothic" rel="stylesheet">
</head>

<body>
  <nav class="navigation">
    <div class="top-navigation">
      <a href="#" class="nav-icon">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="35px" height="35px" viewBox="0 0 105.1 106" style="enable-background:new 0 0 105.1 106;" xml:space="preserve">
          <style type="text/css">
            .st0{fill:#FF5F49;stroke:#353C42;stroke-width:3;stroke-miterlimit:10;}
          </style>
          <circle class="st0" cx="55" cy="53.9" r="36.2"/>
        </svg>
      </a>
      <img src="img/KreativeZ_Final_Logo.png" alt="Logo" id="logo">
    </div>
      <ul class="menu">
          <li><a href="">Home</a></li>
          <li><a href="">Work</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Contact</a></li>
      </ul>
  </nav>

最佳答案

您可以使用转换属性来平移元素，并在点击事件中切换此属性....

https://jsfiddle.net/RACCH/eu3sht2m/ 

$(document).ready(function() {
    $('.nav-icon').on('click', function(e) {
       e.preventDefault();
       $('.menu').toggleClass('slide-left');
    });
});

CSS

.slide-left{
  transform: translateX(-100%);
}

您甚至可以向任何方向翻译....

.slide-left{
  transform: translateX(100%);
}

.slide-left{
  transform: translateY(-100%);
}

.slide-left{
  transform: translateY(100%);
}

要从关闭位置打开它，请将默认状态设置为初始...

.menu {
  ....
  transform: translateX(-100%);
}

.slide-left{
  transform: translateX(0%);
}

https://jsfiddle.net/RACCH/1yxswomh/1/

关于javascript - 如何让我的响应式菜单滑入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49363689/

24 4 0
文章推荐： python - cmap 到 Matplotlib 中的 rgba
文章推荐： javascript - 检测滚动元素之间的距离
文章推荐： css - 容器内 float 元素(导航控件)的垂直居中
文章推荐： css - 我应该在哪个 .scss 文件上进行站点更新？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com