I currently have a HTML page with a CSS animation that is 'pushing' the main container of the page to the right by 100px when the left-hand nav menu is hovered over.
However, this menu needs to be pushed in decrementally less pixel amounts as the window size increases.
At a browser window size of 790px wide (or less), the container's left
position is 59px (retrieved using jQuery's $.offset().left
, and it needs to be pushed by the full 100px to make the menu visible.
However, as the browser window size increases between 790px and 1039px, the menu needs to be pushed less and less - so by the time the window size is 1039px/container's left
position 184px, the push needs to only be 1px.
So the window size range I am working with is:
1039 - 790 = 249px
The position range of the container adjusts in those window sizes to:
183 (when window size is 1039) - 59 (when window size is 790) = 124px
I want to push the menu like this:
min container position: left 59px = 100px push
max container position: left 183px = 1px push
and between 1px and 100px for the values between the the min and max container position.
How can I assign a push value of 100px when the window size is 790px/or the container's left position is 59px, and assign a decreasing range of push values when the window size/left position increases?
resize()
in jquery – Michelangelo Jun 20 '15 at 10:20resize()
function just fires when the window resizes - I still need to be able to determine how many pixels to push the menu out based on the container position. – jazzbangle Jun 20 '15 at 10:34overflow:hidden
) to avoid horizontal scrollbars appearing on smaller screens when the menu pushes out. However, less of container2 needs to be pushed out as the window width increases. – jazzbangle Jun 20 '15 at 11:41