Creating a Menu Using XSLT, XML, and JavaScript
page 2 of 4
by Haissam Abdul Malak
Feedback
Average Rating: 
Views (Total / Last 10 Days): 34086/ 42

XML Document

In this section we will create an XML document (Menu.xml) with "MenuItems" as the root element.  Place the items you want to show in the menu under the root element then create under each item its proper sub items. (In this example we will have four items as main menu items and each one will have three sub items.)  Here is how the XML document will look when it is finished.

Listing 1

<?xml version="1.0" encoding="utf-8" ?> 
<MenuItems>
<Item1>
<SubItem>FirstSubItem1</SubItem>
<SubItem>FirstSubItem2</SubItem>
<SubItem>FirstSubItem3</SubItem>
</Item1>
<Item2>
<SubItem>SecondSubItem1</SubItem>
<SubItem>SecondSubItem2</SubItem>
<SubItem>SecondSubItem3</SubItem>
</Item2>
<Item3>
<SubItem>ThirdSubItem1</SubItem>
<SubItem>ThirdSubItem2</SubItem>
<SubItem>ThirdSubItem3</SubItem>
</Item3>
<Item4>
<SubItem>ForthSubItem1</SubItem>
<SubItem>ForthSubItem2</SubItem>
<SubItem>ForthSubItem3</SubItem>
</Item4>
</MenuItems>

View Entire Article

User Comments

