It is a simple horizontal accordion built in CSS3 and HTML. Copy CSS3 code and paste it between style tag.
CSS
body, button, input, select, textarea { font-family: sans-serif;}
/*Define Accordion box*/
.accordion { width:830px; overflow:hidden; margin:0px auto; color:#fff; background:#212121; padding:0px; }
/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#FFF; padding:10px;}
.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 15px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }
/*set style of closed slide*/
.accordion section{ float:left; overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
.accordion section:hover {background:#444;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
/*End General Accordion****************************************************************************/
/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
-ms-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}
/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}
/*Header of closed slide*/
.horizontal section h2 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width:240px; position:relative; left:-100px; top:85px;
}
/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:-15px;left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
/*End Horizontal Accordion *********************************************************************/
HTML
<html>
<head>
<style>
//Paste above CSS3 code here.
</style>
</head>
<body>
<div class="accordion horizontal">
<section id="about">
<h2><a href="#about">About Us</a></h2>
<p>Evon Technotogies</p><p>(Spearheadind Innovation)</p>
</section>
<section id="services">
<h2><a href="#services">Services</a></h2>
<p>Evon Technotogies</p><p>(Spearheadind Innovation)</p>
</section>
<section id="blog">
<h2><a href="#blog">Blog</a></h2>
<p>Evon Technotogies</p><p>(Spearheadind Innovation)</p>
</section>
<section id="portfolio">
<h2><a href="#portfolio">Portfolio</a></h2>
<p>Evon Technotogies</p><p>(Spearheadind Innovation) </p>
</section>
<section id="contact">
<h2><a href="#contact">Contact</a></h2>
<p>Evon Technotogies</p><p>(Spearheadind Innovation)</p>
</section>
</div>
</body>
</html>
0 Comment(s)