Tutorial ini akan mengajar anda cara mencipta dan menghidupkan ikon menu hamburger, kemudian melampirkan pendengar acara melalui jQuery untuk mencetuskan menu lungsur.
Saya akan menggunakan Jade (Pug) dan Sass berbanding HTML dan CSS biasa. Jadi anda harus mempunyai sekurang-kurangnya pemahaman asas tentang enjin templat ini.
Kami akan mulakan dengan melaksanakan taman permainan yang mudah. Saya hanya akan menyediakan templat Jade bersama-sama dengan gaya Sass kerana ini di luar skop tutorial ini. Anda boleh menerimanya dan menggunakannya, atau menghasilkan reka bentuk anda sendiri.
Fail Jade:
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 )
Fail 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
Nota: Di sini saya telah mencipta dua campuran bernama flex
dan transition
. Mixin menjadikannya lebih mudah untuk menggunakan semula peraturan CSS tertentu dengan mengumpulkannya bersama-sama. Setiap kali saya perlu menambah display:flex
dengan semua awalan vendor, saya boleh menggunakan +flex()
sebaliknya, Ini adalah terima kasih kepada campuran. 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
#header
dan namakannya #hamburger
. Kemudian buat dua div anak di dalam #hamburger
. Mereka harus mempunyai kelas biasa dan ID peribadi. 🎜
$(document).ready(function(){ $("#hamburger").click(function(){ $("#top").toggleClass("topRotate"); $("#bottom").toggleClass("bottomRotate"); }); })
.strip
untuk menggayakan div #hamburger
induk dan div anak. 🎜
#dropDown #background ul li Home li Blog li Projects li Authors li Jobs li Contact
Ketinggian: 100%
, iaitu #header
. Selain itu, kami menetapkan nilai lebar untuk div induk ini, yang akan mentakrifkan kawasan "boleh diklik"nya. 🎜
🎜Seterusnya, kami menambah Flexbox dengan semua awalan vendor menggunakan campuran yang kami buat sebelum ini. 🎜
🎜Memandangkan kami mahu div .strip
diletakkan secara menegak, kami menetapkan flex-direction: column
dan kemudian menggunakan justify-content: space- Between
untuk menambah ruang antara .strip
divs. 🎜
🎜Kemudian kita perlu menolak div ini ke arah satu sama lain dengan menambahkan padding bawah dan atas pada div masing-masing. 🎜
ul list-style: none padding: 0 margin: 0
padding-left: 20px
untuk mengalihkan div .strip
ke kanan. 🎜
🎜Langkah seterusnya ialah menggayakan jalur. Ia agak mudah untuk hanya menentukan saiz dan warna div. 🎜
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
transform
CSS dan tetapan terjemahan dan penggiliran harta transition
. 🎜
🎜Mula-mula, tambahkan peralihan pada div #top
dan #bottom
menggunakan campuran dengan parameter pemasaan tertentu. 🎜
@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)
.strip
div secara individu, jadi kami perlu menyediakan #top
dan # Tukar bahagian bawah kelas
yang berbeza. 🎜
@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
.bottomRotate
dan .topRotate
yang akan ditambahkan pada In atau out of masing-masing div rujukan, #top
dan #bottom
. 🎜
🎜Sila ambil perhatian bahawa saiz kelas .strip
yang berbeza akan menyebabkan keperluan untuk translateY
dan rotateZ
supaya animasi bertukar kepada tanda pangkah yang betul. 🎜
topRotate
dan bottomRotate
wujud, setiap kod .strip</ > kaedah animasi div. Walau bagaimanapun, kami tidak melampirkan pendengar acara untuk menogol kelas ini. 🎜
<p>创建一个新的 JavaScript 文件,并使用以下代码将 <code class="inline">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 切换类来控制这些动画。
Atas ialah kandungan terperinci Bangunkan menu lungsur yang mesra mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!