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

Posted by Juan Luna
Juan Luna
11,483 Points

Question about a jQuery for my portfolio

Hi! I'm doing my digital portfolio:

www.juanluna.co

It is almost finished but I want to do a last thing, when you resize the window at 1300px the menu goes to the left and at the top appears a menu with two buttons, a Menu button and a "Volver" button (my page is in spanish). I want that when someone clicks the Menu button something like this happens:

http://tinypic.com/r/15wo1o1/8

How can I do that?

3 Answers

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Hi Juan,

Here's concepts below:

Sidebar Transitions

Off Canvas Page Slide

Foundation 5

CSS Tricks

BootStrap

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Juan;

Are you talking about having a slide out menu at a certain screen size? If so I would think that an off-canvas menu slider would be in order based on a media query.

There are a multitude of JavaScript menu sliders out there. One such example is in Zurb Foundation's front-end framework, examples can be seen here.

Just a quick thought.

Ken

Paulo Marques
Paulo Marques
22,845 Points
Paulo Marques
Paulo Marques
22,845 Points

I'd solve the problem in a easy way.

line 326: .active{ /* comment those lines transform: translate(200px, 0px); transition: all 0.5s ease 0s; */}

line 250:

menu {

/* comment this line left:-200px; */ }

line 84:

menu {

left: -200px; }

Now create a new rule in your css. When the #menu_responsive has the class active, then you add this to the this element:

menu_responsive.active h2:first-child

{ transform: translate(200px, 0px); transition: all 0.5s ease 0s; }

and modified the line 356:

menu_responsive h2:first-child

{ transform: translate(0px, 0px); transition: all 0.5s ease 0s; }

I find this would help you. best regards