使用`translateY();` CSS类和jQuery切换类。

Question

我正在学习（刚刚开始）jQuery，现在我想制作一个像this site上的菜单

我的意思是，我希望菜单从视口向下滑动到标题，就像链接中的模板一样。

我尝试查看jQuery API文档，有关菜单的YT上的一些视频等，但没有发现任何相关内容。

任何人都可以学习我，该怎么做？

非常感谢您

PS：我只有这个：

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  box-sizing: border-box;
  background-color: #4E4F53;
  font-weight: 400;
}

.container {
  max-width: 980px;
  margin: auto;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2d2d2d;
  padding: 20px 0;
}

.logo {
  float: left;
}

ul {
  position: relative;
  float: right;
  margin: 5px;
  display: flex;
  flex-direction: row;
}

ul.active {}

ul li {
  list-style: none;
}

ul li a {
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 1.25em;
  display: block;
  font-size: 1em;
}

.menu-toggle {
  margin: 0 1em;
  color: #fff;
  font-size: 1.5em;
  float: right;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>RISE</title>

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

</head>

<body>
  <header>
    <div class="container">
      <div class="logo">
        <img src="img/logo.png" alt="logo">
      </div>
      <div class="menu-toggle">
        <i class="fas fa-bars"></i>
      </div>
      <ul class="menu">
        <li><a href="#" class="">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </header>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".menu-toggle").click(function() {
        $(".menu").toggle();
      });
    });
  </script>
</body>

</html>

Answer 1

使用`translateY();` CSS类和jQuery切换类。

此代码段应将您带到需要的地方！需要进行一些修改以满足您的需求。

我添加了一个名为.offsite-canvas的div，用于容纳您的“屏幕外”容器。当您按下菜单切换按钮时，jQuery会切换一个类，该类将屏幕外的容器显示给用户。

$( ".menu-toggle" ).click(function() {
    $(".offsite-canvas").toggleClass("open");
});

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
  margin: 0;
  padding: 0;
}

.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}

.offsite-canvas.open {
position: relative;
transform: translateY(0);
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  box-sizing: border-box;
  background-color: #4E4F53;
  font-weight: 400;
}

.container {
  max-width: 980px;
  margin: auto;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2d2d2d;
  padding: 20px 0;
}

.logo {
  float: left;
}

ul {
  position: relative;
  float: right;
  margin: 5px;
  display: flex;
  flex-direction: row;
}

ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}

ul.active {}

ul li {
  list-style: none;
}

ul li a {
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 1.25em;
  display: block;
  font-size: 1em;
}

.menu-toggle {
  margin: 0 1em;
  color: #fff;
  font-size: 1.5em;
  float: right;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>RISE</title>

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

</head>

<body>

<div class="offsite-canvas">
      <ul class="offcanvas">
        <li><a href="#" class="">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
</div>

  <header>
    <div class="container">
      <div class="logo">
        <img src="img/logo.png" alt="logo">
      </div>
      <div class="menu-toggle">
        <i class="fas fa-bars"></i>
      </div>
      <ul class="menu">
        <li><a href="#" class="">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </header>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".menu-toggle").click(function() {
        $(".menu").toggle();
      });
    });
  </script>
</body>

</html>

Answer 2

我建议您是否要创建单击菜单时显示在屏幕上的导航菜单，按常规创建菜单，然后使用{{1将其放在屏幕的左侧或右侧}}在CSS中。

从那时起，单击按钮时，切换一个类，该类会将菜单平移到x轴以使其可见。

如何使菜单从视口滑动到页眉

2 个答案:

使用`translateY();` CSS类和jQuery切换类。

如何使菜单从视口滑动到页眉

2 个答案:

使用translateY(); CSS类和jQuery切换类。

使用`translateY();` CSS类和jQuery切换类。