Menu with a hover effect and active...

User 2303371 Photo


Registered User
27 posts

I am grateful if any one could assist me to create the below:
https://foundation.zurb.com/building-bl … lines.html
I am having problem understanding CSS section.
Thanks
User 122279 Photo


Senior Advisor
14,447 posts

I have a menu in my sharing folder (see signature) which is not exaxtly the same, but similar. You could take a look at it and see if you can change it. It's the 'Hover-underlined' in the rightmost column. Any css with things like ::after, ::before will have to be added in the settings, as the programme is not yet capable of doing it.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2303371 Photo


Registered User
27 posts

Inger wrote:
I have a menu in my sharing folder (see signature) which is not exaxtly the same, but similar. You could take a look at it and see if you can change it. It's the 'Hover-underlined' in the rightmost column. Any css with things like ::after, ::before will have to be added in the settings, as the programme is not yet capable of doing it.


Thanks for your help.
User 244626 Photo


Registered User
811 posts

The effect can be done by adding a <span> (text element) above and below the text link element. Set the background of the <spans> and then delete all the text so you have a colored block basically. Set your height and length of the block.

You will then need to create a "dynamic class" on the span elements so you can set the after state. Once you have that created, the only way to animate multiple objects on hover (in this case it will be the container holding the spans and text link) is to use jquery to add the dynamic class when hovering and remove when not.

Keep in mind this general approach or effect will not work on mobile as there is no hover.
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Kishore Bhagwan wrote:
I am grateful if any one could assist me to create the below:
https://foundation.zurb.com/building-bl … lines.html
I am having problem understanding CSS section.
Thanks


How about like this
https://test.rsdtutorials.com
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

forgot to mention
The first 2 links (about & blog)work to those pages to show the active state & hover effect
The link to menu2 (different clour & different font) works, but only the link to take you back to menu1 in that menu.
It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css
Done
no messing with :before or :after
changing the colour/font just requires editing the custom css for the background colour & inserting a new font family

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2303371 Photo


Registered User
27 posts

Wayan Jaya wrote:
forgot to mention
The first 2 links (about & blog)work to those pages to show the active state & hover effect
The link to menu2 (different clour & different font) works, but only the link to take you back to menu1 in that menu.
It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css
Done
no messing with :before or :after
changing the colour/font just requires editing the custom css for the background colour & inserting a new font family



I would be grateful if you could arrange for me to download the sample file.

Thank You.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Kishore Bhagwan wrote:



I would be grateful if you could arrange for me to download the sample file.

Thank You.


https://www.dropbox.com/s/gn7wnihost1n1 … t.rsd?dl=0
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2303371 Photo


Registered User
27 posts

Wayan Jaya wrote:
Kishore Bhagwan wrote:



I would be grateful if you could arrange for me to download the sample file.

Thank You.


https://www.dropbox.com/s/gn7wnihost1n1 … t.rsd?dl=0


Hi
I am having difficult in under standing
"It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css "
Please direct me, so I will be able to do it step by step. Do I have download from Zurb???, What is FF menu???
This first time I am doing it.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Kishore Bhagwan wrote:
Wayan Jaya wrote:
Kishore Bhagwan wrote:



I would be grateful if you could arrange for me to download the sample file.

Thank You.


https://www.dropbox.com/s/gn7wnihost1n1 … t.rsd?dl=0


Hi
I am having difficult in under standing
"It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css "
Please direct me, so I will be able to do it step by step. Do I have download from Zurb???, What is FF menu???
This first time I am doing it.


follow the link

https://www.dropbox.com/s/gn7wnihost1n1zl/menu-hover-effect.rsd?dl=0
download the file from there

or I can show you step by step with a video

FF menu is the one you saw in Foundation Zurb site building blocks
[/quote]
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

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.