Entwickeln Sie mobilfreundliche Dropdown-Menüs

In diesem Tutorial erfahren Sie, wie Sie ein Hamburger-Menüsymbol erstellen und animieren und dann über jQuery einen Ereignis-Listener anhängen, um das Dropdown-Menü auszulösen.

Ich werde Jade (Pug) und Sass anstelle von normalem HTML und CSS verwenden. Daher sollten Sie zumindest über grundlegende Kenntnisse dieser Template-Engines verfügen.

Erstellen Sie einen Spielplatz

Wir beginnen mit der Implementierung eines einfachen Spielplatzes. Ich werde nur die Jade-Vorlage zusammen mit den Sass-Stilen bereitstellen, da dies den Rahmen dieses Tutorials sprengt. Sie können es annehmen und verwenden oder Ihr eigenes Design entwickeln.

Jade-Datei:

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-Dateien:

=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

Hinweis: Hier habe ich dank des Mixins stattdessen zwei mit dem Namen flex 和 transition 的 mixin。 Mixins 通过对某些 CSS 规则进行分组，可以更轻松地重用它们。每当我需要添加 display:flex 以及所有供应商前缀时，我都可以使用 +flex() erstellt.

Wir werden diese Struktur für den Rest dieses Tutorials verwenden und darauf aufbauen.

Das Endergebnis sollte so aussehen:

Aktuellen Code anzeigen

Hamburger-Menüsymbol

Jetzt ist es an der Zeit, ein einfaches, aber attraktives Hamburger-Menü zu erstellen und es per CSS zu animieren.

Erstellen Sie zwei untergeordnete Divs im Inneren #header 中添加一个新 div，并将其命名为 #hamburger。然后在 #hamburger. Sie sollten eine gemeinsame Klasse und persönliche ID haben.

#hamburger
    .strip#top
    .strip#bottom

Jetzt müssen wir die generische Klasse .strip 来设置父级 #hamburger verwenden, um die Div- und Child-Divs zu formatieren.

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

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

Wir gehen per Definition vor 高度：100%，将 div 的高度设置为其父 div 的高度，即 #header. Zusätzlich legen wir einen Breitenwert für dieses übergeordnete Div fest, der seinen „anklickbaren“ Bereich definiert.

Als nächstes fügen wir Flexbox mit allen Herstellerpräfixen hinzu, indem wir das Mixin verwenden, das wir zuvor erstellt haben.

Da wir Leerzeichen zwischen .strip div 垂直定位，因此我们设置 flex-direction: column ，然后使用 justify-content： space- Between 以便在 .strip Divs hinzufügen möchten.

Dann müssen wir diese Divs zueinander bewegen, indem wir den jeweiligen Divs eine untere und obere Polsterung hinzufügen.

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

Wir haben auch ein padding-left: 20px 以便将 .strip Div hinzugefügt, das weiter nach rechts verschoben wurde.

Der nächste Schritt besteht darin, die Streifen zu stylen. Es ist relativ einfach, nur die Größe und Farbe des Div zu definieren.

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

Das Endergebnis mit dem Hamburger-Menüsymbol sollte so aussehen:

Der nächste Schritt besteht darin, das Menüsymbol so zu animieren, dass es sich beim Klicken in ein Kreuzsymbol verwandelt.

Animation des Hamburger-Menüsymbols

An dieser Stelle verwenden wir einfaches jQuery, um einige CSS-Klassen umzuschalten.

Erstellen wir zunächst die CSS-Klasse, die wir umschalten möchten.

Wir werden die Übersetzungs- und Rotationseinstellungen der CSS-Eigenschaft transform 属性以及 transition verwenden.

Fügen Sie zunächst einen Übergang zum #top 和 #bottom-Div hinzu, indem Sie Mixins mit bestimmten Timing-Parametern verwenden.

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

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

Jetzt müssen wir den Stil der Klasse definieren, die wir wechseln möchten.

Wir werden jeden .strip div，因此我们需要为 #top 和 # 切换不同的类底部 Abschnitt einzeln rotieren und übersetzen.

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

Hier definieren wir zwei benannte .bottomRotate 和 .topRotate 的不同类的样式，它们将添加到各自的参考 div 中或从中删除，#top 和 #bottom.

Bitte beachten Sie den .strip 类的不同大小将导致需要不同的 translateY 和 rotateZ-Wert, um die Animation in das richtige Kreuzzeichen umzuwandeln.

Verwenden Sie jQuery für den Klassenwechsel

Wir definieren, wie das topRotate 和 bottomRotate 类存在时，每个 .strip Div animiert werden soll. Wir haben jedoch keinen Ereignis-Listener angehängt, um diese Klassen umzuschalten.

创建一个新的 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 切换类来控制这些动画。

Das obige ist der detaillierte Inhalt vonEntwickeln Sie mobilfreundliche Dropdown-Menüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!