No replies
th3d4v1d
th3d4v1d's picture
Offline
newbie
Last seen: 2 years 23 weeks ago
Joined: 2012-02-13
Posts: 1
Points: 2

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.