Menu icon Foundation
Getting topbar to ease in/out on mobile

I can't seem to find any documentation on how to modify foundation.topbar.js (or add separate javascript) that will make the topbar dropdown ease/slide up and down instead of immediately showing/hiding.

Screen shot 2014 01 29 at 6.44.06 pm

topbareasingmobilecss

I can't seem to find any documentation on how to modify foundation.topbar.js (or add separate javascript) that will make the topbar dropdown ease/slide up and down instead of immediately showing/hiding.

Screen shot 2014 01 29 at 6.44.06 pm
Rafi Benkual over 5 years ago

This is a cool feature idea. It is not built in yet but this example is very similar and should help you http://jsfiddle.net/leaverou/zwvNY/

Chris Matthias over 5 years ago

Rafi's got the right idea-- you need to use CSS3 animations/transitions to get them to dropdown how you'd like. I've worked up a fiddle for you using the base Foundation 4 HTML markup for the top bar and the javascript-- all you'll need is the CSS from the fiddle and it should work--- i'm doing the dropdown effect on the UL elements inside .top-bar-section.

I've tried this on the default Foundation demo markup and it doesn't look great until you remove the background color from the #header element that the top bar is usually inside.

Here's the fiddle: http://jsfiddle.net/thetrickster/62bsF/

Ryan over 5 years ago

I got this working by setting a height for nav.top-bar.expanded and adding transition: height .3s ease-in-out; to nav.top-bar

Rafi Benkual over 5 years ago

Nice! Thanks for sharing the solution as well to help others!

Chris Matthias over 5 years ago

@Ryan-- setting a height seems counter-intuitive. What happens if you add more items to your menu-- do you need to update the height of your nav.top-bar.expanded?

Gavin Stokes almost 5 years ago

@Ryan - nice cheers works great.

Patrick Whitty-Clarke almost 5 years ago

@Chris Matthias you set a height so that the transition can work. For some reason you can't animate to a percentage based (or unknown) height, it has to be fixed. So you just have to work out how long your menu will be. I agree its not the best as you would need to update the CSS if you add lots of menu items, but its the only way to do it with pure CSS.

Elizeo Benavidez almost 5 years ago

@Ryan @Chris Matthias - I got around the set height issue by adding max-height: 6000px; to nav.top-bar.expanded You can go higher if your menu is dynamic or you're anticipating adding menu items on a regular basis. I also had to add max-height: 45px; to nav.top-bar

If you do this, you will need to change your transition css on nav.top-bar to transition: max-height .3s ease-in-out;

Carlo Vinci almost 4 years ago

Hi All,

Found this post useful and thought i would update it with my 2 cents. This animates the top nav to slide open and close.

// SASS CODE
nav.top-bar {
@include transition-duration(.5s); // This is compass code, if not using compass replace with standard css
max-height: $topbar-height;
overflow: hidden;
height: auto;
&.expanded {
max-height: 500px;
}
.fa {
font-size: 18px;
}
}

Janifer about 1 month ago

Nun kommen wir zu dem aufregendsten Teil, der mit den Geburtstagen verbunden ist. Es ist nur einer der besonderen Tage für diese b-Tag-Person. Du wirst diesen Tag mit deinen Freunden und deiner Familie feiern müssen. Das Band, das Essen und vor allem die Geschenke. Wie jedes Ritual sorgen auch glückwünsche zum geburtstag für köstliches und gutes Essen. Für wenige Menschen, die sich hauptsächlich an Nicht-Vegetarier und Süßigkeiten richten, für andere bevorzugen sie Gemüse. Dennoch ist die Konstante süß. Kuchen stehen immer im Rampenlicht.