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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...