Click here to Skip to main content
Click here to Skip to main content

A well look HTML menu using XML and XSLT

By , 25 Jul 2006
 

Sample Image - htmlmenu_using_xml.jpg

Introduction

Recently, I wrote an HTML menu using XML and XSLT. It uses IE "CreatePopup". The whole XSL file is less than 10k.

Usage

Just create an XML described in the sample code. I think it's simple and easy to understand. Just try it.

The following is a description of CreatePopup.

The last type of special Window Form supported by Microsoft is a generic form of pop-up Window. Creating a pop-up is very simple—just use the Window.createPopup(), which takes no arguments and returns a handle to the newly created Window.

var myPopup = window.createPopup();

These Windows are initially created, but are hidden. They are later revealed using the pop-up object's show() method and hidden using hide() as shown below:

myPopup.show(); // displays created popup
myPopup.hide(); // hides the popup

The value of Microsoft's special pop-ups may not be obvious until you consider that you have complete control over their appearance, allowing you to even remove the chrome of the displayed Window. The authors do not encourage chromeless Windows at all, despite the rise of various JavaScript libraries allowing developers to create customized GUI systems. The usability downsides of having unique Windows, scrollbars, and other GUI widgets for your site far outweigh the visual value of these widgets—use with caution.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Neeker007
Product Manager
China China
Member
Neeker
Beijing

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
Questiondid you tested it on IE8?memberAlessandro3 Dec '09 - 22:26 
I have troubles using it on IE8
 
The third level menu position is wrong
AnswerRe: did you tested it on IE8?memberNeeker0076 Dec '09 - 14:23 
No, didn't. Only tested on ie6. not work for a long time.
 
Neeker
Beijing

QuestionVery good stuffmemberelinlee10 Aug '08 - 23:07 
Thanks for providing such a good example.
I have a little question:
 
Is there any chance that I can change the source of an iframe within the same page?
What I mean is that I want to place your menu and an iframe, say an iframe named 'mainpage', in one page. When the menu item is clicked, the selected web site or html page is shown in the 'mainpage'.
AnswerRe: Very good stuffmemberNeeker00712 Aug '08 - 1:14 
Just try "window.top['mainframe'].location = 'url' ". I did not test it.
 
Neeker
Application Development Manager
Beijing, China

GeneralVery Coolmemberbalamasti28 May '08 - 10:52 
Seriously it is very cool.... i m customizing for my need.... thankyou so much
QuestionHow to use itmembermrkashifali19 Jan '07 - 0:36 
Dear I am new to XML and stuff. Can u plz give a working example how and where to use the xsl and xml files
 
Thank U
 

KK
AnswerRe: How to use itmemberNeeker00722 Jan '07 - 16:30 
en...
 
just down load example source file, open the xml file in IE, you can see the menu.
 
or put the xml and xsl file to webserver, open it just like http://.../**.xml
 
or you can modify the xml file and see the result menu.
 
you can generate xml file by asp, .net or java on server dynamiclly, and so on.
 
Neeker, Beijing China

GeneralGreat menus!!! but causes right click to be diabledmemberMCofer8 Jan '07 - 12:08 
In my ASP.NET2.0 the JScript is disabling the right click default menu.
I can't do Copy/Paste on my web form.
Do you have any suggestions?
 
Thanks
Mcofer
 
Mcofer
Application Developer
Halliburton Energy Services

GeneralRe: Great menus!!! but causes right click to be diabledmemberMCofer8 Jan '07 - 12:45 
I may have found the solution
I removed the oncontextmenu="return false;" from the <body> tag in the .xsl.
Everything still look OK. Do you know of any problems this may cause?

 
Mcofer
Application Developer
Halliburton Energy Services

GeneralRe: Great menus!!! but causes right click to be diabledmemberNeeker0078 Jan '07 - 21:57 
I thinck it will still work correctly. I use "return false" on <body> tag , just want to disable boring default context menu.
 
Neeker, Beijing China

GeneralThank youmemberwas830914 Aug '06 - 9:22 
you've potentially saved me alot of time! Thank you.

GeneralRe: Thank youmemberNeeker00714 Aug '06 - 16:24 
sugestions and improvement are expected.
 
Neeker, Beijing China

GeneralRe: Thank youmemberwas830927 Dec '06 - 14:34 
Neeker,
Thanks again, sorry for the long delay. I'm a old mainframe assembler guy so the curve is steep. got stuck with createpopup in IE7 and Mozilla. stumbled across the Dojo widgets. Any reason I should avoid using Dojo? I want to use xsl to transform existing xml into a nice menu like you've made, and have the page make more xml of the same kind as the original xml. Your code was very instructional and set me off in good directions, thanks.
GeneralUsing the stylesheet in dot NETmemberchris rumel7 Aug '06 - 5:04 
How would one go about using the stylesheet against dynamically created XML in a dot NET Custom Control?
 
Chris?
GeneralRe: Using the stylesheet in dot NET [modified]memberNeeker00714 Aug '06 - 16:21 
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="menu.xsl" ?>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

...
 
pay attention to second line.
 

-- modified at 22:22 Monday 14th August, 2006
 
Neeker, Beijing China

Generalvery nicememberTaha Zayed29 Jul '06 - 8:47 
very nice
GeneralProblem with Firefoxmembertrne26 Jul '06 - 6:39 
Firefox (1.5.0.4) asserts a lot of jscript errors ...
AnswerRe: Problem with FirefoxmemberNeeker00726 Jul '06 - 16:09 
It's suitable for IE5.5+ only.
 
I think that firefox does not support "CreatePopup". I wrote this because div can't lay over a selection box, but IE's popup window can do.
 
Neeker, Beijing China

GeneralRe: It's designed to use in enterprise environmentmemberNeeker00726 Jul '06 - 16:13 
So firefox is not supported yet. I have not tested it on IE7.
 
Neeker, Beijing China

GeneralRe: It's designed to use in enterprise environmentmemberLouisa Chen7 Aug '07 - 19:14 
i've tested it in IE7 and it works just as expected.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130523.1 | Last Updated 26 Jul 2006
Article Copyright 2006 by Neeker007
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid