[DHTML] XMLMenu - Easy to set, configure & use dropdown menu specified in an XML file

[ricardogp]

1) CODE TITLE: XMLMenu V 1.0

2) AUTHOR NAME/NOTES: Ricardo Gonzalez

3) DESCRIPTION: An easy to set, use and configure dropdown menu through an XML, CSS files and few lines in your HTML page. Due to space, the PDF manual couldn't get uploaded, so write an e-mail to ricardo_agp@hotmail.com, and I will be glad to send it to you.

4) URL TO CODE:

or, ATTACHED BELOW (see #3 in guidelines below):

[blm126]

I'm impressed with this for the simple reason I have no clue how most of it works. I mean I get the general gist load with AJAX-> apply XSLT-> display, but the specifics are confusing.
I have a few suggestions though. I'm not sure I like the way the menu looks. The whole bolding on hover makes the page "jump", and I'm not sure if I like the colors.
And now the questions. Won't this make your page hard to crawl for search engines? And what is the benefit of using XML?

[ricardogp]

Good day Brady.

Thanks for your oppinions.

I developed the XMLMenu as a way to practice with XML files and JavaScript. The XMLMenu uses only JavaScript (xmlmenu.js), an XSLT file (xmlmenu.xsl) to transform the XML document (could be a file like "xmlmenu-demo.xml" or a XML string document) and a CSS file (xmlmenu.css) to set the Look & Feel of the HTML menu generated.

About your questions:
- About the "Look & Feel" 's suggestions, it is only necessary to change some values in the CSS file (xmlmenu.css) to change the appearance of the generated menu, more details in the manual attached to this reply.

- Won't this make your page hard to crawl for search engines?
I developed the XMLMenu to practice XML management with JavaScript, also believe that it could be useful for anyone, so I wanted to publish it.
I found this web site (DynamicDrive) to publish it, maybe I didn't publish it in the best possible way, so please if you have any suggestion I would be glad to hear it.

- And what is the benefit of using XML?
I know that in Internet there's a lot of DHTML dropdown menus, with even much more functionalities, but I tested some of them, and saw that they are little complicated to set and configure (unless for the person -not an HTML expert- who wants to put a menu in its web page), so I created this DHTML menu to people who are looking for a simple and free menu in their web pages.

I believe the main benefit of using an XML document is the easy way to set (add/remove or change) the items in your menu, like the name to display, the page -or javascript- to load when click on the item, and the tooltip to show. You may "play" with the XML document code showed in the textarea when open the "xmlmenu-demo.html" file contained in the "xmlmenu.zip".

Finally, I must to tell you that the code in general is well documented, so you may look at it to have an idea of how it works, also, attached to this reply is the PDF manual in a ZIP file (xmlmenu manual-en.zip) that explains how use and configure the XMLMenu.

I hope this reply answer your questions.

Regards.

Ricardo González P.

[blm126]

I believe the main benefit of using an XML document is the easy way to set (add/remove or change) the items in your menu, like the name to display, the page -or javascript- to load when click on the item, and the tooltip to show.

Yes, but can't the same be said of HTML instead of XML? Another advantage of HTML is that text browsers will just display a list of links. Take this code for example

<ul>
<li><a href="page.html" title="Title Text">Link</a></li>
</ul>

[ricardogp]

Thanks for your comments.

I know that you may modify the HTML code too. But remember that XMLMenu writes a HTML's menu, I'm just creating the HTML code from the XML document through the XSLT file, and that code is inserted in a DIV element. If you want, you may write it to a file and then work on it.

You may see generated HTML writing in the line 163 of the "xmlmenu.js" file:
alert("This is the generated HTML Menu code\n" + generatedXMLMenu);

One final comment: I saw several DHTML menus on internet, and some of them need that you create and add new objects in an specific JavaScript’s array, and remember that my idea of this XMLMenu is to be easy to set, use and configure, do not forget that one of the main XML document's characteristics, is that the document must be easy to read by humans, so I believe this is more natural -for non HTML experts- than write HTML code.

I would appreciate any comments you have.

Have a good day.

Ricardo González P.

[blm126]

Is it possible to have more than one level of submenus? If not, you should add that!(I did read through the manual,but didn't see that mentioned anywhere)
Also, what browsers is this tested in? Because in Opera 9 the "Javascript Link" didn't do anything.

P.S. I see we like the same text editor(Notepad++)

[ricardogp]

Once again, thank for your comments, and I hope the manual have give you a some lights about how to use the XMLMenu.

The XMLMenu creates just one level menu (menu's items, and its subitems), maybe in a future version, but it's possible that the main files of the XMLMenu will change (XML definition schema to include the item's subitem's subitem's subitem's... and so on, the XSLT, JavaScript, and CSS file)... remember that I wrote a "moral license" where people is free to use it and make changes on its structure, but telling me about it, so there could be a joint point to include the best ideas/changes...

I just tested the component on IE 6 and FireFox 1.0... I will test it in other browsers (Opera, Safari and Netscape) to see how it works, thanks for testing it.

Thanks again for your comments

Ricardo González P.

PS: Yes, Notepad++ rocks!!!

[blm126]

FireFox 1.0? Why not Firefox 1.5? Maybe I will play around with this source a little to learn how XSLT works...I'll be sure to email you if I make any useful additions.

[ddadmin]

Technically this may be an interesting script to study for people learning to manipulate XML via JavaScript. But I think in its current form it's not yet practical enough to be considered a script for the masses to actually use on their site. The user doesn't care about how the menu works, but looks at aesthetics, compatibility, features etc.

[ricardogp]

That's true, just remember that I did this script to practice XML management using JavaScript, the "xmlmenu.js" file include a few functions to read XMLs files and transform it with a XSLT, that can be use it in other components.

Maybe other JavaScript DHTML menus could use the idea to define the menu from an XML file (I found an XML menu based, but for Flash Macromedia or ASP.NET, not JavaScript), and the XMLMenu could be use for simple purposes, like a Favorite's menu homepage (as in the xmlmenu-demo.html file)

Thanks for your comments.

PS: Brady, I updated my FireFox to 1.5.0.7 and it works too.