Menu icon Foundation
FoundationPress Navigation Border Transition

Hey Team,

 

I am trying to create a left to right bottom-border transition on hover.

Example: http://jsfiddle.net/samliew/QUMgy/

 

I am using standard navigation that is built in with very little changes.

I can get the animation to work but as the nav items are different lengths it pushes them around.

 

Any help would be greatly appreciated!

 

Cheers,
Kieran

foundationPresswordpressnavigationbordertransitionhover

Hey Team,

 

I am trying to create a left to right bottom-border transition on hover.

Example: http://jsfiddle.net/samliew/QUMgy/

 

I am using standard navigation that is built in with very little changes.

I can get the animation to work but as the nav items are different lengths it pushes them around.

 

Any help would be greatly appreciated!

 

Cheers,
Kieran

Rafi Benkual over 2 years ago

There are a few ways to do this. You might check out Building Blocks to start. Here is some example code for a similar thing https://github.com/zurb/building-blocks/pull/191/files codepen http://codepen.io/rafibomb/pen/rmmpQa

Sharing your current working code can help us guide you more.

To make menu's all equal width, add the .expanded class

To make them not have padding - just margin to space use the .simple class

Kieran Roberts over 2 years ago

Hey Rafi,

Thanks so much for your reply.

I will try implement it with your advice, if no luck I will post my code.

Cheers!

Val Ery over 2 years ago

Hi Kieran!

Here are three more examples:
The first is the usual menu,
The second is a menu with expanded items,
The third is the menu, which emphasizes only the text.

http://codepen.io/Val_Ery/pen/aWwgEG

P.S. The direction of underline is easily changed :)