Jump to content

Basic Push Menu with jQuery


DizzyDan

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.

 

Link to comment
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
Link to comment
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
×
×
  • Create New...