HTML
<div class="accordion horizontal"><p> How to Create Accordion with CSS3 </ p><section id="1"><h2> <a href="#1"> <img src="/link the anh" width="580" height="220"> </ a> </ h2>
Note <span> images </ span></ Section><section id="2"><h2> <a href="#2"> <img src="/link the anh" width="580" height="220"> </ a> </ h2>
Note <span> images </ span></ Section>
</ Div>
In this tutorial, Webmaster Sun will create five sections, corresponding to 5 photos. Each <section> we declare an id to coincide with <a href="/"> effects can operateCSSFirst, we attribute format Accordion
. Accordion {width: 775px;overflow: hidden;margin: 50px auto;padding: 10px;color: # 474747;background: # 3a3a3a;}
. Accordion p {text-align: center;margin: 10px auto;font-size: 25px;font-weight: 700;color: # e7e7e7;text-shadow: 0px 1px 1px # 333;}
Accordion default when the page loads in a collapsed state.
. Accordion section {float: right;overflow: hidden;color: # 333;cursor: pointer;background: # 333;margin: 0px 5px;padding: 0px;}When Accordion open
. Accordion section: target {background: # FFF;height: 100%;width: 580px;padding: 0px;margin: 0px;-Webkit-border-bottom-right-radius: 5px;-Webkit-border-bottom-left-radius: 5px;-Moz-border-radius-bottomright: 5px;-Moz-border-radius-BottomLeft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}We have completed the Accordion format. Now to the horizontal format for Accordion.
. Accordion section: target h2 {width: 580px;margin: 0px;}
. Accordion section: target h2 a {color: # 333;padding: 0px;}
. Accordion section: target span {display: block;font-size: 17px;text-align: center;padding: 5px;}
. Horizontal section {width: 5%;height: 255px;-Moz-transition: width 0.2s ease-out;-Webkit-transition: width 0.2s ease-out;Finally, in order for the backwards IE9 can work, then we add the js, located in <head>.
-O-transition: width 0.2s ease-out;-Ms-transition: width 0.2s ease-out;transition: width 0.2s ease-out;}
. Horizontal section h2 {/ * closing the accordion effect * /-Webkit-transform: rotate (90deg);-Moz-transform: rotate (90deg);-O-transform: rotate (90deg);-Ms-transform: rotate (90deg);transform: rotate (90deg);width: 255px; position: relative; left:-80px; top:-20px;}
. Horizontal: target {/ * Accordion effect when open * /
width: 73%; height: 100%;}
. Horizontal: target h2 {top: 0px; left: 0;-Webkit-transform: rotate (0deg);-Moz-transform: rotate (0deg);-O-transform: rotate (0deg);-Ms-transform: rotate (0deg);transform: rotate (0deg);}
<! - [If lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"> </ script><! [Endif] ->
No comments:
Post a Comment