Sticky Magellan Nav with Scrollspy...

User 371172 Photo


Registered User
35 posts

Just thought I'd post the results of half a day wrestling with RSD to get a sticky Magellan nav with scrollspy effect working in Foundation. (There are also some sticky nav buttons shown as well in the file but they are not needed for the Magellan Nav to work).

The trick was to set 'data-active-class' value with the 'data magellan' attribute. This then tracks ands sets a temporary '.is-active' class against the magellan targets. It is quite clever because it holds the 'is-active' class on until the next target is reached. This means that the target remains highlighted in the navigation even if you have inserted more sections (at the same level).
Then a little css in the header section to change the navigation link (when it is '.is-active') and you have tracking navigation. Magellan also sets smooth scroll in all directions!

Enjoy.....:D
JP
Cat herder and Fog platter.
User 122279 Photo


Senior Advisor
14,461 posts

Sounds interesting, but we would like to see it too. Did you mean to post an URL, or a project file?

I have a wee Magellan menu myself, made quite a while ago, see my sharing folder, URL in my signature.
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 371172 Photo


Registered User
35 posts

I would be but the forum is refusing to upload an .rsd file. I try a .zip file
Attachments:
JP
Cat herder and Fog platter.
User 371172 Photo


Registered User
35 posts

That worked - wonder why it didn't like an .rsd file?
JP
Cat herder and Fog platter.
User 2699991 Photo


Registered User
4,817 posts
Online Now

Jonathan Price wrote:
That worked - wonder why it didn't like an .rsd file?

Probably BCS .exe files are blocked by browsers from downloading
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 … uman-lina/
User 187934 Photo


Senior Advisor
20,192 posts

Very cool Jonathan,
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
3,087 posts

Thanks for sharing Jonathan I will check it out tonight. I am always looking on different navigation options for my websites. I tweek and save ever navigation system I have ever built in my Library.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

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.