XML Navigation Menu that Remembers Expanded Nodes

[kirupa]

Hey everyone,
Somebody asked me (nicely!) a few weeks ago whether I would explain how to make a drop-down menu that remembered which nodes were expanded. The idea was to have a navigation menu on a web site that did not reset to a collapsed state each time a new page was loaded.

I have attached the source files for that :)

Cheers!
Kirupa :nat:

[dgates]

Hi Kirupa, Nice work. One question though, is there a way to collapse all other nodes when you click on a new node? And lastly when you click on a child item, is there a way to keep it highlighted so you can see which menu item you selected even though you returned from another page within the website? Thanks for your help!
Derek

[kirupa]

Hi derek - both of those changes are possible, and they don't require too many modifications to the existing code. I'm a bit busy with some other things at the moment, but I'll try to post something later (0-3 days).

:alien2:

[curious weasel]

Wow !
Really nice expanding menu, really well done !!

Right then, is there a way of having *some* of the links expanding, but where there is NO expansion, the item is a link in itself ?

example xml follows .....

{parent}name
{child}
{title}kirupa.com{/title}
{link}http://www.kirupa.com{/link}
{/child}
{/parent}
{parent}another name
{link} insert link here {/link}
{/parent}

[kirupa]

There is a way to do that, but unfortunately the current version does not support it. I wish I can give a timeline on when I will be able to fiddle with this project some more, but in the near future I will have a version that addresses the issue that you and dgates mention :)

[BetaWar]

Sorry to have to ask this, but is there any easy (ish) way to make it so only one menu can be open at one time?

I mean that if I click one menu, it opens, then if I click on another one th previous menu closes before the new one opens.

I have been trying to add on but I am terrible with AS at this point.

[gargamuza]

Hello Kirupa. I just realize that a question I ask on your blog about this menu was asked by other people here. Have you had any chance to check that out?

Thank you very much

dani

[kirupa]

