移动端下拉菜单_为移动页面创建下拉菜单

最新推荐文章于 2025-11-26 01:34:24 发布

翻译最新推荐文章于 2025-11-26 01:34:24 发布 · 2.2k 阅读

标签

#html #css #javascript #js #java

本教程详细介绍了如何使用HTML、CSS和jQuery创建适用于移动页面的下拉菜单，包括汉堡菜单图标动画、菜单列表的动画效果，以及如何通过jQuery切换类来控制动画。

移动端下拉菜单

本教程将教您如何创建和设置汉堡菜单图标动画，然后通过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。混合使分组CSS规则更容易。每当需要添加带有所有供应商前缀的display:flex时，由于使用了mixin，我只能使用+flex()代替。

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

最终结果应如下所示：

查看当前代码

汉堡菜单图标

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

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

#hamburger
    .strip#top
    .strip#bottom

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

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

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

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

接下来，我们使用之前创建的mixins添加带有所有供应商前缀的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属性的translate和rotation设置以及transition属性。

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

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

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

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

我们将分别旋转和转换每个.strip div，因此我们需要为#top和#bottom 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中或从它们的参考div中移除，分别是#top和#bottom 。

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

用jQuery切换类

我们定义了当存在topRotate和bottomRotate类时，每个.strip div如何进行动画处理。但是，我们尚未附加事件侦听器来切换这些类。

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

$(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 。

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

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

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

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

在这里，我们使用anim类来获取li元素的第$i个子元素。

我们将切换这个anim课。因此，当将其添加到li元素中时，名称为drop的关键帧动画将起作用。删除后， fold动画将起作用。

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

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

这将给每个元素一个接一个的动画效果。

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

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

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

当我们单击汉堡包图标时，我们希望播放动画。因此，让我们使用一些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混合来定义具有特定时间参数的过渡。

最后结果

结论

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

翻译自: https://code.tutsplus.com/tutorials/creating-a-drop-down-menu-for-mobile-pages--cms-25394

移动端下拉菜单