Need help removing whitespace at bottom of page with drawer-style menu!

[flashead]

Hi guys,

I’m using the ‘Top Drawer’ menu slider as used in this example (http://www.jordanm.co.uk/lab/topdrawer).

It’s a great tutorial and works perfectly but is there a way to remove the gap below the footer of the page?

I understand this is to allow space for when the menu is open but it would be perfect if the height of the page could auto-resize depending on whether the draw is open or not…?

Thank you very much and I hope to hear from you!

SM

[PaulOB]

Hi,

The problem with that approach is that the menu is moved upwards using translate which moves the element but doesn’t change the flow of the document. This means that the page still thinks the element is where it was and thus you get a gap at the bottom (much like moving it upwards with relative positioning).

If instead you used a negative top margin instead of transform then there would be no gap at the bottom of the page but of course translate provides smoother and quicker animations than other properties (although I’m sure most people won’t notice).

The other thing I dislike about the menu is that it uses magic numbers which means that the amount you need to move has to be set in stone to match the height of the menu. Should you add or remove items from the menu then you have to change your magic numbers. Indeed if I simply change my text size in the browser the whole thing fails.

[flashead]

Hi Paul,

Thank you very much for the informative response, that’s great - and I totally understand and agree with what you’re saying!

I tried adding a negative margin and removed the transform but of course it didn’t work! How would I go about doing that properly and would the menu still animate, just not have as smoother animation…?

Thank you again!

SM

[PaulOB]

You would need to make these changes.

.drawer {
    margin:-131px 0 0;
    -moz-transition:margin 0.25s linear;
    -webkit-transition:margin 0.25s linear;
    transition:margin 0.25s linear;
}
.drawer.active {
    margin:129px 0 0 0;
}

Whilst removing the original transform properties. It will still animate but won’t be as smooth as the 3d translate option although you may not notice the difference depending on browser.

Shout if that doesn’t make sense and I’ll make a full demo.

[PaulOB]

In the original demo you could fix it for Firefox and Chrome with a bottom negative margin equal to the translate value.

The drawer would need to be floated for this to work and the only code that needs to be added is this:

.drawer{
    float:left;
    width:100%;
 margin:0 0 -131px;/* match translate negative value*/    
}

It doesn’t work in IE though.

[flashead]

Hi Paul!

That is fantastic - works a treat, thank you so much for all your help and valuable advice!

You’re a star, thank you again!