Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Forum Contest: Responsive Navigation

EDIT: This contest has ended! Here's the next contest.

Hi everybody,

It's time for a new Treehouse Forum contest! We've done these in the past in a limited capacity, but in 2014 we plan to have a new contest every week. Every Monday we'll announce the week's contest along with the winner of the previous week's contest.

First, watch this video to learn more:

After you've watched the video, please read the details below carefully. I'm looking forward to your entries!

How to Enter: Create your responsive navigation entry as a "pen" on Codepen.io and then post the link to your pen as a reply to this post.

Due Date: All entries must be submitted by January 12th at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.

Prize: The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Gold on us! :) We'll announce the winner on January 13th and reveal the next contest.

35 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Submit your entries here! Make sure it's a link to a pen on Codepen.io, like this:

http://codepen.io/nickpettit/pen/eBCrK

Patrick Cooney
Patrick Cooney
12,216 Points

Are there going to be challenges for those of us going the native mobile route?

Sounds cool I might enter this. So just to be sure it is the best designed and the cleanest code or it it simplist code or best code? Like can you define what type of code you looking for? Would minimal be ok?

Nick Pettit
Nick Pettit
Treehouse Teacher

Make something that's creative and functional. Whatever that means to you. :)

are we allowed to use plugins and frameworks or we start from scratch?

Nick Pettit
Nick Pettit
Treehouse Teacher

Sure, you can use plugins and frameworks! Just as long as the nav isn't totally premade and "out of the box" so to speak. We'd like to see something original, but that doesn't mean you have to start from nothing.

One problem I see here is that the codepen link is accessible to everyone. This means that others can the idea of "stealing" or "improving". Is there perhaps a possibility in the future the codepen link to make visible to moderators? :)

Tom Bedford
Tom Bedford
15,645 Points

You could wait until later in the contest to post if you are worried (though the earlier you post the more obvious it would be if anyone was "influenced" by your idea).

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points

Must we make it compatible with all browsers, or will Chrome be fine?

Nick Pettit
Nick Pettit
Treehouse Teacher

It needs to be practical, so no, it should work in more than just Chrome. The more compatibility you can offer, the better!

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

Although that would mean I'd need to patch up my code for this contest, I like to see best practices being enforced. ;)

Thanks for the quick answer.

I really didn't mean to bother you but what is this background music? It's really relaxing and let me focus to do my front end work. Would you mind telling me please?

Nick Pettit
Nick Pettit
Treehouse Teacher

We usually compose our own music, but we bought the rights to use this track from a website called Audio Jungle. Here's the link to the track: http://audiojungle.net/item/new-holiday/6345224

I enjoy certain music.

Evan Leopold
PLUS
Evan Leopold
Courses Plus Student 10,420 Points

Wish I had time to do this. Seems like a lot of fun. Looking forward to seeing what y'all come up with.

Piotr Aszoff
Piotr Aszoff
8,150 Points

Mabye not so awesome, but someone has to be first :)

http://codepen.io/pas/pen/EwgqB

http://codepen.io/pas/pen/dlCLk

Regards, Piotr

Nick Pettit
Nick Pettit
Treehouse Teacher

Thanks for being the first! :)

Yaswanth Goli
Yaswanth Goli
6,872 Points

Thanks Team tree house , for your help and support

my code (http://codepen.io/yashutoro/pen/ubjDK);

Regards, Yash

Hey all, not an easy task for me this but i think the effect has potential if had better styling. Tried to get the opacity to drop first so the nav list appears behind the content then the content slides down rather than the list move.

link to entry

Thanks Treehouse Adam @Sacki2013

Team Tree House, thank you very much!

Here is my code! http://cdpn.io/Bpxlm

James Ingmire
James Ingmire
11,901 Points

Think this is a really clean simple nav, looks really neat.

thanks!

Antoine Vinial
Antoine Vinial
10,408 Points

Hi guys,

Here is my navigation for the contest. http://codepen.io/antoinevinial/full/lnwyC

Cheers. Antoine.

Antoine, This is really cool. Nice job!

your design is really cool!

Very clean. I like the direction you went with this. Very interesting.

Had some fun writing a couple of SASS mixins on this one! http://codepen.io/damonbauer/pen/FcqEs

Linards Berzins
Linards Berzins
Courses Plus Student 13,480 Points

Your work is awesome, beautiful transitions, nice and clean with strong colors. My vote.

Angela Jackson
Angela Jackson
9,484 Points

Hey Damon,

I love the smooth transitions and the color palette but in my browser (Chrome) the links overlap one another. Here's a screenshot of what I mean.

Thanks Angela! Interesting - I'm on Chrome too and I can't reproduce this. I'm going to keep trying though - thanks for the heads up!

Thanks Linards!

Smooth transitions. Very Nice.

Hi, This is my navigation for the contest Codepen

Liking this except when in small screen you hide the list and the menu icon shows, then goto large screen again and the menu is gone

Thanks, i fixed it, now you can say you like it :)

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Wow, lots of great competition so far! You're all going to make it difficult to pick a winner. :)

We would love to get some critics from you :D

I agree with Younes we would love to get some critic from you so that we can improve our entry

Hi, here is something that I have made for this competition CodePen

Jacques Vincilione
Jacques Vincilione
17,292 Points

Not sure if this is ok or not, but this is a website I'm currently working on. My CodePen

Tim Ruby
PLUS
Tim Ruby
Courses Plus Student 19,038 Points

Thanks for giving me something fun to work on during my down time today at the office, Nick Pettit and Team Treehouse!

My Responsive Navigation Pen

