모바일 친화적인 드롭다운 메뉴 개발

이 튜토리얼에서는 햄버거 메뉴 아이콘을 만들고 애니메이션을 적용한 다음 jQuery를 통해 이벤트 리스너를 연결하여 드롭다운 메뉴를 트리거하는 방법을 설명합니다.

일반 HTML과 CSS 대신 Jade(Pug)와 Sass를 사용하겠습니다. 따라서 최소한 이러한 템플릿 엔진에 대한 기본적인 이해가 있어야 합니다.

놀이터 만들기

간단한 플레이그라운드 구현부터 시작하겠습니다. 이 튜토리얼의 범위를 벗어나는 것이므로 Sass 스타일과 함께 Jade 템플릿만 제공하겠습니다. 그것을 받아들이고 사용할 수도 있고, 자신만의 디자인을 생각해 낼 수도 있습니다.

제이드 파일:

으아아아

Sass 파일:

으아아아

참고: 여기서는 mixin 덕분에 대신 flex 和 transition 的 mixin。 Mixins 通过对某些 CSS 规则进行分组，可以更轻松地重用它们。每当我需要添加 display:flex 以及所有供应商前缀时，我都可以使用 +flex()라는 이름의 두 개를 만들었습니다.

이 튜토리얼의 나머지 부분에서는 이 구조를 사용하고 이를 기반으로 구축하겠습니다.

최종 결과는 다음과 같아야 합니다.

현재 코드 보기

햄버거 메뉴 아이콘

이제 간단하면서도 매력적인 햄버거 메뉴를 만들고 CSS를 통해 애니메이션을 적용할 차례입니다.

내부에 두 개의 하위 div를 만듭니다 #header 中添加一个新 div，并将其命名为 #hamburger。然后在 #hamburger. 공통 클래스와 개인 ID가 있어야 합니다.

으아아아

이제 일반 클래스를 사용하여 .strip 来设置父级 #hamburger div 및 하위 div의 스타일을 지정해야 합니다.

으아아아

우리는 정의대로 진행합니다 高度：100%，将 div 的高度设置为其父 div 的高度，即 #header. 또한 "클릭 가능한" 영역을 정의하는 이 상위 div의 너비 값을 설정합니다.

다음으로 앞서 만든 믹스인을 사용하여 모든 공급업체 접두사가 포함된 Flexbox를 추가합니다.

.strip div 垂直定位，因此我们设置 flex-direction: column ，然后使用 justify-content： space- Between 以便在 .strip div 사이에 공백을 추가하고 싶기 때문입니다.

그런 다음 해당 div에 하단 및 상단 패딩을 추가하여 이러한 div를 서로 밀어야 합니다.

으아아아

또한 오른쪽으로 더 이동된 padding-left: 20px 以便将 .strip div를 추가했습니다.

다음 단계는 스트립 스타일을 지정하는 것입니다. div의 크기와 색상을 정의하는 것은 비교적 간단합니다.

으아아아

햄버거 메뉴 아이콘의 최종 결과는 다음과 같아야 합니다.

다음 단계는 메뉴 아이콘을 클릭하면 십자 기호로 애니메이션되도록 메뉴 아이콘을 애니메이션화하는 것입니다.

햄버거 메뉴 아이콘 애니메이션

이 시점에서는 기본 jQuery를 사용하여 일부 CSS 클래스를 전환하겠습니다.

먼저 전환할 CSS 클래스를 만들어 보겠습니다.

CSS transform 属性以及 transition 속성의 번역 및 회전 설정을 활용하겠습니다.

먼저 특정 타이밍 매개변수가 있는 믹스인을 사용하여 #top 和 #bottom div에 전환을 추가합니다.

으아아아

이제 전환하려는 클래스의 스타일을 정의해야 합니다.

각 .strip div，因此我们需要为 #top 和 # 切换不同的类底部 div를 개별적으로 회전하고 번역합니다.

으아아아

여기서 .bottomRotate 和 .topRotate 的不同类的样式，它们将添加到各自的参考 div 中或从中删除，#top 和 #bottom라는 두 가지를 정의합니다.

애니메이션을 올바른 십자 기호로 변환하려면 .strip 类的不同大小将导致需要不同的 translateY 和 rotateZ 값을 참고하세요.

클래스 전환에 jQuery를 사용하세요

우리는 topRotate 和 bottomRotate 类存在时，每个 .strip div에 애니메이션을 적용하는 방법을 정의합니다. 그러나 이러한 클래스를 전환하기 위한 이벤트 리스너를 연결하지 않았습니다.

创建一个新的 JavaScript 文件，并使用以下代码将 topRotate 和 bottomRotate 类切换到带有 #top 和 #bottom 分别是 ID。

$(document).ready(function(){
  $("#hamburger").click(function(){
      $("#top").toggleClass("topRotate");
      $("#bottom").toggleClass("bottomRotate");
  });
})

我们将所有代码放入 $(document).ready(function(){}) 中，以便在采取任何操作之前等待整个页面加载。

当我们点击 #hamburger div 时，它将切换具有特定 ID 的 div 的类。

注意：不要忘记将 jQuery 源文件添加到您的项目中。

查看当前代码

创建菜单列表

下一步是创建一个包含列表项的菜单。

在 #header 下使用以下结构：

