Custom JQuery Slideout issues with width, etc.

Question

I'm more of an HTML/CSS guy than JQuery, and I've been struggling with building this concept for a while. I want to get it finished so that I can freely release it as a psuedo-plugin. I'm happy to credit anyone who can give me a little guidance, I think it's mostly there.

---

First, my demo is at http://demindu.com/sandbox/.

---

Issues:
1) I'm trying to get the height defined as a percentage or using window.innerHeight etc so that the Slideout uses as much space as possible. Currently, the height&width are defined in the CSS by px.

2) You'll notice that when you click one of the later tabs, and tab to the right of it appears as a link on the bottom of the page. This is because each link should entirely cover the tabs to the right of it. I've been unable to work this in, trying things like absolute positioning etc. and I'm just out of ideas.

---

I'm looking for guidance, not to have everything created for me. In these cases, I'm just not even sure where to start researching anymore.

To save some space:
JS: http://demindu.com/sandbox/js/slideout.js
CSS: http://demindu.com/sandbox/css/style.css
HTML: obviously could view in browser.

---

EDIT #1: I've got my height working correctly with some advice from Matt below. I'm unable to set my width of each content tab as a percentage however. I'm thinking I could set the width as something in px based off a computation of the innerWidth, but that seems a little hacky when my div should already be that wide. When I set to 100%, the tabs slide out beyond the width of the browser.

The other issue I'm still having is getting the tabs to the right of the selected tab disappear so they only appear in the submenu below. Any ideas? The basic thought it that each tab would slide out to the same place.

Answer 1

If you're using JQuery you should be able to toggle the display of the tabs after the selected tab. The bottom nav is float: left, I'd recommend changing that, and bringing the entire UL into the same div as the main nav ul, then you should be able to float it right and start getting the effect your looking for.

If you bring the bottom UL into the same div as the main UL, you could try setting that div's position to relative and absolutely positing the bottom UL to bottom:0. That way it will always be at the bottom of your wrapper div.

I think what you're trying to achieve is totally possible, and you're headed down the right path.

Just some idea's, hope that helps.