Hey everyone, I'm currently working on building a unique right-hand side page slide effect that involves two different states. Initially, when you open the sliding panel, I want to display a menu. Then, when a menu item is selected, I want another box to expand and showcase more information.
It's a bit challenging to explain exactly what I have in mind as I haven't come across anything quite like it before. Essentially, I envision the first div opening from the right with 100% height and 200px width. When a link is clicked within that container, I'd like another div to extend to the left and enlarge the box even further. I hope this makes sense! If anyone knows where I can find similar examples or has JavaScript tips to achieve this effect, please share them. Here's what I've coded so far:
HTML:
<div id="enquirypost">
<div style="width:200px;">
<a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
<br />
<br />
Menu<br />
<a href="#" style="color:#fff; text-decoration:none;">Close</a>
</div>
<div id="extra">test</div>
</div>
<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>
CSS:
body{margin:0;}
#enquirypost {
height:100%;
overflow:hidden;
z-index:1000;
width:0px;
float:right;
background:#ccc;
font-size:20px;
line-height:65px;
position:absolute;
top:0px;
right:0px;
color:#FFF;
text-align:center;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;}
#enquirypost:target
{
bottom:0px;
overflow:auto;
min-width:200px;
height: 100%;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
#extra {
height:100%;
overflow:hidden;
z-index:1000;
width:0px;
float:right;
background:#000;
font-size:20px;
line-height:65px;
position:absolute;
top:0px;
right:0px;
color:#FFF;
text-align:center;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;}
#extra:target
{
bottom:0px;
overflow:auto;
min-width:400px;
height: 100%;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
Check out this jsfiddle for a preview.