I made a Hmaburger navigation with foundation Element "menu 9" = three lines - and would like it to change to an X so it signalizes how to close. How can I do it ? possibly without Java Script ?

Hi Mich ael, hope you are ok over there?

The way to do it without JS is to have the menu bar open over the top of the hamburger thingy, with a container menu item as the first thing with a cross which then closes the menu (therefore revealing the hamburger thingy again

W

Michael, I have a component for it on mock-up.coffeecup.com on the Bootstrap page. You can replicate it for Foundation, it is done exactly the same way.

If it is not urgent like 'already by yesterday', then hang on a bit, and I'll make one in Foundation.

Here is a Foundation version of the menu icon. It has not made it into my site yet, I've just made it.
The comments to it will be the same as I have on the BS-page.

Hi Inger,
thanks a lot. This forum is really a big big help. Sorry I cannot use your component because my SD version is one nr. behind. And which bootstrapo version on your site do you have in mind - I couldn't find in the description the "change lines against cross...."
And Wayan thanks but I think I need a more step by step information ... but I will try to use your hints ...

Here is one in an older version.

I wish that people who ask for help with SD would always tell us right up front which framework and SD version they are running. We don't remember that from time to time.

Hi Inger
Could it be that most are behind with build numbers because of testing "Beta" versions prior to updating release?

I have two machines, and stuff I'm testing always gets installed on the other one, after I made that mistake once, some time ago.
I remember now, after Michael mentioned it, that he has not updated to the latest release.

Mind you Inger
I agree with you that it would be most useful for people to mention the version at least, the version build number and framework would be great by

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