garga - unfortunately not, and I'm busy working on some other things at the moment. I will *try* to look at this weekend, but I can't make any guarantees :(

[ronnie]

That's great, Kirupa. I could certainly use something like this. Thank you.

[vini]

nice work Kirupa

[michael fogarty]

Hi All,

I have been tinkering with the code and I to need to collapse the child nodes when a new parent is open. Has anyone done this yet I see serveral post on this but no solutions yet.

Thanks for any input.

Michael

[girasquid]

I've been trying to download the .zip file, but I'm not having any luck...constantly getting a 'no permissions, are you logged in?' page.

[michael fogarty]

I've been trying to download the .zip file, but I'm not having any luck...constantly getting a 'no permissions, are you logged in?' page.

I needed to be logged in to download it that was yesterday.

[girasquid]

I needed to be logged in to download it that was yesterday.

Yeah...it's telling me I need to be logged in when I am. :asleep:

Edit: Nevermind, it's working now.

[daJunkCollector]

Kirupa,

I am seeking a tutorial to create a side navigation system like the one found at http://www.worldofwarcraft.com. I stumbled upon this forum and found your creation. It is very nice, but it requires flash. I know flash and actionscript fairly well. I do not fully understand why you used xml to create this menu. Why not just create the entire menu with flash and actionscript since you are already dependent on the .swf?

Thanks

[daJunkCollector]

Kirupa,

I am seeking a tutorial to create a side navigation system like the one found at http://www.worldofwarcraft.com. I stumbled upon this forum and found your creation. It is very nice, but it requires flash. I know flash and actionscript fairly well. I do not fully understand why you used xml to create this menu. Why not just create the entire menu with flash and actionscript since you are already dependent on the .swf?

Thanks

Sorry, I think I see the logic here. XML is used, in your example, so that the list remembers which items are expanded and which are closed. Is this correct?

[kirupa]

Sorry, I think I see the logic here. XML is used, in your example, so that the list remembers which items are expanded and which are closed. Is this correct?
The main reason I use an XML file is because I can easily edit an XML file and have the menu update to display the new information. If I had the links hard-coded in the SWF file, if I ever decided to update/add/delete links, I'll have to go back into Flash, modify the links, and then re-upload the SWF file. As you can see, the XML approach is a lot simpler to update and maintain :)

[suachua]

hi Kirupa
I want do make the menu 3 levels, you can example other for me, thanks
(I'm vietnamese, I don't know language English well, but I like flash, I want to learn it)

[MADenigma]

This menu is really very interesting, thanx Kirupa. Are you using the LSO to achieve that ?

[gargamuza]

By using XML you can update/modify/erase items on the menu without touching the flash file at all. The SWF will build up the menu basd on the info from the XML file dinamically. It makes the SWF ligther and the menu easier to update.




Kirupa,

I am seeking a tutorial to create a side navigation system like the one found at http://www.worldofwarcraft.com. I stumbled upon this forum and found your creation. It is very nice, but it requires flash. I know flash and actionscript fairly well. I do not fully understand why you used xml to create this menu. Why not just create the entire menu with flash and actionscript since you are already dependent on the .swf?

Thanks

[shintakenji]

Hi,

I am using this menu and everything is great, but for some reason when I embed the flash file into html the links stop working (ie homepage.html to page1.html). It can only open pages on a separate window. How can I get it to open files in itself (_self) instead of (_blank). I have included my working files. Any help would be great.

Thanks

[ANEWIDEACo]

Yay Kirupa! Thanks for making this.

But...

how do you modify this to not use XML and instead go to frames inside movie clips?

J/W :D

[archie]

For the most part I can understand this menu system example but I am unable to completely grasp part of what kirupa has developed.
Specifically this line (seen in its context below):

parentMovieClips.push(emptyMC.attachMovie("parent_mc", "p"+i, emptyMC.getNextHighestDepth(), {_x:155*i, _y:10, parentName:parentArray[i].attributes.title, children:childArray, currentNumber:i, expand:toExpand}));


//
// Display the parent XML data from the raw XML input
//
function parseXML(links:XML) {
var parentArray:Array = links.firstChild.childNodes;
for (i=0; i<parentArray.length; i++) {
var childArray:Array = parentArray[i].childNodes;
var toExpand:Boolean = false;
if (expandedList[i] == true) {
toExpand = true;
}
parentMovieClips.push(emptyMC.attachMovie("parent_mc", "p"+i, emptyMC.getNextHighestDepth(), {_x:155*i, _y:10, parentName:parentArray[i].attributes.title, children:childArray, currentNumber:i, expand:toExpand}));
}
}
kirupa, can you or anyone else explain this line to me? It appears to be really solid and efficient coding - which I just can't get.

[websmythe]

Thanx for the menu. It's great.

I'm trying to use it in an app with the XML thumbnail gallery, but can't get it to work.
I used Scotty's version of the crossfade gallery as the gallery,

http://www.kirupa.com/forum/showpost.php?p=1796786&postcount=2

The only mod I've made to it is that it pops up, instead of dropping down.

The code sits in its own named frame after the 'gallery' frame and I'm using a button to gotoAndPlay("menu"). trace() shows me that the XML loads just fine, but nothing is displayed?? ...and I'm a bit thin when it comes to Frames and Depths.

Any help definately appreciated.

[MattPJA]

Kirupa,
This menu is great. Is there anyway where you could arrange this menu for 3 levels? Your help is much appreciated.

-Matt


Hey everyone,
Somebody asked me (nicely!) a few weeks ago whether I would explain how to make a drop-down menu that remembered which nodes were expanded. The idea was to have a navigation menu on a web site that did not reset to a collapsed state each time a new page was loaded.

I have attached the source files for that :)

Cheers!
Kirupa :nat:

[tommiwalsh]

Hi Kirupa,

Thanks for that, I was nearly considering iframes! Just two questions, is there a way to tint the text on rollover, and how would I edit the xml so that if there is no sub nav items the parent nav can have a link? I've tried like this -

<parent title="Kirupa" link="http://www.kirupa.com" />

which i thought would work ok but to avail?

Thanks again,

Tom