Pure CSS3 Accordion
纯CSS3手风琴
Today I’ll tell you about another one great thing that you can implement with CSS3 – it’s an accordion. I think that accordion is still pretty popular in web. This is nice and compact way to keep some information at page. Of course, we always can use javascript (jQuery) plugins in order to set accordion, but sometimes this is not so necessary. We can use only CSS3 to achieve the same effect, today I will tell you exactly how this can be done.
今天，我将告诉您有关CSS3可以实现的另一项伟大的事情–它是手风琴。 我认为手风琴在网络上仍然很流行。 这是一种在页面上保留一些信息的好方法。 当然，我们总是可以使用javascript(jQuery)插件来设置手风琴，但是有时并不是必须的。 我们只能使用CSS3来达到相同的效果，今天我将确切地告诉您如何实现。
Here are samples and downloadable package:
以下是示例和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML标记 (Step 1. HTML Markup)
Here are html source code of our demo:
这是我们的演示的html源代码：
index.html (index.html)
<div class="accordion">
<span id="tab1"></span>
<span id="tab2"></span>
<span id="tab3"></span>
<span id="tab4"></span>
<div class="tabs">
<dl class="tab1">
<dd>
<a href="#tab1">Tab #1</a>
<div><p>Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.</p></div>
</dd>
</dl>
<dl class="tab2">
<dd>
<a href="#tab2">Tab #2</a>
<div>
<p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/8o_uw_zwdEs" frameborder="0" allowfullscreen></iframe>
</p>
</div>
</dd>
</dl>
<dl class="tab3">
<dd>
<a href="#tab3">Tab #3</a>
<div><p>CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.</p></div>
</dd>
</dl>
<dl class="tab4">
<dd>
<a href="#tab4">Tab #4</a>
<div><p><img src="images/icons.jpg" alt="" /></p></div>
</dd>
</dl>
</div>
</div>
<div class="accordion">
<span id="tab1"></span>
<span id="tab2"></span>
<span id="tab3"></span>
<span id="tab4"></span>
<div class="tabs">
<dl class="tab1">
<dd>
<a href="#tab1">Tab #1</a>
<div><p>Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.</p></div>
</dd>
</dl>
<dl class="tab2">
<dd>
<a href="#tab2">Tab #2</a>
<div>
<p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/8o_uw_zwdEs" frameborder="0" allowfullscreen></iframe>
</p>
</div>
</dd>
</dl>
<dl class="tab3">
<dd>
<a href="#tab3">Tab #3</a>
<div><p>CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.</p></div>
</dd>
</dl>
<dl class="tab4">
<dd>
<a href="#tab4">Tab #4</a>
<div><p><img src="images/icons.jpg" alt="" /></p></div>
</dd>
</dl>
</div>
</div>
We will use list of hidden span objects, and list of custom tabs, where you can put everything you want (any custom html content). Every tab have own ID (in order to slide).
我们将使用隐藏的span对象列表和自定义选项卡列表，您可以在其中放置所需的所有内容(任何自定义html内容)。 每个标签都有自己的ID(以进行滑动)。
步骤2. CSS (Step 2. CSS)
Here are the CSS styles of our accordion:
以下是我们的手风琴CSS样式：
css / accordion.css (css/accordion.css)
.accordion {
color: #000000;
margin: 50px auto;
position: relative;
width: 590px;
}
.accordion span {
display: none
}
.tabs {
background-color: #FFFFFF;
overflow: hidden;
}
.tabs dl dd a {
background-color: #C8CEFF;
border: 1px solid;
border-color:#ccc;border-bottom-color:#aaa;
display: block;
font-size: 18px;
line-height: 32px;
padding: 5px 20px;
text-decoration: none;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.tabs dl dd div {
background-color: #FFF;
height: 0;
overflow: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tabs dl dd div p {
color: #444444;
font-size: 13px;
padding: 15px;
text-align: justify;
}
.tabs dl dd a:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.tabs dl dd a:active {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
#tab1:target ~ .tabs .tab1 dd div {
height: 100px;
}
#tab2:target ~ .tabs .tab2 dd div {
height: 345px;
}
#tab3:target ~ .tabs .tab3 dd div {
height: 235px;
}
#tab4:target ~ .tabs .tab4 dd div {
height: 235px;
}
#tab1:target ~ .tabs .tab1 dd a,
#tab2:target ~ .tabs .tab2 dd a,
#tab3:target ~ .tabs .tab3 dd a,
#tab4:target ~ .tabs .tab4 dd a {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.accordion {
color: #000000;
margin: 50px auto;
position: relative;
width: 590px;
}
.accordion span {
display: none
}
.tabs {
background-color: #FFFFFF;
overflow: hidden;
}
.tabs dl dd a {
background-color: #C8CEFF;
border: 1px solid;
border-color:#ccc;border-bottom-color:#aaa;
display: block;
font-size: 18px;
line-height: 32px;
padding: 5px 20px;
text-decoration: none;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.tabs dl dd div {
background-color: #FFF;
height: 0;
overflow: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tabs dl dd div p {
color: #444444;
font-size: 13px;
padding: 15px;
text-align: justify;
}
.tabs dl dd a:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.tabs dl dd a:active {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
#tab1:target ~ .tabs .tab1 dd div {
height: 100px;
}
#tab2:target ~ .tabs .tab2 dd div {
height: 345px;
}
#tab3:target ~ .tabs .tab3 dd div {
height: 235px;
}
#tab4:target ~ .tabs .tab4 dd div {
height: 235px;
}
#tab1:target ~ .tabs .tab1 dd a,
#tab2:target ~ .tabs .tab2 dd a,
#tab3:target ~ .tabs .tab3 dd a,
#tab4:target ~ .tabs .tab4 dd a {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
How to slide – pretty easy: I have added transition for the height of our tabs.
如何滑动–非常简单：我为标签的高度添加了过渡功能。
现场演示
结论 (Conclusion)
Thats all. Looks great, isn’t it? If you have got any good ideas you would like to share, be sure to drop those in the comments as well. Good luck!
就这样。 看起来不错，不是吗？ 如果您有任何想分享的好主意，请确保也将其删除。 祝好运！
1489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
