Teknologi 3D pada Halaman WEB: Menu dengan XML

HAPUS KODE BR / pada script!

Ini adalah cara membuat menu menggunakan xml, dan ketik kode di bawah ini pada notepad dan nama filenya (menu.xml) yang nantinya untuk Anda buka di Internet Explorer.

<?xml version="1.0"?>
 <?xml:stylesheet type="text/xsl" href="menus.xsl"?>
 
 <TOPICLIST TYPE="Web Dev References">
 
 <TOPICS TYPE="DHTML">
 	<TOPIC><TITLE>Objects</TITLE><URL>/workshop/author/dhtml/reference/objects.asp</URL></TOPIC>
 	<TOPIC><TITLE>Properties</TITLE><URL>/workshop/author/dhtml/reference/properties.asp</URL></TOPIC>
 	<TOPIC><TITLE>Methods</TITLE><URL>/workshop/author/dhtml/reference/methods.asp</URL></TOPIC>
 	<TOPIC><TITLE>Events</TITLE><URL>/workshop/author/dhtml/reference/events.asp</URL></TOPIC>
 	<TOPIC><TITLE>Collections</TITLE><URL>/workshop/author/dhtml/reference/collections.asp</URL></TOPIC>
 </TOPICS>
 
 <TOPICS TYPE="CSS">
 	<TOPIC><TITLE>Attributes</TITLE><URL>/workshop/author/css/reference/attributes.asp</URL></TOPIC>
 	<TOPIC><TITLE>Length units</TITLE><URL>/workshop/author/css/reference/lengthunits.asp</URL></TOPIC>
 	<TOPIC><TITLE>Color table</TITLE><URL>/workshop/author/dhtml/reference/colors/colors.asp</URL></TOPIC>
 </TOPICS>
 
 <TOPICS TYPE="XML">
 	<TOPICS TYPE="XML DOM">
 		<TOPIC><TITLE>Developer's guide</TITLE><URL>/xml/XMLGuide/default.asp</URL></TOPIC>
 		<TOPIC><TITLE>Objects</TITLE><URL>/xml/reference/scriptref/XMLDOM_Objects.asp</URL></TOPIC>
 	</TOPICS>
 	<TOPICS TYPE="XSL">
 		<TOPIC><TITLE>Developer's guide</TITLE><URL>/xml/XSLGuide/default.asp</URL></TOPIC>
 		<TOPIC><TITLE>Elements</TITLE><URL>/xml/reference/xsl/XSLElements.asp</URL></TOPIC>
 		<TOPIC><TITLE>Methods</TITLE><URL>/xml/reference/xsl/xslmethods.asp</URL></TOPIC>
 		<TOPIC><TITLE>Pattern syntax</TITLE><URL>/xml/reference/xsl/XSLPatternSyntax.asp</URL></TOPIC>
 	</TOPICS>
 </TOPICS>
 
 </TOPICLIST>

Setelah dibuat file dari kode di atas, sekarang copy kode di bawah ini pada notepad dan diberi nama filenya yaitu (menus.xls)

<?xml version="1.0"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
 
 
 
 <xsl:template match="/">
 	<HTML>
 	<HEAD>
 	<TITLE>Menu <xsl:value-of select="TOPICLIST/@TYPE" /></TITLE>
 	<LINK REL="stylesheet" TYPE="text/css" HREF="menus.css" />
 	<SCRIPT LANGUAGE="JScript" SRC="menus.js"></SCRIPT>
 	</HEAD>
 	<BODY>
 	<H1>Menu <xsl:value-of select="TOPICLIST/@TYPE" /></H1>
 	
 	
 
 	<DIV ID="divMenuBar">
 	<TABLE ID="tblMenuBar" BORDER="0">
 	<TR>
 	<xsl:for-each select="//TOPICS[TOPIC]">
 		<TD CLASS="clsMenuBarItem">
 			<xsl:attribute name="ID">tdMenuBarItem<xsl:value-of select="@TYPE" /></xsl:attribute>
 			<xsl:value-of select="@TYPE" />
 		</TD>
 		<xsl:if test="context()[not(end())]">
 		<TD>|</TD>
 		</xsl:if>
 	</xsl:for-each>
 	</TR>
 	</TABLE>
 	</DIV>
 		
 	
 
 	<xsl:for-each select="//TOPICS[TOPIC]">
 		<DIV CLASS="clsMenu">
 		<xsl:attribute name="ID">divMenu<xsl:value-of select="@TYPE" /></xsl:attribute>
 			<DIV CLASS="clsMenuSpacer"></DIV>
 			<xsl:for-each select="TOPIC">
 			<DIV>
 			<A TARGET="_new">
 				<xsl:attribute name="HREF">http://msdn.microsoft.com<xsl:value-of select="URL" /></xsl:attribute>
 				<xsl:value-of select="TITLE" />
 			</A>
 			</DIV>
 			</xsl:for-each>
 		</DIV>
 	</xsl:for-each>
 
 	<BUTTON ONCLICK="window.alert(document.body.innerHTML);">View HTML</BUTTON>
 	</BODY>
 	</HTML>
 </xsl:template>
 
 </xsl:stylesheet>

Setelah itu copy kode di bawah ini dan paste pada notepad dan diberi nama filenya yaitu (menus.css)

Kemudian yang terakhir buka notepad kembali, copy kode di bawah ini dan diberi nama filenya yaitu (menus.js)

/* MENUS.JS */
 	
 	var eOpenMenu = null;
 
 	function OpenMenu(eSrc,eMenu)
 	{
 		eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft;
 		eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
 		eMenu.style.visibility = "visible";
 		eOpenMenu = eMenu;
 	}
 
 	function CloseMenu(eMenu)
 	{
 		eMenu.style.visibility = "hidden";
 		eOpenMenu = null;
 	}
 
 	function document.onmouseover()
 	{
 		var eSrc = window.event.srcElement;
 		if ("clsMenuBarItem" == eSrc.className)
 		{
 			eSrc.style.color = "moccasin"; 
 			var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];
 			if (eOpenMenu && eOpenMenu != eMenu) 
 			{
 				CloseMenu(eOpenMenu);
 			}
 			if (eMenu) 
 			{
 				OpenMenu(eSrc,eMenu);
 			}
 		}
 		else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)) 
 		{
 			CloseMenu(eOpenMenu);
 		}
 	}
 	
 	function document.onmouseout()
 	{
 		var eSrc = window.event.srcElement;
 		if ("clsMenuBarItem" == eSrc.className)
 		{
 			eSrc.style.color = ""; 
 		}
 	}

Ingat! Semua file di atas disimpan pada satu folder.

Teknologi 3D pada Halaman WEB

Sabtu, 06 Februari 2010

Menu dengan XML

HAPUS KODE BR / pada script!

Tidak ada komentar:

Mengenai Saya