At first, I was like "Yeah, I really want to do this!" Then I realized how busy I was going to be. As it turned out, I had to build a responsive navigation for a site I was working on anyway, so I thought I might give it a spin in here.

Fullscreen: http://cdpn.io/IJnyA Editor: http://codepen.io/hydraulX/pen/IJnyA

My code is a little messy, I know; but it all looks great in my desktop editor, so it must've gotten bungled in the copy-paste.

Uses a boatload of flexbox. Can't get enough of that thing, it's so awesome. Should work in all modern browsers (IE 11+, Firefox 22+, Chrome 21+, Safari 6.1+, Opera 12.1+). I just realized that it might not work in IE10 and definitely won't work in IE9, so I might have to make a shim. IE is the bane of my existence right now.

EDIT: I just realized that it's a little buggy. I'll fix it before the deadline.

Good luck everyone http://cdpn.io/xvFdc here is my mega responsive navigation.

I struggled making this navigation come alive But here is my Responsive Rainbow Navigation Bar RRNB The main content looks a bit crabby but, its all about the navigation, i hadn't enough time to fix the content. Thanks treehouse for all.

I'm still working on mine, but I feel my concept for navigation has never been used before. I doubt I will finish the final draft by Monday but ill post a rough draft sometime today. (It is all in javascript)

Sounds intriguing!

I am sure the memory usage could end up being terrible, as I have little to no theory background and have never had to properly utilize data... But I still love how its looking! (Working on refactoring it again, the code gets a bit confusing when I rush)

http://codepen.io/Bonesdog/pen/pofzt

It a rough, rough, rough, rough, rough draft XD. I realize its absolute not responsive, but Just wanted to get some feedback regarding the idea and its possibilities.

(This is NOT my entry, just a rough draft)

Feel free to use the concept though if you understand were I am trying to go!

Hi, if you accept some suggestions :):

1) i suggest that you create an object called "Anchor" and give it the specific needed functions like styling, animations...., and the same thing apply to every element. 2) i don't recommend using document.write you should create elements and Nodes to give yourself more flexibility.

Thank you very much!! Ill look into that, I honestly haven't but just started using javascript to write html and css code. I have been experimenting over the past few days.

Ill add another updated version tomorrow!

Tim Ruby
PLUS
Tim Ruby
Courses Plus Student 19,038 Points

Updated my previous pen and added a second-level of navigation. Still not entirely sure what the best approach would be for showing the second-level though. I'd like for it to be visible on :hover of the parent for larger devices, and on .click of the parent for devices below a specified width BUT that's a bit above my JS skill level at this point... I think this will be my final submission and best of luck to everyone who has submitted to the contest! Any feedback is always welcome!

Responsive Pen - Tested in Chrome, Firefox(Aurora), and Safari

This came at short notice to me. Nonetheless, introducing (my first responsive nav). Drum rol...lets get on with this:

 _       __                __             ____        ____     __     
| |     / /___  ____  ____/ /__  _____   / __ \____ _/ / /__  / /____ 
| | /| / / __ \/ __ \/ __  / _ \/ ___/  / /_/ / __ `/ / / _ \/ __/ _ \
| |/ |/ / /_/ / / / / /_/ /  __/ /     / ____/ /_/ / / /  __/ /_/  __/
|__/|__/\____/_/ /_/\__,_/\___/_/     /_/    \__,_/_/_/\___/\__/\___/ 

Wonder Palette Responsive Nav <--JSbin

Codepen <--- Update, fixed some errors.

I tried to post this on Codepen, but I kept on getting unnecessary "CSS LINT" errors, that normally do not interfere with the website itself.

The entry above had been created on JSbin. JSbin seamlessly reveals the responsiveness. Now take a look at Codepen. Why is it not the same for both sites.

James Barnett
James Barnett
39,199 Points

Because your keyframe animations have syntax errors. Cut and paste your code from your jsbin into codepen and it will work.

> getting unnecessary "CSS LINT" error

Those aren't errors, they are warnings, they will increase the quality of your code if you change your coding style to match.

Except in your case you can safely ignore the Require use of known properties related to flex box, which is actually erroneous because CSS Lint doesn't recognize flex box syntax.

Thank you for the help.

This is a cool idea nothing like a bit of friendly competition I might have a look at this tomorrow, but look forward to further challenges I hope I can find the time to enter some of them.

4 minutes left!

Right at the last minute! I could agonize endlessly, but here it is:

http://codepen.io/randseay/full/wqGeE

Hi, nice work, mobile devices don't have a hover state!! but your menu show and collapse on hover!!!

Totally agree. I was trying to tackle that very thing when the deadline rolled around. Submitting what I had was better than nothing at all :)

James Barnett
James Barnett
39,199 Points

That's certainly one of the 2 best I've seen.

who's the second?

Tim Ruby
PLUS
Tim Ruby
Courses Plus Student 19,038 Points

I am experiencing some serious bugs with commenting/editing comments, etc. Anyone else run into this? On Chrome at the moment. Sorry for the double replies!

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Congratulations to Damon Bauer on winning last week's forum contest! Earlier this morning I reviewed all the entries and, I have to say, it was a pretty tough call. Everyone submitted some very cool work.

However, Damon's responsive nav won overall. He's using HTML5 elements, SASS mixins, SASS variables, SVGs, transitions, really smart media queries, and the design looks great. I tested on several browsers and mobile devices, and it seems to work well everywhere. It even maintains decent animation framerates on mobile, which can be tricky. Well done, Damon!

Here's the next contest! Calculator App for iOS

Eric Kidwell
Eric Kidwell
12,280 Points

Loving these contests! Being someone who is competitive, these contests allow me an outlet to learn while creating.

Congrats Damon Bauer