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 Mikkel Madsen
Mikkel Madsen
13,885 Points

Need info/tips for an animated drop-down menu

Hey there, I've have found great inspiration in "cuberto.com's" site, and wanted to make something similar to their drop-down menu. But I have no clue where to start.

I looked at their code by inspecting it with google tool but cant get any info out how to make a drop-down menu that seems to paint its background-color with some sort of animation.

I hope it is okay to ask for some guides or info on this :)

Cheers

Chris Shaffer
Chris Shaffer
12,030 Points

You may want to start with a framework that will make creating the initial menu easy, such as Foundation 5 - http://foundation.zurb.com

The animation is done in JQuery, which is also used by F5, but you'll need to review the JQuery page and probably use some of their additional methods to achieve the same effect.

The basic menu could easily be done using F5, though, so I'd start there.

Mikkel Madsen
Mikkel Madsen
13,885 Points

With F5 you mean Foundation right? :D Thx, i'll take a look at Jquery.

Chris Shaffer
Chris Shaffer
12,030 Points

JQuery will be included in most front-end frameworks, including F5 & Bootstrap. F5= foundation 5. JQuery or JQuery UI alone will result in a lot more work than simply starting with Foundation 5 and then using JQuery to mod some of it's behaviour.

2 Answers

Grant Lacey
Grant Lacey
6,103 Points

the Front End Web Development track has a nice introduction to jQuery. This was an eye-opener for me, the missing layer of functionality that I was looking for. It also re-enforced how much dedication and time I need to invest in order to gain the proper skill to achieve the desired results. Ive been fishing around looking for mega-dropdown help myself. The example you showed seems very clean, sleek, and fast to me. I like it. I believe theres a school of thought that if you're able to accomplish things in CSS you should, the effect your looking for may be possible with just CSS I don't know. Heres a link of jQuery plugins that I found the other day. Im not recommending any explicitly but worth a look to see what types of options are out there. http://speckyboy.com/2014/12/08/jquery-plugins-2014/

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

Agree on the Front-End Dev Track, however, don't waste your time reinventing the wheel. Menus like this are a common place thing; there's plenty of options for starting with the bulk of the work done (using F5 or Bootstrap) and then modding as necessary.

Yes, you can build these from scratch using ONLY CSS (albeit probably not with the animation seen on the example site in the OP) or using JQuery or JQ tools.

However, you'll likely learn as much from modding existing frameworks to do what your specific intention is as you will trying to beat your head against a wall building it from scratch.

I strongly encourage taking the relevant tracks and learning what's going on behind the scenes, but I equally encourage you to work with something like Foundation or Bootstrap that will let you get a working example in minutes then tweaking it to find out what makes it tick.

Chris Shaffer
Chris Shaffer
12,030 Points

Start here: http://foundation.zurb.com/docs/components/offcanvas.html with F5 and you'll see what I mean.

With a simple HTML layout, including a standard UL element, you can create an off-canvas menu very quickly.

The rest of the trickery seen on cuberto.com is done using JQuery, for the most part. You can see this by viewing the Event Listeners on your F12 FF/Chrome webtools.

It's also possible something similar could be achieved with CSS animations, but I'd expect that to be a bit more of a beast, unless you don't know JS, in which case figure it out in CSS :)