#dropDown
    #background
    ul
        li Home
        li Blog
        li Projects
        li Authors
        li Jobs
        li Contact

因此，我们在这里使用 ul 标签作为父标签，以便将 li 标签作为子标签的项目分组。此外，为了创建展开的背景动画，我们还添加了一个 ID 为 #background 的 div。

让我们首先设置 ul 和 li 元素的样式。

ul
  list-style: none
  padding: 0
  margin: 0

将 list-style 设置为 none，以便从 ul 元素中删除项目符号，并同时设置 padding 和 margin 为 0，以便删除所有预定义值。

现在设置 li 元素的样式：

li
    //display: none
    background-color: #9b9b9b
    color: #ffffff

    font-family: 'Quicksand', sans-serif
    font-weight: lighter
    font-size: 15px
    padding: 20px
    padding-left: 60px

    &:after
      position: absolute
      content: ''
      left: 60px
      width: 60%
      height: 1px
      bottom: 4px
      background: rgba(255, 255, 255, 0.25)

    &:last-child:after
      width: 0

这里我注释掉了 display:none 以便能够看到结果。但是，在制作动画时，我们最初将使用它来隐藏列表元素。

我还添加了 after 伪元素并相应地设置了样式，以便用直线分隔每个 li 元素。 :last-child:after 删除最后一个 li 元素的这一行。

查看当前代码

动画菜单列表

现在我们将使用一些 Sass 控制指令，以便向每个 li 元素添加具有不同属性的 CSS 关键帧动画。

@keyframes drop
  0%
    opacity: 0
    transform: scale(1.3)

  100%
    opacity: 1
    transform: scale(1)
    
@keyframes fold
  0%
    opacity: 1
    transform: scale(1)

  100%
    opacity: 0
    transform: scale(0.7)

在这里，我们定义了关键帧动画 drop 和 fold。

drop 用于动画打开菜单列表。初始缩放比例增加了 30%，随着透明度从 0 变为 1，它会缩小到原始大小。相反的操作发生在 fold 中。

p>

现在我们需要将这些关键帧附加到 li 元素。这部分就是 Sass 派上用场的地方。

@for $i from 1 through 6
  li:nth-child(#{$i})
    animation:
      name: fold
      duration: 80ms*(6-$i) + 1ms
      timing-function: ease-in-out
      fill-mode: forwards

  li.anim:nth-child(#{$i})
    animation:
      name: drop
      duration: 100ms*$i
      timing-function: ease-in-out
      fill-mode: forwards

这里我使用了一个从 1 到 6 的 for 循环，索引为 $i。

现在我们需要使用此索引将每个动画附加到具有不同持续时间的 li 元素。

首先，考虑 li.anim:nth-child(#{$i}) 行。

在这里，我们获取 li 元素的 $i 子元素，其类为 anim。

我们将切换此 anim 类。因此，当将其添加到 li 元素时，名称为 drop 的关键帧动画将采取行动。删除后，fold 动画将采取行动。

下一个重要的事情是 duration 属性。

持续时间：100ms*$i drop 动画会延长每个递增子编号的动画持续时间。因此，编译此代码时，第一个 li 子级将具有 duration: 100ms，最后一个子级将具有 duration: 600ms。

这会给人一种依次为每个元素添加动画的感觉。

我们对 fold 动画执行相同的操作。这次，最后一个元素的动画应该更快，因此 持续时间：80ms*(6-$i) + 1ms。持续时间增加 1ms 是因为当你将持续时间设置为 0 时，可能会出现一些问题，并且你的动画可能无法正常工作。

当我们设计 li 元素样式时，我提到我们需要使用 display:none 以避免意外的动画播放。如果您不将其设置为 none，您将看到 fold 动画在页面加载时播放一次。

如果我们将 display 属性设置为 none，我们将看不到该内容，然后我们需要显示 li 元素，然后切换 anim 类。

我们希望在单击汉堡包图标时播放动画。因此，让我们使用一些 jQuery 将每个 li 项的 display 属性设置为 block 并切换 anim 类.

$(document).ready(function(){
  $("#hamburger").click(function(){
      $("#top").toggleClass("topRotate");
      $("#bottom").toggleClass("bottomRotate");

      $("li").show();
      $("li").toggleClass("anim");

  });
})

查看当前代码

您会注意到，我们可以单独看到每个 li 元素的动画。然而，我们宁愿有一种扩展菜单的感觉。

为了解决这个问题，我们只需扩展 div 的高度即可。该 div 是 #background，我们最初是在创建 ul 和 li 元素时添加的。

#background
  width: 100%
  height: 0
  background-color: #9b9b9b
  position: absolute
  +transition(.45s)

  &.expand
    height: 550px

我们将切换 expand 类，以便将 height 属性设置为 550px 内的 .45s 。请注意，我使用 transition mixin 来定义具有特定时间参数的转换。

最终结果

结论

在本教程中，我们练习了如何通过 Jade 和 Sass 模板引擎在 HTML 和 CSS 中使用 for 循环。最重要的是，我们创建了 CSS 关键帧动画，并将它们与不同的持续时间属性附加到特定的 HTML 元素。然后我们使用 jQuery 切换类来控制这些动画。

위 내용은 모바일 친화적인 드롭다운 메뉴 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!