Hiding/Showing A Div - Post ID 268581

User 2850956 Photo


Registered User
2 posts

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.
User 2850956 Photo


Registered User
2 posts

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


Ambassador
938 posts

Try this:

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

Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

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
Guys at coffeecup are awesometacular.
User 2846109 Photo


Ambassador
341 posts

Mansour ... wrote:
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.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 434929 Photo


Ambassador
938 posts

You mean targeting self element? yes you can but have wrap into container and target invisible container, kinda cheating self element :)
Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

Something like this?

https://s28.postimg.org/76b1p6gfx/btnanim.gif
Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

Jeff wrote:
Mansour ... wrote:
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.


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
);
Guys at coffeecup are awesometacular.
User 2846109 Photo


Ambassador
341 posts

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?
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 244626 Photo


Registered User
811 posts

Jeff wrote:

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" />
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.