动画汉堡导航 [英] Animated hamburger navigation

问题描述

我正在为我的网站创建一个完整的页面导航阴影，以便在所有设备上都相同.目前，我有两个按钮，一个用于查看阴影时的按钮，另一个用于不显示阴影时的按钮.我想知道总是有一个按钮以便可以设置动画会更好吗?我的目标是像 squeeze 动画那样这里，但我不是确保我将如何在两个按钮上而不是一个上进行动画处理，或者如何从头开始创建它.

I'm creating a full page navigation shade for my site so that it's the same across all devices. At the moment I have two buttons, one for when the shade is in view and one for when it isn't. I'm wondering if it would be better to have one button always present so it can be animated? I'd be aiming for something like the squeeze animation here but I'm not sure how I'd go about animating that across the two buttons vs just one - or how you'd create it from scratch.

这就是我正在使用的东西；

Here's what I'm working with;

const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
}

navButtons.forEach(button => button.addEventListener('click', onClick));

.site-header {
    height: 80px;
    background-color: #FFFFFF;
    display: inline-flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    box-shadow: 0px 0.5px 10px #000000;
}

.site-header-fill {
    height: 80px;
}

.site-logo-container {
    height: 60px;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    float: left;
}

.site-logo {
    height: 60px;
    width: auto;
    float: left;
}

.site-nav-action-container {
    height: 50px;
    width: 50px;
    max-width: 50px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    float: right;
    text-align: right;
}

.site-nav {
	height: 100%;
	left: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	background: #3399ff;
	z-index: 2;
	display: none;
}

.site-nav.active {
    display: block;
}

.site-nav-content {
	width: 20%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
.site-nav-content {
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
}

.site-nav-pages {
    text-align:center;
}

.nav-action {
    height: 50px;
    width: 50px;
}

<div class="site-header ">
   <div class="site-logo-container">
      <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
   </div>
   <div class="site-nav-action-container">
      <button class="nav-action">
         <p>☰</p>
      </button>
   </div>
</div>
<div class="site-nav">
   <div class="site-nav-action-container">
      <button class="nav-action">
         <p>×</p>
      </button>
   </div>
   <div class="site-nav-content">
      <div class="site-nav-pages">
         <p>Page 1</p>
         <p>Page 2</p>
         <p>Page 3</p>
         <p>Page 4</p>
         <p>Page 5</p>
      </div>
   </div>
</div>

目前，根据按下的按钮，阴影现在可以显示或不显示，但是我想知道是否要使用一个按钮，或者将图标放在按钮之外是否效果最好.

At the moment the shade now functions to be visible or not based on button pressed but I wonder if having one button is the way to go or if placing the icon outside of a button would work best.

理想情况下，当从顶部露出阴影时，汉堡包会动起来，但是一旦对按钮进行了明智的选择，我将继续努力.任何帮助将不胜感激，因为我显然不知道自己在这里做什么.

Ideally the hamburger would animate as the shade is revealed from the top but I'll work on that once a sensible approach to the button is sorted. Any help would be appreciated because I clearly don't know what I'm doing here.

谢谢.

推荐答案

您可以使用☰to×效果.您可以自己编写所有行标签.第一个代码段是我经常使用的动画，第二个代码段是我认为想要的动画.我都安装了这两个组件，因此您可以使用任何想要使用的东西.

You can use for the ☰ to × effect. You can write all the line labels yourself. the first code snippet is an animation that I use a lot, and the second is the animation that I think you want. I installed both so you can use whatever you want to use.

const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
}

navButtons.forEach(button => button.addEventListener('click', onClick));


const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", () => {
  menuIcon.classList.toggle("toggle")
  siteNav.classList.toggle('active');
})

.site-header {
  height: 80px;
  background-color: #FFFFFF;
  display: inline-flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0px 0.5px 10px #000000;
}

.site-header-fill {
  height: 80px;
}

.site-logo-container {
  height: 60px;
  margin-left: 20px;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  float: left;
}

.site-logo {
  height: 60px;
  width: auto;
  float: left;
}

.site-nav-action-container {
  height: 50px;
  width: 50px;
  max-width: 50px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
  float: right;
  text-align: right;
}

.site-nav {
  height: 100%;
  left: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
  background: #3399ff;
  display: none;
}

.site-nav.active {
  display: block;
}

.site-nav-content {
  width: 20%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
  .site-nav-content {
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.site-nav-pages {
  text-align: center;
}


/* Menu icon */

.menu-icon {
  cursor: pointer;
  position: absolute;
  z-index: 1;
}

.menu-icon div {
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 5px;
  transition: all .4s ease;
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

<!DOCTYPE html>
<html lang="en">

<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">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Document</title>



</head>

<body>

  <div class="site-header ">
    <div class="site-logo-container">
      <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
    </div>
    <div class="site-nav-action-container">
      <!-- Menu icon -->
      <div class="menu-icon">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
    </div>
    <div class="site-nav">
      <div class="site-nav-content">
        <div class="site-nav-pages">
          <p>Page 1</p>
          <p>Page 2</p>
          <p>Page 3</p>
          <p>Page 4</p>
          <p>Page 5</p>
        </div>
      </div>
    </div>



</body>

</html>

const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
}

navButtons.forEach(button => button.addEventListener('click', onClick));

let icon = document.getElementById("nav-icon");
icon.addEventListener("click", () => {
  icon.classList.toggle("open")
  siteNav.classList.toggle('active');

})

.site-header {
  height: 80px;
  background-color: #FFFFFF;
  display: inline-flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0px 0.5px 10px #000000;
}

.site-header-fill {
  height: 80px;
}

.site-logo-container {
  height: 60px;
  margin-left: 20px;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  float: left;
}

.site-logo {
  height: 60px;
  width: auto;
  float: left;
}

.site-nav-action-container {
  height: 50px;
  width: 50px;
  max-width: 50px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
  float: right;
  text-align: right;
}

.site-nav {
  height: 100%;
  left: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
  background: #3399ff;
  display: none;
}

.site-nav.active {
  display: block;
}

.site-nav-content {
  width: 20%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
  .site-nav-content {
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.site-nav-pages {
  text-align: center;
}


/* NAV ICON */

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
  top: 8px;
}

#nav-icon span:nth-child(4) {
  top: 16px;
}

#nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon {
  width: 30px;
  height: 25px;
  position: absolute;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 1;
  top: 30px;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #000;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

<div class="site-header ">
  <div class="site-logo-container">
    <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
  </div>
  <div class="site-nav-action-container">
    <!-- Menu icon -->
    <div id="nav-icon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="site-nav">
    <div class="site-nav-content">
      <div class="site-nav-pages">
        <p>Page 1</p>
        <p>Page 2</p>
        <p>Page 3</p>
        <p>Page 4</p>
        <p>Page 5</p>
      </div>
    </div>
  </div>

这篇关于动画汉堡导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！