Jump to content
Sign in to follow this  
DizzyDan

Basic Push Menu with jQuery

Recommended Posts

Project Code: https://codepen.io/Digitango/pen/VzyZyO

Project Description: I created a pretty basic push menu using jQuery. What I want to achieve is to click the menu bars, push the main-content over and display the menu. Then close the menu when you either click the menu bars again, click the close icon or click anywhere off the menu.

So far I handled all of this successfully, however, one thing I don't like is if you scroll down on the main-content, then click the menu bars the main-content goes back to the top.

It does this because I use toggleClass to change to 'position: fixed;' for main-content when the menu is open. I use position: fixed because if I use 'position: absolute;' for main-content instead I get horizontal scroll bars.

I can't seem to find a simple solution to not have horizontal scroll bars AND not bring the main-content back to the top when the menu is open.

It's not terrible with position: fixed; but I would like to gain an understanding or maybe achieve this a better way rather then settling.

Note: Mind you my JavaScript & jQuery knowledge is pretty limited so there is probably a better way to handle this but here is where I am at and I'm open to any suggestions.

 

Share this post


Link to post
Share on other sites

Like to the body tag?

body{
overflow-x: hidden;
}

This seems to do the trick.

Edit: Just wanted to clarify I had to also change .push-open from position:fixed; to position: absolute;

Edit II: I also have to add a to .menu incase the menu height was taller then the window:

.menu{
position: fixed;
height: 100%;
overflow-y: scroll;
}

 

Edited by DizzyDan

Share this post


Link to post
Share on other sites

Originally I thought it might have been a jQuery issue but this might make more sense in the CSS thread.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×