Global Navigation v2.16: Reparenting buttons
December 20, 2010 by: Christian
I’ve been asked a few times how to set up a navigation where some groups are decoupled from each other. Let’s say, you have a main navigation on the left side, and when you select a menu item, show the sub navigation on the right side. What you have to do in such a case is reparenting the buttons. By default, they are all inside the same movie clip. But of course you can easely take them out and move them where you need them. Check it out here, Example Nr. 18. Just download the example files in the download section and examine the code inside the FLA file.
Another request was: How can you change the button label at runtime, let’s say at roll over? Check it out here, Example Nr. 17. Again, the FLA file of it is in the demo files download.
Be sure to download the newest classes, version 2.16, in order to get the features mentioned above.
Happy navigating!
Christian
Thank you! =)
Hi Christian,
First of all I want to thank you very much for your work and generosity !
I have a fairly big project with tight schedule to do and before diving into code I gave google a chance to see if I could find something to help me out.
I can’t believe I found your global nav system (and GAIA framework) which, at first look, seem to be just what I need.
I’ve downloaded your global nav for GAIA project and ran it. It worked like a charm.
Now I look into details to see if I will run into incompatible stuff for my projet and how to do achieve functionnalities and a few things bother me.
The application I have to do has a lot of content (over 350 swf “slides”) and rely heavily on navigation menus.
I have one global drop down menu to navigate anywhere from every page (this one should not be a problem) and, in some pages, a vertical menu of the same full or partial arborescence.
For example the whole tree can be represented in the drow down menu and in the vertical menu on the home page. Leaves can lead to swf content or sub vertical menus (part of the full one).
I think the vertical menus could be a special navPage that use GAIA to retrieve the current branch XML and instanciate your nav system from (please tell me if I’m wrong).
But in you example GAIA xml and navigation xml are separated. With this organization I would need 3 xmls (site, drow down nav and vertical nav) which will be a hassle to maintain as content is highly subject to changes before the master.
I’d prefer to have all in a single big xml as the tree is the same for each functionnality.
Is it dooable ? Taking a look at the actual code I would say I’d have to customize the navigation parser to make “navigation” and “button” nodes parameters ?
Thanks in advance for your help.
Julien
Hi Julien
Did you have a look at my own framework “Fleb”? http://www.turtlebite.com/docs/fleb-framework-home There you can have just one XML file, it’s basedon the global navigation. And it’s even possible to create the navigation structure “on-the-fly”, it’s all in the demo project. I turned away from Gaia and built my own framework because I was not happy with how Gaia handles SEO.
Thanks Christian,
I liked the patterns and concepts in GAIA and SEO is not really a concern for this project (as it’s more an application than a website).
Anyway I’ve had a look at your framework and demo project. Il looks interesting but I still don’t see how I can simply build different looking menus on the same tree structure (without hacking things).
Hi Julien
You can have a different button for every single menu item, because they are individual SWFs. But you still need separate XML files for Gaia and the Global Navigation.
Hi Christian,
Sorry if was unclear but I’m not talking about different buttons for single menu items but about (visually) different global navigation systems for the same data structure.
Speaking of code maybe if nodes names (navigation, button etc.) were not fixed in the parser it could be possible for example to have a node button1 and button2 for each page and instanciate two different navigation managers one parsing button1 nodes and the other parsing button2 nodes (so you can have for example a drop down menu and a vertical menu representation of the same tree).
You could simply get the siblings and arrange them the way you need it by yourself. You could load it into different containers (see re-parenting example), hide those containers when needed, etc. Also look here: http://www.turtlebite.com/docs/global-navigation2-public-methods#getsiblings Then there would be no need to change the code of the NavigationParser. But it would anyway be best if you have it all in one NavigationManager, so the dependencies don’t get broken.
Thanks for your answer Christian.
It looks like it’s would be too complicated (and getSiblings won’t avoid the need to have different buttons and so xml attributes for the second menu).
Having two different menus to access the pages is a client requirement (and I don’t see any good reason why it could’nt be so). I don’t know what you mean by dependencies been broken. I think I’m confusing your global naivation system with “menu”.
I guess I’ll have to write my own solution.
Anyway thanks for your time and have a nice day !
Even though I think it is possible it may be too hard to wrap your head around the global navigation with a tight deadline ahead. It’s possibly faster if you write your own solution for this special case.
Good luck and you too have a nice day!
Greetings. Is there a posibility to provide the source files of the gaia / global navigation demo?
I toyed around with your setup, however doing this in gaia seems a bit obscure for me at this given point. I am referring to this file http://www.turtlebite.com/downloads/global_navigation/gaia/#/home
I’ve downloaded the examples zip but i can’t seem to locate the gaia demo.
Thanks in advance
Hi Peter
It’s all here, a complete Gaia site with the global navigation: http://www.turtlebite.com/docs/global_navigation_download
Cheers,
Christian
Hello,
Thank you for this project !
I’m trying to embed global navigation with accented letters (because I’m French) :
é è ê ô…
How could I do that in the xml ?
Hi
I have them same problem, I’m swiss (german umlaute: ä ö ü…)
This should work, can you send me an example? Or a link to your xml file?
Cheers,
Christian