Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Philip Bradbury
Philip Bradbury
33,368 Points
Posted by Philip Bradbury
Philip Bradbury
33,368 Points

Jquery Slide menu with a CSS grid

Trying to make a slide menu for a mobile site (the one like on this site and the Facebook app) I'm using a CSS grid system with a slide menu. I want to push the whole content to the right, is this possible or would I have to ditch the CSS grid system?

1 Answer

Lorenzo Pieri
Lorenzo Pieri
19,772 Points
Lorenzo Pieri
Lorenzo Pieri
19,772 Points

Well it is entirely possibly, the only question that goes with it is: what kind of position would you like the new slide menu to have? If it's a normal grid system, just assign all the drop-down\slide menu declarations to a single column, wherever that column is, and work with that.

Hope it helped! Have the best day!

Philip Bradbury
Philip Bradbury
33,368 Points
Philip Bradbury
Philip Bradbury
33,368 Points

So i have already built the site and it spans 100% of the grid. I want the menu on the left hand side and to come across from left to right. Will it shift the whole site to the right of do i need to make room in the grid system for it?

Lorenzo Pieri
Lorenzo Pieri
19,772 Points
Lorenzo Pieri
Lorenzo Pieri
19,772 Points

You could trick the browser by using a few CSS properties like :

FLOAT || Z-INDEX || ABSOLUTE POSITIONING + Z-INDEX

Taking the Sliding menu "OFF THE GRID" will make it possible to avoid other elements to be moved by the menu that will span over the page without touching others' elements position. This way you can keep your menu where you put it without changing any values or positions from the GRID. Just make it act like it was a 3D object so that it overlays the other items of the page without actually annoying them!

Hope this is what you were looking for! Best day to you!