Mon, 2012-02-13 16:58
Hello.
I'm a Junior Webdesigner who just found out he loves coding, specially CSS. I am doing a site right now where I intend to include a pure CSS Accordion Menu. However, I am not certain if what I want to do is...well, doable.
Here is the link to the website: http://lusotrade.com
You can see a horizontal accordion menu in the homepage. I intend to have this 5 section separation when a user visits the site. When one of the sections, the :target opens and shows the content. However, the other sections remain the same size and make the Accordion menu expand greatly. I wish that those sections would decrease their width whenever a section is :target.
I would say Javascript does the job but I only want CSS (if possible of course)
If I had to guess, I'd say CSS3 property transform can do the trick, but I've tried to understand how it works but I'm a bit confused. It's almost like an "If" you know? If a section is :target, the others decrease their width.
Here is the CSS styling for the Accordion Menu:
/*Define Accordion box*/ .accordion { width:960px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:0; } .accordion section{ float:left; overflow:hidden; color:#333; cursor:pointer; background: #333; margin:0; } .accordion section:hover { background:#444; } .accordion section p { display:none; } .accordion section:after{ position:relative; font-size:24px; color:#000; font-weight:bold; } .accordion section:nth-child(1):after{ content:'1'; } .accordion section:nth-child(2):after{ content:'2'; } .accordion section:nth-child(3):after{ content:'3'; } .accordion section:nth-child(4):after{ content:'4'; } .accordion section:nth-child(5):after{ content:'5'; } .accordion section:target { background: url("http://lusotrade.com/wp-content/uploads/2012/02/Untitled-1.jpg") repeat scroll 0 0 transparent; padding:0; } /*.accordion section:target:hover { background:#FFF; } */ .accordion section:target h2 { width:100%; } .accordion section:target h2 a{ color:#333; padding:0; } .accordion section:target p { display:block; } .accordion section /*h2*/ a{ /*padding:8px 10px; display:block; font-size:16px; font-weight:normal; color:#eee; text-decoration:none; */ display:block; width:100%; height:100%; padding:0; text-decoration:none; font-size:16px; font-weight:normal; color:#eee; } .horizontal section{ width:192px; height:250px; -moz-transition: width 0.3s ease-out; -webkit-transition:width 0.3s ease-out; -o-transition:width 0.3s ease-out; transition:width 0.3s ease-out; } .horizontal :target .horizontal section:after{ width:100px; height:250px; } /*Position the number of the slide*/ .horizontal section:after{ top:140px; left:15px; visibility:hidden; } /*Header of closed slide*/ .horizontal section h2 { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); width:240px; position:relative; left:50px; top:95px; text-align:right; } /*On mouse over open slide*/ .horizontal :target{ width:73%; height:250px; } .horizontal :target h2{ top:0px; left:0; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); text-align:left; } .accordion section:target a { color: #EEEEEE; display: block; font-size: 14px; font-weight: normal; height: 40%; padding: 10px; position: relative; text-decoration: none; top: 148px; width: 686px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.8); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)"; }
This is the HTML in case it helps:
<!-- CUSTOM CSS ACCORDION MENU --> <div class="accordion horizontal"> <section ID="agricultural"> <a href="#agricultural"> <h2>Agricultural</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p> </a> </section> <section id="energy"> <a href="#energy"> <h2>Energy</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p> </a> </section> <section id="industrial"> <a href="#industrial"> <h2>Industrial</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p> </a> </section> <section id="investment"> <a href="#investment"> <h2>Investment</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p> </a> </section> <section id="business_development"> <a href="#business_development"> <h2>Business Development</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p> </a> </section> </div> <!-- END CUSTOM CSS ACCORDION MENU -->
Can anyone help me out a give me some lights? Thank you.
