モバイル対応のドロップダウン メニューを開発する

このチュートリアルでは、ハンバーガー メニュー アイコンを作成してアニメーション化し、jQuery 経由でイベント リスナーをアタッチしてドロップダウン メニューをトリガーする方法を説明します。

プレーンな HTML と CSS の代わりに、Jade (Pug) と Sass を使用します。したがって、これらのテンプレート エンジンについて少なくとも基本を理解している必要があります。

遊び場を作る

簡単なプレイグラウンドを実装することから始めます。このチュートリアルの範囲外であるため、Sass スタイルとともに Jade テンプレートのみを提供します。受け入れて使用することも、独自のデザインを考え出すこともできます。

ジェイドファイル:

リーリー

Sass ファイル:

リーリー

注: ここでは、flex と transition という名前の 2 つのミックスインを作成しました。ミックスインを使用すると、特定の CSS ルールをグループ化して再利用しやすくなります。 display:flex とすべてのベンダー プレフィックスを追加する必要がある場合は、ミックスインのおかげで、代わりに flex() を使用できます。

このチュートリアルの残りの部分では、この構造を使用し、その上に構築していきます。

最終結果は次のようになります:

現在のコードを表示

ハンバーガーメニューアイコン

次に、シンプルだが魅力的なハンバーガー メニューを作成し、CSS を使用してアニメーション化します。

#header 内に新しい div を追加し、#hamburger という名前を付けます。次に、#hamburger 内に 2 つの子 div を作成します。彼らは共通のクラス ID と個人 ID を持っている必要があります。

リーリー

次に、ジェネリック クラス .strip を使用して、親 #hamburger div と子 div のスタイルを設定する必要があります。

リーリー

Height: 100% を定義することで、div の高さをその親 div (#header) の高さに設定します。さらに、この親 div の幅の値を設定し、その「クリック可能な」領域を定義します。

次に、前に作成したミックスインを使用して、すべてのベンダー プレフィックスを含む Flexbox を追加します。

.strip div を垂直方向に配置したいので、flex-direction: column を設定し、justify-content: space-Between を使用します。 .strip で div の間にスペースを追加します。

次に、それぞれの div に下部と上部のパディングを追加して、これらの div を相互にプッシュする必要があります。

リーリー

また、padding-left: 20px を追加して、.strip div をさらに右に移動しました。

次のステップは、ストリップのスタイルを設定することです。 div のサイズと色を定義するのは比較的簡単です。

リーリー

ハンバーガー メニュー アイコンの最終結果は次のようになります:

次のステップでは、メニュー アイコンをアニメーション化して、クリックすると十字記号にアニメーションするようにします。

ハンバーガーメニューアイコンのアニメーション

この時点で、基本的な jQuery を使用して、いくつかの CSS クラスを切り替えます。

まず、切り替えたい CSS クラスを作成しましょう。

CSS の transform プロパティと transition プロパティの変換と回転の設定を利用します。

まず、特定のタイミング パラメーターを持つミックスインを使用して、#top および #bottom div にトランジションを追加します。

リーリー

次に、切り替えるクラスのスタイルを定義する必要があります。

各 .strip div を個別に回転および変換するため、#top および #bottom div に対して異なるクラスを切り替える必要があります。

リーリー

ここでは、.bottomRotate と .topRotate という名前の 2 つの異なるスタイル クラスを定義します。これらは、それぞれの参照 div に追加または削除されます。 #topそして#下。

.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 中国語 Web サイトの他の関連記事を参照してください。