I'm trying to get this panel menu to work. I've been working on it for hours without any success. I have it partially working. See fiddle here.
What I'm trying to do is:
When you click target 1, target 2, target 3 links. The div holding these links should slide out. Right now, it is only being covered and hidden by the next div that is sliding in. I would like it to slide out first to the left, and then have the next div slide in after.
After clicking one of the target links. Then when clicking "main menu" link, make the "target" box below (green, red, yellow boxes) slide out from right to left and have the "target menu" the one that loads initially, slide in from the left. Right now, I can't get that "main menu" link to do anything. It should show the initial target menu when clicked.
I know there is a lot of right and left stuff in there. But I wanted to be as specific as possible. I'm not really concerned about the direction of the slide. I am more concerned just to make it work first.
<div class="main-menu"><a target='_blank' href="#target0">Main Menu Link</a> </div> <div id="right" id="target0"> This is the Target Menu<br /> <a target='_blank' href="#target1" class="panel">Target 1</a><br/> <a target='_blank' href="#target2" class="panel">Target 2</a><br/> <a target='_blank' href="#target3" class="panel">Target 3</a><br/> <div class="panel" id="target1" style="background:green">Target 1</div> <div class="panel" id="target2" style="background:red">Target 2</div> <div class="panel" id="target3" style="background:yellow">Target 3</div> </div>