如何只使用CSS創(chuàng)建折疊標(biāo)題效果的示例代碼
我要評(píng)論折疊標(biāo)題是向用戶顯示重要信息的絕佳解決方案，例如特價(jià)優(yōu)惠和密鑰通知。許多開發(fā)人員在創(chuàng)建此類效果時(shí)依賴JavaScript，但是，使用純CSS創(chuàng)建更簡單的折疊頭效果也是完全可能的。
折疊標(biāo)題的工作方式類似于視差效果。折疊標(biāo)題的背景保持固定，以便當(dāng)用戶向下滾動(dòng)頁面時(shí)，其下方的內(nèi)容可以在其上方流動(dòng)。在本教程中，我們將向你展示如何創(chuàng)建以下折疊標(biāo)題效果：
該演示包括三個(gè)部分：
- 帶有黑色背景的固定標(biāo)題，位于頁面頂部，包含主菜單。
- 帶藍(lán)色背景的折疊標(biāo)題，包含有關(guān)特價(jià)的額外信息。
- 用戶滾動(dòng)到折疊標(biāo)題的白色背景的其余內(nèi)容。
折疊標(biāo)頭非常適合用戶體驗(yàn)。用戶可以在想要查看特殊信息時(shí)隨時(shí)滾動(dòng)頁面，但在閱讀其余內(nèi)容時(shí)不會(huì)分散他們的注意力。
現(xiàn)在，讓我們看看如何逐步創(chuàng)建折疊標(biāo)題。
1.創(chuàng)建HTML
HTML包括三個(gè)主要部分：
用于固定頂部菜單欄中，.banner為折疊頭，.article用于內(nèi)容的其余部分。以下是代碼的外觀：
<div class="container">
<header>
<nav>
<ul class="menu">
<li class="logo"><a href="#">Dev & Design</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="banner">
<div>
<h2 class="banner-title">Don't Miss Out On Our Next Webinar</h2>
<p class="banner-desc">Sign Up Now and Choose an Ebook for Free</p>
</div>
<button class="btn-signup" type="button" onclick="location.href='#'">
Go to Webinars »
</button>
</div>
<article class="article">
<p>...</p>
</article>
</div>
2.使用CSS添加基本樣式
讓我們通過定義一些重置和基本樣式來啟動(dòng)CSS，例如：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
color: #222;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
3.放置頂部菜單欄
要將固定菜單欄定位在頁面頂部，你需要將
元素的位置設(shè)置為fixed，將z-index設(shè)置為大于零的值。由于z-index默認(rèn)為auto，因此它只需要高于元素父級(jí)的z-index值。下面的CSS使用99，因?yàn)樗赡軙?huì)保持高于
元素的任何父級(jí)：
header {
height: 70px;
background: #222;
position: fixed;
width: 100%;
z-index: 99;
}
z-index: 99; 規(guī)則允許頂部菜單欄保持在所有元素的頂部，即使折疊標(biāo)題完全折疊并且其余內(nèi)容到達(dá)頁面頂部。
4.設(shè)置菜單樣式
雖然創(chuàng)建折疊標(biāo)題不需要以下CSS規(guī)則，但你可以使用頂部菜單設(shè)置樣式：
nav {
height: inherit;
}
.menu {
display: flex;
height: inherit;
align-items: center;
padding: 0 20px;
}
.menu li {
padding: 0 10px;
}
.menu a {
color: white;
}
.logo {
flex: 1;
font-size: 22px;
}
.nav和menu項(xiàng)繼承
（100％）的寬度，以便它們也可在整個(gè)屏幕上跨越。
此外，.menu還使用了flexbox，因此菜單項(xiàng)可以水平排成一行，而align-items屬性則垂直居中。
你還可以看到我們添加了flex：1; CSS規(guī)則到.logo元素。該flext屬性是一個(gè)flex-grow, flex-shrink, and flex-basis的簡寫。當(dāng)它只有一個(gè)值時(shí)，它指的是flex-grow，而其他兩個(gè)屬性保持默認(rèn)值。
當(dāng)flex-grow設(shè)置為1時(shí)，表示給定元素獲得Flex容器中的所有額外空間。因此，當(dāng)菜單項(xiàng)保持在右側(cè)時(shí)，menu元素被推到容器的左側(cè)。
5.放置折疊標(biāo)題
折疊標(biāo)題也具有固定位置，就像頂部菜單欄一樣。但是，它沒有獲得z-index值，因此當(dāng)用戶向下滾動(dòng)頁面并且其余內(nèi)容逐漸覆蓋橫幅時(shí)，它可以“折疊”。
.banner {
/* for positioning */
width: 100%;
height: 300px;
position: fixed;
top: 70px;
background: linear-gradient(45deg, #98cbff, #98ffcb);
/* for content alignment */
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
如你所見，我們再次使用flexbox來對(duì)齊折疊標(biāo)題內(nèi)的內(nèi)容?，F(xiàn)在，它是一個(gè)基于列的flex布局，允許你使用justify-content和align-items屬性輕松地垂直和水平對(duì)齊元素。
6.設(shè)置折疊標(biāo)題的樣式
雖然這不是折疊標(biāo)題效果的一部分，但這里是.banner元素的后代（標(biāo)題，描述和按鈕）在上面的演示中的樣式：
.banner-title {
font-size: 32px;
margin-bottom: 10px;
text-align: center;
}
.banner-desc {
font-size: 22px;
text-align: center;
}
.btn-signup {
color: white;
background-color: #0056ab;
border: 0;
padding: 15px 25px;
font-size: 16px;
cursor: pointer;
}
在下面的屏幕截圖中，你可以看到我們的演示在此刻的樣子。由于頂部菜單欄和折疊標(biāo)題都有固定位置，因此它們位于頁面頂部并覆蓋內(nèi)容的上半部分。我們將通過設(shè)置其余內(nèi)容的樣式，使標(biāo)題在下一步中可折疊。
7.設(shè)計(jì)其余內(nèi)容的樣式
要在滾動(dòng)時(shí)使標(biāo)題折疊，你需要做四件事：
- 最重要的是，你需要為其余內(nèi)容設(shè)置背景，以便它可以在可折疊標(biāo)頭的頂部流動(dòng)。請(qǐng)記住，此效果與視差效果類似; 不同的背景需要互相覆蓋。
- 在演示中，我們使用了純白色背景。你始終需要在流動(dòng)內(nèi)容上設(shè)置背景以使此效果起作用（否則折疊標(biāo)題不會(huì)折疊）。
- 相對(duì)于兩個(gè)固定元素定位內(nèi)容。top:370px; 下面的規(guī)則是 （70px）和.banner（300px）的高度之和。
- 將寬度設(shè)置為100％，以便內(nèi)容覆蓋整個(gè)標(biāo)題。
- 將高度設(shè)置為100％，以便背景覆蓋頁面的整個(gè)高度（這在移動(dòng)設(shè)備上或在較長頁面的情況下很重要）。
這是它在代碼中的樣子：
.article {
width: 100%;
position: relative;
top: 370px;
background: white;
height: 100%;
padding: 30px 10%;
}
.article p {
margin-bottom: 20px;
}
查看整個(gè)代碼
并且，折疊標(biāo)題已完成。下面，你可以查看整個(gè)CSS。你還可以查看本文中顯示的折疊標(biāo)題效果的實(shí)時(shí)演示。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
color: #222;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
header {
height: 70px;
background: #222;
position: fixed;
width: 100%;
z-index: 99;
}
nav {
height: inherit;
}
.menu {
display: flex;
height: inherit;
align-items: center;
padding: 0 20px;
}
.menu li {
padding: 0 10px;
}
.menu a {
color: white;
}
.logo {
flex: 1;
font-size: 22px;
}
.banner {
/* for positioning */
width: 100%;
height: 300px;
position: fixed;
top: 70px;
background: linear-gradient(45deg, #98cbff, #98ffcb);
/* for content alignment */
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.banner-title {
font-size: 32px;
margin-bottom: 10px;
text-align: center;
}
.banner-desc {
font-size: 22px;
text-align: center;
}
.btn-signup {
color: white;
background-color: #0056ab;
border: 0;
padding: 15px 25px;
font-size: 16px;
cursor: pointer;
}
.article {
width: 100%;
position: relative;
top: 370px;
background: white;
height: 100%;
padding: 30px 10%;
}
.article p {
margin-bottom: 20px;
}
結(jié)論
折疊標(biāo)題為你提供了一種用戶友好的方式，可以在頁面頂部顯示其他內(nèi)容。它們的工作方式類似于視差效應(yīng); 你需要讓不同的背景以不同的速度移動(dòng)，并將流動(dòng)的內(nèi)容相對(duì)于固定的元素定位。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-27
外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-30- 這篇文章主要介紹了純CSS實(shí)現(xiàn)可折疊樹狀菜單，不用js讓你體會(huì)到css的強(qiáng)大,需要的朋友可以參考下2018-04-17
- 這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)圓角折疊菜單的方法,通過多個(gè)寬度漸進(jìn)變化的頁面元素堆加模擬圓角效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-19
CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果
這篇文章主要介紹了CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-21
