Forum Contest: Responsive Navigation

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

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

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?

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

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? :)

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

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?

I enjoy certain music.

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

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

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

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

Regards, Piotr

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

Hi guys,

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

Cheers. Antoine.

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

Here's my entry - a pure CSS responive sliding nav: http://codepen.io/elliott/pen/zCaxr

Hi, This is my navigation for the contest Codepen

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

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

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

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)

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.

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

This one is my favorite.

http://codepen.io/TimRuby/full/kLGic

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!

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

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

Congrats Damon Bauer