sticky Magellan navivation menu -...

User 2706435 Photo


Ambassador
444 posts

I am having trouble creating a simple magellan menu. I understand that as the page scrolls, the sections in the menu should change the class of the current target to the .active class (blue background white text). The default active class should be .active

Can someone post an sample of a sticky magellan menu that changes the .active class of the links as the page scrolls through sections?
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Is it a horizontal menu bar you are after? I have just had a look at a vertical one. Didn't seem too difficult. I'll have a go at it when I get some time.
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 2706435 Photo


Ambassador
444 posts

Either one. The Magellan component is supposed to be adding Foundation's class of "active." to the link as the link's section scrolls by. It does that, except the .active class' styles are not being applied (blue background and white text for highlighting the "active" section).
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Bill, check out this one:
https://dl.dropboxusercontent.com/u/109 … lan-h2.rsd

I made it from the descriptions I found on one of the Zurb pages that you posted a link to in another thread, and then I added some extra styling I found on another Zurb page.

It is working as far as I can see. The colour changes are best done in the extra styling (see Settings pane).

I have just banged in some contents, just to have something that the menu can scroll to.

If you have something that is better, I'd be interested. ;)
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 122279 Photo


Senior Advisor
14,447 posts
Online Now

https://dl.dropboxusercontent.com/u/109 … lan-h2.rsd

I have uploaded a new file, as I noticed there was an alignment error in the first one. So just in case someone has downloaded 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 2706435 Photo


Ambassador
444 posts

I have been off the forums a little bit and just saw the post. Both of the links are broken, its as if I am seeing a mix of ascii code and minified css code. Odd because it should go to a dropbox account for the file.

In the RSD forums, I did find a fix for it. The .active class must be embedded in the page or or in a custom stylesheet. And the font color must have "!important" after the property. It will also work is a custom class name is delivered through a data attribute for Magellan. I reported it as an issue.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Yes, I see that the link to the file in my dropbox is broken, don't understand why. But you can also access my attempt by going to my sharing folder (2nd url in my signature). Seems to work well anyway.
Ha en riktig god dag!
Inger, Norway

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



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.