開發適合行動裝置的下拉式選單
- PHPz原創
- 2023-09-04 09:25:06815瀏覽
本教學將教您如何建立漢堡選單圖示並為其設定動畫，然後透過 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
帶有漢堡選單圖示的最終結果應如下所示：
下一步是為選單圖示設定動畫，這樣當單擊它時，它應該動畫成十字符號。
漢堡選單圖示動畫
此時，我們將使用基本的 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 值，以便將動畫轉換為正確的十字標誌。
使用 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中文網其他相關文章！