HTML5應(yīng)用中accordion三種效果的探索
成都創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司,自成立以來公司不斷探索創(chuàng)新,始終堅持為客戶提供滿意周到的服務(wù),在本地打下了良好的口碑,在過去的10年時間我們累計服務(wù)了上千家以及全國政企客戶,如成都柴油發(fā)電機(jī)等企業(yè)單位,完善的項目管理流程,嚴(yán)格把控項目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致夸獎。
摘要:Accordion(手風(fēng)琴,又名"抽屜")效果,因其收展樣式形如手風(fēng)琴而得名。通過層級關(guān)系,在信息展示和頁面布局上,達(dá)到巧妙的平衡。因此,廣泛運(yùn)用于Web以及App交互設(shè)計中。在以往的項目中Accordion通常是由JavaScript編碼實(shí)現(xiàn)。本次分享,著重探索兩種不依靠JS,采用純CSS3或HTML5來實(shí)現(xiàn)其效果。并對其優(yōu)缺點(diǎn)作初步的對比。
傳統(tǒng)JS實(shí)現(xiàn)方式
1、原生JavaScript
2、調(diào)用JS庫文件,jQuery、jQuery Mobile
$'.menu_lev1').clickfunction) {
var _this=$this),
_next=_this.next);
if _next.is':visible')) {
$'.menu_lev1').removeClass'on');
$'.menu_lev2').slideUp600);
_this.addClass'on');
_next.slideDown600);
} else {
_next.slideUp600);
_this.removeClass'on');
}
return true;
});
復(fù)制代碼缺點(diǎn):效率低,成本高,行為和樣式耦合緊密。
CSS3 偽類:target
target 是 CSS3 中新增的偽類之一。其能通過錨點(diǎn),為目標(biāo)元素添加指定的樣式。因其頁面中錨點(diǎn)的唯一性,能實(shí)現(xiàn)互斥的輪換效果。
示例代碼1:h2一級目錄/h2>
ul id="ac1">
li>二級菜單1/li>
li>二級菜單2/li>
li>二級菜單3/li>
/ul>
復(fù)制代碼
ul{ display:none;}
ul:target{display:block;}
復(fù)制代碼示例代碼2:c1">一級目錄/a>/h2>
ul id="ac1">
li>二級菜單1/li>
li>二級菜單2/li>
li>二級菜單3/li>
/ul>
h2>2">一級目錄/a>/h2>
ul id="ac2">
li>二級菜單1/li>
li>二級菜單2/li>
li>二級菜單3/li>
/ul>
h2>一級目錄/a>/h2>
ul id="ac3">
li>二級菜單1/li>
li>二級菜單2/li>
li>二級菜單3/li>
/ul>
復(fù)制代碼
ul{ display:none;}
ul:target{display:block;}
復(fù)制代碼示例代碼3:div id="ac1" >
h2>a >一級目錄/a>span>/span>/h2>
ul>
li>二級菜單1/li>
li>二級菜單2/li>
/ul>
/div>
div id="ac2" >
h2>a >一級目錄/a>span>/span>/h2>
ul>
li>二級菜單1/li>
li>二級菜單2/li>
/ul>
/div>
div id="ac3" >
h2>a 3">一級目錄/a>span>/span>/h2>
ul>
li>二級菜單1/li>
li>二級菜單2/li>
/ul>
/div>
復(fù)制代碼
ul{-webkit-transition:all ease 1s; }
div:target ul{height:400px;}
div:target span{-webkit-transform:rotate90deg);}
復(fù)制代碼Css3 偽類:targetl 缺點(diǎn):1、不具有二元性。2、過渡動畫高度不可自動獲取。
HTML5 標(biāo)簽 summary & details
summary & details是HTML5中兩個新標(biāo)簽,除了具有很強(qiáng)的語義化之外,它還有令人驚喜的動態(tài)效果。因此,抓住這一特性,我們也能很容易的制作出輕量級的手風(fēng)琴效果來。一般來講,應(yīng)該成對使用這兩個標(biāo)簽。
示例代碼1:details>
summary>一級目錄/summary>
ul>
li>二級菜單/li>
li>二級菜單/li>
li>二級菜單/li>
/ul>
/details>
復(fù)制代碼默認(rèn)樣式:可以給details添加open屬性,使詳情默認(rèn)展開。 該標(biāo)簽?zāi)壳皟Hwebkit內(nèi)核支持。
示例代碼2:details>
summary>一級目錄/summary>
ul>
li>二級菜單/li>
li>二級菜單/li>
li>二級菜單/li>
/ul>
details>
summary>二級菜單/summary>
ul>
li>三級菜單/li>
li>三級菜單/li>
li>三級菜單/li>
/ul>
/details>
/details>
復(fù)制代碼說明:可以嵌套使用,形成三級活更多級別菜單。
details summary::-webkit-details-marker {background: red;color: #fff;font-size: 200%;}
summary::-webkit-details-marker { display: none }
summary:after { content: "+";}
details[open] summary:after {content: "-";}
復(fù)制代碼缺點(diǎn):1、不具有互斥性。2、目前還不支持過渡動畫效果。
小 結(jié)JS實(shí)現(xiàn)accordion效果,成本高,效率低,目前而言能實(shí)現(xiàn)最為豐富的效果。 CSS3實(shí)現(xiàn)accordion效果,成本低,效率高,雖可以實(shí)現(xiàn)豐富的動畫效果,但不具有二元性。HTML5實(shí)現(xiàn)accordion效果,成本低,效率高,但缺乏動畫效果,且不具有互斥性。目前支持的瀏覽器內(nèi)核有限。
展 望 CSS3 和 HTML5 的引入和發(fā)展,某種程度上進(jìn)一步推進(jìn)結(jié)構(gòu),樣式,行為三者分離的Web設(shè)計的理念。從而減小表現(xiàn)上對JS的依賴,降低網(wǎng)頁制作的成本且提高網(wǎng)頁運(yùn)行的效率。 沒有理由不期待css3和HTML5不斷完善,假以時日能夠提供更為強(qiáng)大的功能。
建 議
在含有內(nèi)容較多的web app中,基于性能優(yōu)先的原則,適當(dāng)優(yōu)雅降級,采用HTML5標(biāo)簽實(shí)現(xiàn)Accordion效果。至少Html5doctor作者是比較推崇 Wordpress 中采用的。
轉(zhuǎn)載自:CUBE