HTML5应用中accordion三种效果的探索-创新互联
HTML5应用中accordion三种效果的探索
创新互联是一家集网站建设,郁南企业网站建设,郁南品牌网站建设,网站定制,郁南网站建设报价,网络营销,网络优化,郁南网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。摘要:Accordion(手风琴,又名"抽屉")效果,因其收展样式形如手风琴而得名。通过层级关系,在信息展示和页面布局上,达到巧妙的平衡。因此,广泛运用于Web以及App交互设计中。在以往的项目中Accordion通常是由JavaScript编码实现。本次分享,着重探索两种不依靠JS,采用纯CSS3或HTML5来实现其效果。并对其优缺点作初步的对比。
传统JS实现方式
1、原生JavaScript
2、调用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;
});
复制代码缺点:效率低,成本高,行为和样式耦合紧密。
CSS3 伪类:target
target 是 CSS3 中新增的伪类之一。其能通过锚点,为目标元素添加指定的样式。因其页面中锚点的唯一性,能实现互斥的轮换效果。
示例代码1:h2一级目录/h2>
ul id="ac1">
li>二级菜单1/li>
li>二级菜单2/li>
li>二级菜单3/li>
/ul>
复制代码
ul{ display:none;}
ul:target{display:block;}
复制代码示例代码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>
复制代码
ul{ display:none;}
ul:target{display:block;}
复制代码示例代码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>
复制代码
ul{-webkit-transition:all ease 1s; }
div:target ul{height:400px;}
div:target span{-webkit-transform:rotate90deg);}
复制代码Css3 伪类:targetl 缺点:1、不具有二元性。2、过渡动画高度不可自动获取。
HTML5 标签 summary & details
summary & details是HTML5中两个新标签,除了具有很强的语义化之外,它还有令人惊喜的动态效果。因此,抓住这一特性,我们也能很容易的制作出轻量级的手风琴效果来。一般来讲,应该成对使用这两个标签。
示例代码1:details>
summary>一级目录/summary>
ul>
li>二级菜单/li>
li>二级菜单/li>
li>二级菜单/li>
/ul>
/details>
复制代码默认样式:可以给details添加open属性,使详情默认展开。 该标签目前仅webkit内核支持。
示例代码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>
复制代码说明:可以嵌套使用,形成三级活更多级别菜单。
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: "-";}
复制代码缺点:1、不具有互斥性。2、目前还不支持过渡动画效果。
小 结JS实现accordion效果,成本高,效率低,目前而言能实现最为丰富的效果。 CSS3实现accordion效果,成本低,效率高,虽可以实现丰富的动画效果,但不具有二元性。HTML5实现accordion效果,成本低,效率高,但缺乏动画效果,且不具有互斥性。目前支持的浏览器内核有限。
展 望 CSS3 和 HTML5 的引入和发展,某种程度上进一步推进结构,样式,行为三者分离的Web设计的理念。从而减小表现上对JS的依赖,降低网页制作的成本且提高网页运行的效率。 没有理由不期待css3和HTML5不断完善,假以时日能够提供更为强大的功能。
建 议
在含有内容较多的web app中,基于性能优先的原则,适当优雅降级,采用HTML5标签实现Accordion效果。至少Html5doctor作者是比较推崇 Wordpress 中采用的。
转载自:CUBE
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享名称:HTML5应用中accordion三种效果的探索-创新互联
当前URL:http://scyanting.com/article/cejosh.html