Navigation Menu using Persistent Symbol - highlight current page


(Bethany) #1

I’m updating a website I was in the process of developing to take advantage of some of the new features with Hype3 Pro. I have a navigation menu, made up of buttons, at the top of the page which I’ve converted to a persistent symbol, since it is on every scene. What I’m trying to figure out is how I can change the text color for the button that corresponds to the current scene the user is on.

To clarify, the text color of the buttons is white. When viewing the Order scene, I want the text color to be blue.


(Greg) #2

This might get you started ( I used it on the “On Mouse Click” in the action Inspector)…

x = hypeDocument.currentSceneName()

if (x == 1) {document.getElementById(“buttonOne”).style.color = “blue”}

if (x == 2) {document.getElementById(“buttonOne”).style.color = “black”}


(Hans-Gerd Claßen) #3

you can work with timelines within the persistant symbol. create custombehaviour to play each. this can be called outside of the symbol on sceneload. kind of work, but without customscripting :smile:


#4

Here’s one way to do this using relative timelines within a persistent symbol, and linking to custom behaviors:

symboltest.zip (43.4 KB)

All the navigation occurs within the persistent symbol, but the ‘go to’ links could potentially be outside of the symbol because custom behaviors are flexible like that.