Geek Answers Handbook

Using a fixed position with wire mesh

So, I am creating a web page where the menus are fixed on the left side (they follow you when scrolling up and down the page). I am currently using grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php . Which uses twelve columns. I am having problems positioning a fixed layout while using the grid at the same time. How can I use a grid layout and fixed elements on a page?

<div class="container"> <div class="row"> <div class="four columns relativePosition"> <div class="fixedPosition"> <div class="four columns"> Menu Here </div> </div> </div> <div class="eight columns"> Other Content </div> </div> </div>

I managed to get a fixed position to work using this structure, but in some cases the contents of the menu get too large and overlap the contents of eight columns. I do not know if there is a better way to do this?

+7
source share
3 answers

Found this article - ZURB + ScrollSpy . Got it in 5 minutes. What I found was wrapping the contents of the sidebar in a scrollspy div under the grid position.

+4
source

Using javascript to solve a problem like this seems redundant. I would try to stick to the basics using Foundation offset classes as follows:

 <div class="row twelve columns"> <div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;"> Menu <ul><li>Menu Item</li></ul> </div> <div class="ten columns offset-by-two"> Content goes here </div> </div>

Hope this helps!

+3
source

It seems to me that if you have some kind of fixed page component, the simplest thing is to just pull the div out of the "Foundation" grid. Then, outside the grid, you can position it as fixed , and it will not interact with the grid at all. If the menu itself should also be a flexible grid, make it one - just separate it from the main grid.

+2
source

More articles:


All Articles