本教程将教您如何创建汉堡菜单图标并为其设置动画,然后通过 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。 Mixins 通过对某些 CSS 规则进行分组,可以更轻松地重用它们。每当我需要添加 display:flex
以及所有供应商前缀时,我都可以使用 +flex()
来代替,这要归功于 mixin。
我们将使用此结构并在本教程的其余部分中以它为基础进行构建。
最终结果应如下所示:
查看当前代码
现在是时候创建一个简单但有吸引力的汉堡菜单并通过 CSS 为其设置动画了。
在 #header
中添加一个新 div,并将其命名为 #hamburger
。然后在 #hamburger
中创建两个子 div。他们应该有一个共同的班级和个人 ID。
#hamburger .strip#top .strip#bottom
现在我们需要使用通用类 .strip
来设置父级 #hamburger
div 和子级 div 的样式。
#hamburger height: 100% width: 45 +flex() flex-direction: column justify-content: space-between padding-left: 20px
我们通过定义 高度:100%
,将 div 的高度设置为其父 div 的高度,即 #header
。另外,我们为此父 div 设置了一个宽度值,这将定义其“可点击”区域。
接下来,我们使用之前创建的 mixin 添加具有所有供应商前缀的 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
带有汉堡菜单图标的最终结果应如下所示:
下一步是为菜单图标设置动画,这样当单击它时,它应该动画成十字符号。< /p>
此时,我们将使用基本的 jQuery 来切换一些 CSS 类。
让我们首先创建要切换的 CSS 类。
我们将利用 CSS 的 transform
属性以及 transition
属性的平移和旋转设置。
首先,使用具有特定计时参数的 mixins 向 #top
和 #bottom
div 添加过渡。
#top margin-top: 17px +transition(.25s) #bottom margin-bottom: 17px +transition(.25s)
现在我们需要定义要切换的类的样式。
我们将分别轮换和翻译每个 .strip
div,因此我们需要为 #top
和 # 切换不同的类底部
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 中或从中删除,#top
和 #bottom
。
请注意,.strip
类的不同大小将导致需要不同的 translateY
和 rotateZ
值,以便将动画转换为正确的十字标志。
我们定义了当 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
。< /p>
这会给人一种依次为每个元素添加动画的感觉。
我们对 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中文网其他相关文章!