App like side-slide menu, fixed/absolute positioning problems inside parent div

[NessunaLuce]

Hi guys I thought about how best to explain this (as my English is far from perfect :) so I made a tiny sample which you can see here –link.

If you click the “Side menu” button/image you will see a blue box slide into the main div from the right, that is my menu. This is exactly how I want it to look – except I DONT want the thing to scroll with the page, which it does cause its an absolute, making it a fixed div will throw it all the way to the end of the right side of the browser window which I also don’t want…

I have tried everything I can think like adding fixed div within the side menu div which theoretically works except it then completely ignores the overflow:hidden of its parent – as you can see here – link.

I don’t care if the solution is pure CSS or some scripting is needed but I would like to keep the solution as simple and as cross-browser/device(platform) friendly as possible.
I hope I have explained this well enough for you to help me out and that you are able to as this is driving me insane!

Thanks in advance NessunaLuce

[Paulie_D]

Can you please put your HTML/CSS in Codepen so we can examine the code for us to be able to help you further.

[NessunaLuce]

For some reason I don’t seem able to edit my original post…

Anyways, here’s a link to a CodePen demo…

[Paulie_D]

OK…if the right menu isn’t to scroll it will have to be position:fixed.

So you will have to adjust the right value.

I’ve used

#rightmenu {
  right: calc(50% - 521px); /* 50% less [300 (half of content width) + 221px (menu width)]
}

My JS skill are terrible but all you would have to do is adjust the “negative” value to get it into position.

http://codepen.io/Paulie-D/pen/nEiog

However, please note that because the position is now fixed, your overflow hidden will not affect it and you will have to find an alternative visibility solution.

Of course, others may have more elegant solutions.

[NessunaLuce]

Pretty much the same I have done in the second link with pure CSS, unfortunately it also ignores the parents overflow:hidden…

CodePen link

But thanks for the reply :)

[jaimebarriga]

Hey,

This might not be the best solution but take a look:

http://codepen.io/barrigaj/pen/cgivK

What I basically did was add another fixed div with a higher z-index to sit on top of the red div, but with the same background color as the page (in this case white). That way it looks like part of the page and hides the menu.

[NessunaLuce]

@jaimebarriga
I thought about doing that as well but the problem is I would like to add a full background picture and then it would look weird with a white block in the middle of everything…

But thanks for the reply :)

[Author]

Posts