I feel like what I want is pretty basic, as I thought I was trying to make it the most simple so I could get rolling faster.

I have a bar at the top. It's two columns. The left column has my site logo, the right column will have a menu9 icon.

I want to be able to click the menu9 icon, and have a div show up directly below my top bar. It's a menu, but for now all I'm trying to do is make the stupid div show up. I want it to be DIRECTLY below the top bar. I want it to be the exact same width as my top bar. I think I would like it to push the rest of the page down, but even it lays over the top of the rest of the page, I don't care at this point.

Anything I get half way close to this ends up leaving a giant blank space below my top bar where the div is hidden (but apparently still taking up space?).


I've wasted hours on this already. As it is, I take everything that FF gives me and edit it all in a separate editor where I add all of my PHP anyway.. So is this something I just have to go back to the basics and do outside of FF when I'm hardcoding my PHP?



I should add that I'm not trying to change the top bar at all in different widths. I'm fine with having the menu icon open a menu at all browser sizes.

I'm just going to build something and then toggle it the old fashioned way with jQuery.

Try this:

https://www.dropbox.com/s/1y71gw2iomowb … w.zip?dl=0

Hide & Show a Div With Animation Effects

https://youtu.be/aKLFjfI6NHk

Download the project file at following link
https://www.dropbox.com/s/xlhis1vg39vxz … v.zip?dl=0

That's a great video! Thanks for posting it!

Do you know how you would add any of the 'Modifier' classes at the bottom of this page?
https://github.com/zurb/motion-ui/blob/ … classes.md
I tried adding a few different data attribute settings (such as data attribute easing) but couldn't get it to work.

Also, I noticed that on the container that gets animated, a thin black border appears. You can reset it to no border to remove it.

You mean targeting self element? yes you can but have wrap into container and target invisible container, kinda cheating self element

Something like this?

callout class has border: 1px solid rgba(10, 10, 10, 0.25); which you can overwrite it in your custom css.

Now I got what you mean,

try add new data attribute for example easing >> data-animation-easing then value is one of out three options such as:

Easing ( Linear / Ease / Bounce)

Speed ( Normal / Slow / Fast )

Data attribute = data-animation-easing
Value = Linear

Data attribute = data-animation-speed
value = slow

http://foundation.zurb.com/sites/docs/m … ransitions
Custom Transitions

@include mui-hinge(
$state: in,
$from: top,
$turn-origin: from-back,
$duration: 0.5s,
$timing: easeInOut
);

I can't seem to get any of the easing attributes to work. I've tried using

"data-animation-easing" with values of any of these: bounce, bounce-in, bounce-out
and it doesn't affect the animation at all.

Has anyone been able to get any of the easing or timing or delays to work on the animations?

Do we need to put any extra code in the 'head' section?

I assume you are linking the mui ?
<!-- Insert this within your head tag and after foundation.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />