js实现导航栏上下动画效果

2023年6月10日下午10:46 • JavaScript

JS实现导航栏上下动画效果攻略

1. 确定导航栏样式

首先，我们需要确定导航栏的样式，通常包括容器样式、菜单样式和链接样式。可以使用CSS给导航栏添加样式。

.navbar {
  background-color: #fff;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.navbar .menu {
  display: none;
}

.navbar a {
  color: #333;
  text-decoration: none;
}

2. 添加按钮和动画

我们需要添加一个按钮，当该按钮被单击时，菜单将显示或隐藏。同时，我们需要使用JS添加动画效果以实现菜单的平滑显示和隐藏。

<div class="navbar">
  <a href="#">My Website</a>
  <button class="menu-toggle">&#9776;</button>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

.navbar .menu {
  display: none;
  transition: all 0.4s ease-in-out;
}

.navbar .menu.show {
  display: block;
  transform: translateY(0);
}

.navbar .menu.hide {
  display: none;
  transform: translateY(-100%);
}

var menuToggle = document.querySelector('.menu-toggle');
var menu = document.querySelector('.menu');

menuToggle.addEventListener('click', function() {
  menu.classList.toggle('show');
  menu.classList.toggle('hide');
});

在上述代码中，我们首先使用querySelector获取菜单切换按钮和菜单。在单击菜单切换按钮时，我们使用classList.toggle()函数在.show和.hide类之间切换，这将添加或移除菜单的显示和隐藏类。我们使用CSS transition属性和transform属性来实现菜单平滑的显示和隐藏效果。

3. 示例

以下是两个示例，演示了JS实现导航栏上下动画效果的完整过程。

示例1：使用jQuery实现导航栏动画效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example 1</title>
  <style>
    .navbar {
      background-color: #fff;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .navbar .menu {
      display: none;
      transition: all 0.4s ease-in-out;
    }

    .navbar .menu.show {
      display: block;
      transform: translateY(0);
    }

    .navbar .menu.hide {
      display: none;
      transform: translateY(-100%);
    }

    .navbar a {
      color: #333;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="navbar">
    <a href="#">My Website</a>
    <button class="menu-toggle">&#9776;</button>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.menu-toggle').click(function() {
        $('.menu').slideToggle('slow');
      });
    });
  </script>
</body>
</html>

示例2：使用原生JS实现导航栏动画效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example 2</title>
  <style>
    .navbar {
      background-color: #fff;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .navbar .menu {
      display: none;
      transition: all 0.4s ease-in-out;
    }

    .navbar .menu.show {
      display: block;
      transform: translateY(0);
    }

    .navbar .menu.hide {
      display: none;
      transform: translateY(-100%);
    }

    .navbar a {
      color: #333;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="navbar">
    <a href="#">My Website</a>
    <button class="menu-toggle">&#9776;</button>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <script>
    var menuToggle = document.querySelector('.menu-toggle');
    var menu = document.querySelector('.menu');

    menuToggle.addEventListener('click', function() {
      menu.classList.toggle('show');
      menu.classList.toggle('hide');
    });
  </script>
</body>
</html>

以上就是JS实现导航栏上下动画效果的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现导航栏上下动画效果 - Python技术站