开发适合移动设备的下拉菜单

本教程将教您如何创建汉堡菜单图标并为其设置动画，然后通过 jQuery 附加事件侦听器以触发下拉菜单。

我将使用 Jade (Pug) 和 Sass 而不是普通的 HTML 和 CSS。所以您至少应该对这些模板引擎有基本的了解。

创建游乐场

我们将从实现一个简单的游乐场开始。我只会提供 Jade 模板以及 Sass 样式，因为这不是本教程的范围。您可以接受并使用它，也可以提出自己的设计。

玉文件：

body
    #container
        #header
        #body
            .content
                .left
                .right
                    - for (i=1; i <= 5 ; i++ )
                        div( id="text" + i )
            .content
                .left
                .right
                    - for (j=6; j <= 10 ; j++ )
                        div( id="text" + j )
            .content
                .left
                .right
                    - for (k=11; k <= 15 ; k++ )
                        div( id="text" + k )

Sass 文件：

=flex()
  display: -webkit-box
  display: -moz-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex
  
=transition($time)
  -webkit-transition: all $time ease
  -moz-transition: all $time ease
  -ms-transition: all $time ease
  -o-transition: all $time ease
  transition: all $time ease

html, body
  margin: 0
  padding: 20px 0
  +flex()
  justify-content: center

//----------------------------------//

#container
  width: 320px
  height: 550px
  background-color: #ebebeb
  overflow: hidden

#header
  height: 45px
  background-color: #9b9b9b
  position: relative


#body
  padding: 0 20px
  padding-top: 40px
  +flex()

  flex-direction: column
  justify-content: flex-start

.content
  +flex()

  flex-direction: row
  justify-content: flex-start
  margin-bottom: 25px


  .left
    width: 100px
    height: 100px
    margin-right: 15px
    background-color: #e1e1e1

  .right
    @for $i from 1 through 15
      #text#{$i}
        margin-top: 10px
        width: 50 + random(100) + px
        height: 10px
        background-color: #e1e1e1

注意：这里我创建了两个名为 flex 和 transition 的 mixin。 Mixins 通过对某些 CSS 规则进行分组，可以更轻松地重用它们。每当我需要添加 display:flex 以及所有供应商前缀时，我都可以使用 +flex() 来代替，这要归功于 mixin。

我们将使用此结构并在本教程的其余部分中以它为基础进行构建。

最终结果应如下所示：

查看当前代码

汉堡菜单图标

现在是时候创建一个简单但有吸引力的汉堡菜单并通过 CSS 为其设置动画了。

在 #header 中添加一个新 div，并将其命名为 #hamburger。然后在 #hamburger 中创建两个子 div。他们应该有一个共同的班级和个人 ID。

#hamburger
    .strip#top
    .strip#bottom

现在我们需要使用通用类 .strip 来设置父级 #hamburger div 和子级 div 的样式。

#hamburger
  height: 100%
  width: 45
  +flex()

  flex-direction: column
  justify-content: space-between
  padding-left: 20px

我们通过定义 高度：100%，将 div 的高度设置为其父 div 的高度，即 #header。另外，我们为此父 div 设置了一个宽度值，这将定义其“可点击”区域。

接下来，我们使用之前创建的 mixin 添加具有所有供应商前缀的 Flexbox。

由于我们希望 .strip div 垂直定位，因此我们设置 flex-direction: column ，然后使用 justify-content： space- Between 以便在 .strip div 之间添加空格。

然后我们需要通过向各自的 div 添加底部和顶部填充来将这些 div 相互推向。

#top
  margin-top: 17px
  
#bottom
  margin-bottom: 17px

我们还添加了 padding-left: 20px 以便将 .strip div 进一步移至右侧。

下一步是设置条带的样式。只需定义 div 的大小和颜色即可相对简单。

.strip
  width: 25px
  height: 2px
  background-color: #ffffff

带有汉堡菜单图标的最终结果应如下所示：

下一步是为菜单图标设置动画，这样当单击它时，它应该动画成十字符号。

汉堡菜单图标动画

此时，我们将使用基本的 jQuery 来切换一些 CSS 类。

让我们首先创建要切换的 CSS 类。

我们将利用 CSS 的 transform 属性以及 transition 属性的平移和旋转设置。

首先，使用具有特定计时参数的 mixins 向 #top 和 #bottom div 添加过渡。

#top
  margin-top: 17px
  +transition(.25s)

#bottom
  margin-bottom: 17px
  +transition(.25s)

现在我们需要定义要切换的类的样式。

我们将分别轮换和翻译每个 .strip div，因此我们需要为 #top 和 # 切换不同的类底部 div。

#top
  margin-top: 17px
  +transition(.25s)

  &.topRotate
    transform-origin: center
    transform: translateY(4px) rotateZ(45deg)

#bottom
  margin-bottom: 17px
  +transition(.25s)

  &.bottomRotate
    transform-origin: center
    transform: translateY(-5px) rotateZ(-45deg)

在这里，我们定义了两个名为 .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中文网其他相关文章！