Hamburger open change to cross for...

User 2699991 Photo


Registered User
4,799 posts

Frank Cook wrote:
Toggling without JavaScript can very quickly be done with two link elements of the same type (e.g. font-icon links) in any framework or Frameworkless as follows.

1. Give them a common class name and different IDs.
2. Set each one's own anchor ID as its href.
3. Put them in a container that has the position:relative.
3. Give them a position:absolute, top:0px.
4. Select one of the link elements and use 'Pseudo Selectors and Dynamic Classes' and choose Target.
5. In the In State box choose Target and set the Display to None.
6. In the In State box choose Regular.

The link elements should be opaque and the same size. If one is a bit larger than the other, make sure it is below the other one in the Elements Tree.

Frank


That's a great solution easy enough to follow, Frank. exactly how I have done it for him as a demo (video)

just for anyone else's information, if you are wanting something similar but can't follow Franks instructions I will make a "'how-to" tutorial video with just a menu. Let me know & I will put up the link.

W
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 2924830 Photo


Registered User
160 posts

Hi Inger - I just tried your hamburger and it is working great from rules to X but I am to much a beginner to adapt that with my foundation construction - probably I have to use another toggle method ? Or is there a simnple way to insert your container ? I will send attached my menu - so you might have some fun perhaps with my construction ?
and Wayan - yes it would be great if you could make a Video - so far I could learn a lot from your videos - and I am to much a beginner to go on only with Franks description -
and Frank - thanks a lot for this new idea !!
attachment comes later - server error ...
User 2699991 Photo


Registered User
4,799 posts

Mich ael wrote:
Hi Inger - I just tried your hamburger and it is working great from rules to X but I am to much a beginner to adapt that with my foundation construction - probably I have to use another toggle method ? Or is there a simnple way to insert your container ? I will send attached my menu - so you might have some fun perhaps with my construction ?
and Wayan - yes it would be great if you could make a Video - so far I could learn a lot from your videos - and I am to much a beginner to go on only with Franks description -
and Frank - thanks a lot for this new idea !!
attachment comes later - server error ...


I will do one later today when everyone here is awake,
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 2924830 Photo


Registered User
160 posts

Sorry - cannot send the attachment as zip = Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request....
User 122279 Photo


Senior Advisor
14,450 posts

Hi, the menu icon thingie I sent was a Foundation version. I'm away from home this weekend, only mobile connection, but we can get back to this on Monday, if you havent solved the issue by then.
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 2699991 Photo


Registered User
4,799 posts

Inger wrote:
Hi, the menu icon thingie I sent was a Foundation version. I'm away from home this weekend, only mobile connection, but we can get back to this on Monday, if you havent solved the issue by then.

Hi Inger

I have done a video for him showing the process of how to add your menu thing into his menu thing ??

Take care and have a great weekend
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 122279 Photo


Senior Advisor
14,450 posts

Thanks!
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 1743776 Photo


Registered User
74 posts

Hi! Any follow-up info, example or video of this?
Here's what I am trying to use within Materialize with my notes within ().
Give them a common class name and different IDs.
(For me IDa is Hamburger and IDb is Cross.)
2. Set each one's own anchor ID as its href. (As the other's ID? IDa would href IDb and vice-versa?)
3. Put them in a container that has the position:relative.
3. Give them a position:absolute, top:0px.
4. Select one of the link elements and use 'Pseudo Selectors and Dynamic Classes' and choose Target.
(IDa or IDb? Or either?)
5. In the In State box choose Target and set the Display to None. (Of which or both? For selected element ID only?)
6. In the In State box choose Regular. (Of which or both? For selected element ID only?)

Thanks for help.
Live in a steady joy!
User 2699991 Photo


Registered User
4,799 posts

Dick wrote:
Hi! Any follow-up info, example or video of this?
Here's what I am trying to use within Materialize with my notes within ().
Give them a common class name and different IDs.
(For me IDa is Hamburger and IDb is Cross.)
2. Set each one's own anchor ID as its href. (As the other's ID? IDa would href IDb and vice-versa?)
3. Put them in a container that has the position:relative.
3. Give them a position:absolute, top:0px.
4. Select one of the link elements and use 'Pseudo Selectors and Dynamic Classes' and choose Target.
(IDa or IDb? Or either?)
5. In the In State box choose Target and set the Display to None. (Of which or both? For selected element ID only?)
6. In the In State box choose Regular. (Of which or both? For selected element ID only?)

Thanks for help.


I did a couple of videos but not using Frank's way I showed Ingers way and another showing with up/down arrow indicators and done in foundation, I don't use materialize but I think the principle maybe the same
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,799 posts

One other question
are you using a menu component from the resources, if so which one?
are you using it as an actual trigger for a menu bar? or just a trigger for a dropdown thingy? Ok then that's 2 questions

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.