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

CSS

Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Transitioning in text onto an overlay.

I've got an overlay set up so that it appears on the click of a button. In the middle of the overlay are some links in the form of text. At the moment the text just appears. I want to translate the text onto the overlay like so in this example, the overlay appears with a click of the hamburger icon.

http://www.hugeinc.com/

I'm a little unsure how to go about this. In the CSS would I need to have a nav with the links in it, and then have a nav.open class? I'm using jQuery for triggering the animations.

Any help is much appreciated.

1 Answer

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi Gabriel,

Well have you tried a toggle() on the Hamburger Icon (now I'm hungry) then using this as a event handler that adds and overlay class to the body you could use addClass() ( everything on the overlay has to have the same z-index and it has to be greater as the body z-index) and then animate the button when hovered with css and finally animate the nav menu. jQuery API really helps.

Just IMO by the way. Solutions are many :)

Gabriel Ward
Gabriel Ward
20,222 Points

Hi Nejc, thanks for your response. Yes it's all set up with the overlay and button functionality. THe only thing I'm unsure about is the translation/animation of the text links.