如何制作带有动画三行的下拉移动菜单？

Posted 2023-04-13

技术标签:

【中文标题】如何制作带有动画三行的下拉移动菜单？【英文标题】：How can I make a dropdown mobile menu with animated three lines? 【发布时间】：2020-09-07 05:14:49 【问题描述】：

如何制作一个下拉菜单，例如这个动画菜单：

Animated transform from three lines menu to cross

我想要这样的 html 内容，但使用上面的动画菜单：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_mobile_navbar

【问题讨论】：

【参考方案1】：

这很容易。您可以尝试使用您提供的链接中的此代码。我为你拿了这个：

function myFunction() 
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") 
    x.style.display = "none";
  
  else 
    x.style.display = "block";
  

$(document).ready(function () 
    $(document).on('click', ".lines-button", function () 
        $('#overlay').show();
        $('.lines-button').addClass('close');
    );
    $(document).on('click', ".lines-button.close", function () 
        $('#overlay').hide();
        $('.lines-button').removeClass('close');
    );
);

body 
  font-family: Arial, Helvetica, sans-serif;

body 
    background: #000;

.lines-button 
    position: relative;
    float:right;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 96px;
    height: 50px;
    font-size: 0;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;

.lines-button:focus 
    outline: none;

.lines-button span 
    display: block;
    position: absolute;
    left: 18px;
    right: 18px;
    height: 8px;
    background: white;
    border-radius: 0.57143rem;

.lines-button span::before, .lines-button span::after 
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #fff;
    border-radius: 0.57143rem;
    content:"";

.lines-button span::before 
    top: -15px;

.lines-button span::after 
    bottom: -15px;

.lines 
    background: none;

.lines span 
    -webkit-transition: background 0s 0.3s;
    transition: background 0s 0.3s;

.lines span::before, .lines span::after 
    -webkit-transition-duration: 0.3s, 0.3s;
    transition-duration: 0.3s, 0.3s;
    -webkit-transition-delay: 0.3s, 0s;
    transition-delay: 0.3s, 0s;

.lines span::before 
    -webkit-transition-property: top, -webkit-transform;
    transition-property: top, transform;

.lines span::after 
    -webkit-transition-property: bottom, -webkit-transform;
    transition-property: bottom, transform;

.lines.close 
    background: none;

.lines.close span 
    background: none;

.lines.close span::before 
    top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

.lines.close span::after 
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);

.lines.close span::before, .lines.close span::after 
    -webkit-transition-delay: 0s, 0.3s;
    transition-delay: 0s, 0.3s;

.mobile-container 
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;


.topnav 
  overflow: hidden;
  background-color: #333;
  position: relative;


.topnav #myLinks 
  display: none;


.topnav a 
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;


.topnav a.icon,.topnav button.icon
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;


.topnav a:hover 
  background-color: #ddd;
  color: black;


.active 
  background-color: #4CAF50;
  color: white;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
  </head>

  <body>
    <!-- Simulate a smartphone / tablet -->
    <div class="mobile-container">

    <!-- Top Navigation Menu -->
    <div class="topnav">
      <a href="#home" class="active">Logo</a>
      <div id="myLinks">
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>
      <button class="icon lines-button lines" onclick="myFunction()">
          <span></span>
      </button>
    </div>

    <div style="padding-left:16px">
      <h3>Vertical Mobile Navbar</h3>
      <p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
      <p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
    </div>

    <!-- End smartphone / tablet look -->
    </div>

  </body>
</html>

【讨论】：

谢谢，还有一点小问题：如何删除“logo”a href 并只留下三行？我怎么能那样做导航栏，导航栏越过其他元素而不依赖于其他元素？我怎样才能将链接（当我单击三行时）远离三行？感谢您的回答！

以上是关于如何制作带有动画三行的下拉移动菜单？的主要内容，如果未能解决你的问题，请参考以下文章

如何使下拉菜单的高度与引导程序4中子菜单的高度相同