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

移动端下拉菜单

本教程将教您如何创建和设置汉堡菜单图标动画，然后通过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对其进行动画处理