Title: something   
Name: else
Date: 2012-12-17 5:55:34 PM
Comment:
yay its a comment
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:32:31 PM
Comment:
[/pre]Cheap NFL,NBA,MLB,NHL
[url=http://www.jersey2shop.com/]Jerseys From China[/url]
[url=http://www.jersey2shop.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jersey2shop.com/]cheap China Jerseys[/url]
[url=http://www.jersey2shop.com/]Sports Jerseys China[/url]
[url=http://www.jersey2shop.com/NFL-Jerseys-c68/]NFL Jerseys China[/url]
[url=http://www.jersey2shop.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
NHL Jerseys China
[url=http://www.jersey2shop.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[/pre]
[pre]We Are Professional China jerseys Wholesaler
[url=http://www.cheapjersey2store.com/]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url= http://www.cheapjersey2store.com/]2012 mlb all atar jerseys[/url]
[url= http://www.cheapjersey2store.com/ [/url]Cheap China Wholesael[/url]
[url= http://www.cheapjersey2store.com/]Wholesale jerseys From China[/url]
[url=http://www.cheapjersey2store.com/]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.cheapjersey2store.com/]Jerseys From China[/url]
[url=http://www.cheapjersey2store.com/NFL-Jerseys-c68]NFL jerseys China[/url]
[url=http://www.cheapjersey2store.com/NHL-Jerseys-c96/]NHL Jerseys China[/url]
[url=http://www.cheapjersey2store.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
[url=http://www.cheapjersey2store.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]
[url= http://www.cheapjersey2store.com/]China Jerseys[/url],Free Shipping
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.jerseycaptain.com/]cheap jerseys sale online [/url]
[url= http://www.jerseycaptain.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jerseycaptain.com/NFL-Jerseys-c68]cheap NFL jerseys China[/url]
[url=http://www.jerseycaptain.com/NHL-Jerseys-c96/]NHL Jerseys C
Title: hyperlink   
Name: pl
Date: 2009-11-12 3:21:59 AM
Comment:
Hi,

I would like to know how to make hyperlink for each items.

Could you show it to me?

Thank you.
Title: XSLT   
Name: Maheswari
Date: 2009-06-18 5:44:39 AM
Comment:
The Articles is very usefull to understand the concept but i want to store the xslt into the cache for further usage.Those details are not available in this.Can u pls provide the details??
Title: Menu items   
Name: deepali
Date: 2009-05-12 1:52:19 AM
Comment:
hey,
it's really a nice code. But want to know that how can i fatch a perticular item in menu from XML
Title: Menu items   
Name: Milind
Date: 2008-12-16 6:52:40 AM
Comment:
Hii actualyy i wanted to create a dynamic menu using xml & make templates of dat menu(sort of reusability or for flexibility) how can i do dat(like we do using .resx file in .net) pls help me.
Title: Nellre   
Name: Nuthan
Date: 2008-07-26 5:12:47 AM
Comment:
Glad to inform you

Thakns
Nuthan
Title: ComboBox   
Name: XSL_KID
Date: 2008-07-03 9:51:56 AM
Comment:
Hi WANT TO DO THE SAME THING THE AUTHOR HAS EXPLAINED. But I want to use combo box instead building menu. Can some one point to right source for help. The completely new to creating xsl documents and this article is great. Easy to follow and understant what he is doing. Any help is greatly appreciated.
Title: SSL   
Name: Rafi
Date: 2008-01-10 2:41:46 PM
Comment:
How to apply SLL in Asp.Net 2.0 Projects.

I want complete solution.


Thanks and Regard
Title: Thank you   
Name: Haissam Abdul Malak
Date: 2007-11-09 3:56:35 AM
Comment:
Glad to hear that it helped you :)
Title: a   
Name: a
Date: 2007-11-09 2:53:13 AM
Comment:
Thank you
Title: Nice! it help me   
Name: Aswattha
Date: 2007-07-12 4:51:23 AM
Comment:
Nice topic,
Thank you
Title: Creating a Menu Using XSLT, XML, and JavaScript   
Name: Fred
Date: 2007-05-25 1:36:36 AM
Comment:
Excellent article!
Even though it was written awhile ago and little things have changed, it's still the best explanation I've found on the web. You should expand & update this one (like XslCompiledTransform should now be used instead of XslTransform). Thanks again for a great article!
Title: how to display horizontal menu uisng XML,XSL and JavaScript   
Name: ASHA
Date: 2007-03-12 2:25:44 AM
Comment:
Please Give article on building horizontal menu using XML,XSL and JavaScript
Title: nice article   
Name: jonathan parker
Date: 2007-02-28 4:51:30 PM
Comment:
Haissam, great article, thanks for taking the time to share some of your knowledge! keep up the good work. -- jp
Title: Fine   
Name: Justin Check
Date: 2007-02-09 5:02:24 AM
Comment:
It is very nice
Title: Nice   
Name: Joydip
Date: 2007-01-04 12:40:25 AM
Comment:
Excellant article. Please find my articles at http://aspalliance.com/author.aspx?uId=58780
Title: Re:resulting HTML is Dirty with many HEAD Body ,Script file   
Name: Haissam Abdul Malak
Date: 2006-12-08 5:32:39 PM
Comment:
Thank u patil for your notice, i was busy these days anyway i took a quick look over the project and i saw the dirty html. As soon as i can, i will solve this and get back to u.

Best Regards
Title: resulting HTML is Dirty with many HEAD Body ,Script file   
Name: patil
Date: 2006-12-07 2:20:33 AM
Comment:
See the view source of the resulting HTML which is Dirty with many HEAD Body ,Script section repeated many times
Title: Thank U   
Name: Haissam Abdul Malak
Date: 2006-12-03 6:44:24 AM
Comment:
i would like to let you know that all your comments are appreciated.

Best Regards,
Title: Congrats   
Name: Nehme Gedeon
Date: 2006-12-03 3:52:42 AM
Comment:
Great article man, Clear and very easy to understand.

Congrats,

Nehme
Title: Great Idea   
Name: Rana D
Date: 2006-12-01 1:29:18 PM
Comment:
What you have just turned the light on is one of the problems we always face and try to solve. It is a great way of Solving or analyzing it this way and I want to congratulate you. We faced this problem and i suggested your idea, and we used both: your way when the xml is not a big file and user control as Keyvan Nayyeri said it is large.
Thus, I would like to thank you ;) and keep your efforts on, we will need them one day.
Best Wishes!
Title: Lecturer   
Name: Kumar
Date: 2006-11-30 5:17:44 AM
Comment:
It is very useful
Title: Thank you   
Name: Haissam Abdul Malak
Date: 2006-11-29 9:21:00 AM
Comment:
Thank u guys for your comments, i hope this article was informative.

Best Regards,
Title: Congratulations   
Name: Bilal Hadiar [MVP]
Date: 2006-11-27 6:05:10 AM
Comment:
Congratulations for your first article Haissam!!

It is nice to see the interaction between XSLT + JavaScript!!

Good luck and looking for more articles ;)

Regards
Title: Re:Caching   
Name: Haissam Abdul Malak
Date: 2006-11-27 1:44:00 AM
Comment:
Dear,
the purpose of this article was to show a demonstration about XSLT capabilites eventhough you are right.

Thank you for your comment.
Title: Caching   
Name: Keyvan Nayyeri
Date: 2006-11-27 12:34:45 AM
Comment:
Haissam,

Don't forget an important point here. Using XSL Transforms to build a menu can have a performance cost (especially for large XML files and complicated transforms) so it's absolutely better to apply this in a user control and use cache on server to improve performance.

Good article :-)

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 3:41:17 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search