• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

为移动页面创建下拉菜单

ngkoma • 2年前 (2022-05-31) • JavaScript

本教程将教您如何创建一个汉堡菜单图标并为其设置动画，然后通过 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 )

萨斯文件：

=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注意：这里我创建了两个名为and 的mixin  transition。Mixin 通过对 CSS 规则进行分组，可以更轻松地重用它们。每当我需要添加 display:flex所有供应商前缀时，我都可以使用 +flex()，这要归功于 mixin。

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

最终结果应如下所示：

为移动页面创建下拉菜单 第1张

查看当前代码

汉堡菜单图标

现在是时候创建一个简单但有吸引力的汉堡菜单并通过 CSS 对其进行动画处理。

在里面添加一个新的 div #header并命名它 #hamburger。然后在里面创建两个子 div  #hamburger。它们应该有一个共同的类和单独的 ID。

#hamburger
    .strip#top
    .strip#bottom

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

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

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

我们 #header通过定义 height: 100%. 此外，我们为这个父 div 设置了一个宽度值，这将定义它的“可点击”区域。

接下来，我们使用我们之前创建的 mixins 添加带有所有供应商前缀的 flexbox。

由于我们希望我们的 .stripdiv 垂直放置，我们设置 flex-direction: column然后使用 justify-content: space-between以便在 .strip div 之间放置空间。

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

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

我们还添加 padding-left: 20px了以将 .stripdiv 进一步向右移动。

接下来是对条带进行样式设置。只需定义 div 的大小和颜色，这相对容易。

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

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

为移动页面创建下拉菜单 第2张

接下来是为菜单图标设置动画，以便在单击它时，它应该动画成十字符号。

动画汉堡菜单图标

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

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

我们将使用transformCSS 属性的 translate 和 rotate 设置以及 transition属性。

首先，通过使用具有特定时序参数的 mixin ，将转换添加到 the #top和 div 。#bottom

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

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

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

我们将单独旋转和平移每个 .stripdiv，因此我们需要为 div#top和 #bottomdiv 切换不同的类。

#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)

在这里，我们为两个名为 .bottomRotateand 的不同类定义了样式.topRotate，它们将被添加到它们各自的引用 div 中或从它们中删除，  #topand  #bottom。

请注意， .strip类的不同大小将导致需要不同的 translateY和 rotateZ值，以便动画成适当的十字符号。

使用 jQuery 切换类

我们定义了 当和 类存在时每个.stripdiv 将如何动画 。但是，我们还没有附加一个事件监听器来切换这些类。topRotatebottomRotate

创建一个新的javascript文件并使用以下代码将 topRotate和 bottomRotate类分别切换为 div #top和 #bottom ID。

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

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

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

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

查看当前代码

创建菜单列表

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

在 下使用以下结构 #header：

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

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

ul让我们先为and li元素设置样式 。

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

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

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.

现在我们需要将这些关键帧附加到 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})线路。

在这里，我们正在 使用 class of 获取元素的$i第 th 个子 元素。lianim

我们将切换这 anim门课。所以，当它被添加到 li元素中时，名称为 的关键帧动画 drop就会生效。当它被移除时， fold动画将采取行动。

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

duration: 100ms*$i因为 drop动画正在为每个递增的子编号延长动画的持续时间。因此，当编译这段代码时，第一个li 孩子将拥有 duration: 100ms，最后一个孩子将拥有 duration: 600ms。

这将给出一个接一个地为每个元素设置动画的感觉。

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

当我们为 li元素设置样式时，我提到我们需要使用 display:none它来避免播放不希望的动画。如果你不设置它 none，你会看到 fold页面加载时动画播放一次。

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

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

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

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

  });
})

查看当前代码

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

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

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

  &.expand
    height: 550px

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

最后结果 

结论

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


文章目录
  • 创建游乐场
  • 汉堡菜单图标
  • 动画汉堡菜单图标
    • 使用 jQuery 切换类
  • 创建菜单列表
  • 动画菜单列表
  • 结论
    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：为移动页面创建下拉菜单
    文章地址：https://www.weixiaolive.com/en/index.php/post/204.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云