XML DROP DOWN MENU WITH PHP XSLT CSS FILE

Saturday, 18 March 2017

XML DROP DOWN MENU WITH PHP XSLT CSS FILE

----------------------------------------------------------------------------------------------------------------
Creating a Multilevel Menu using XSLT
https://www.script-tutorials.com/creating-multilevel-menu-using-xslt/
-----------------------------------------------------------------------------------------------------------------
ReadMore:
XML FILE RUN WITH HTML AND FIREFOX MOZILLA
http://fbgadgets.blogspot.co.uk/2017/04/xml-file-run-with-html-and-firefox.html
https://www.w3schools.com/xml/ajax_applications.asp
How to Display XML marksheet in HTML
https://www.youtube.com/watch?v=SZrY3cWn6qk
NOTE:
1) XML FILE RUN WITH HTML AND FIREFOX MOZILLA
2) XML FILE NOT RUN WITH GOOGLE CHROME
USE FIREFOX MOZILLA 52.0.2 OR
USE INTERNET EXPLORER 11.0.14393.953
CHECK FIRE FOX VERSION
GO TO C DRIVE CHECK FILE PROPERTY
OR
OPEN FIREFOX AND CLICK HELP > ABOUT
FIREFOX DOWNLOAD 52.0.2
https://www.mozilla.org/en-US/firefox/52.0.2/releasenotes/
AJAX XML Example
The following example will demonstrate how a web page can fetch information from an XML file with AJAX:
https://www.w3schools.com/xml/tryit.asp?filename=tryajax_xml2
---------------------------------------------------------------------------------------------------------------

XML FILE RUN WITH HTML AND FIREFOXMOZILLAHD

Apr 16, 2017 12:37 PM

Edit

-------------------------------------------------------------------------------------------------------------

The easiest way to find out what version of IE you're using is to check the version number from the About Internet Explorer dialog:

Open Internet Explorer.
Click or tap on the gear icon. ...
Click or tap the About Internet Explorer menu item.

Ok, download the source files and lets start coding !
-----------------------------------------------------------------------------------------------------------------

Step 1. Source XML

Firstly lets define our structure of initial menu:

<?xml version="1.0" encoding="UTF-8"?>

<menu>

<top title="Element 1" url="#">

<link title="subelement 1#1" url="#"></link>

<link title="subelement 1#2" url="#">

<link title="subelement 1#2#1" url="#"></link>

<link title="subelement 1#2#2" url="#"></link>

<link title="subelement 1#2#3" url="#"></link>

</link>

<link title="subelement 1#3" url="#"></link>

</top>

<top title="Element 2" url="#">

<link title="subelement 2#1" url="#"></link>

<link title="subelement 2#2" url="#">

<link title="subelement 2#2#1" url="#"></link>

<link title="subelement 2#2#2" url="#"></link>

<link title="subelement 2#2#3" url="#"></link>

</link>

<link title="subelement 2#3" url="#"></link>

</top>

<top title="Element 3" url="#">

<link title="subelement 3#1" url="#"></link>

<link title="subelement 3#2" url="#">

<link title="sub 3#2#1" url="#"></link>

<link title="sub 3#2#2" url="#"></link>

<link title="sub 3#2#3" url="#">

<link title="sub 3#2#3#1" url="#">

<link title="sub 1" url="#"></link>

<link title="sub 2" url="#"></link>

<link title="sub 3" url="#"></link>

</link>

<link title="sub 3#2#3#2" url="#"></link>

<link title="sub 3#2#3#3" url="#"></link>

</link>

</link>

<link title="subelement 3#3" url="#"></link>

</top>

<top title="Element 4" url="#">

<link title="subelement 4#1" url="#"></link>

<link title="subelement 4#2" url="#"></link>

<link title="subelement 4#3" url="#"></link>

</top>

</menu>

Step 2. PHP

Here are easy PHP file which we using for xsl transformation:

index.php

<?php

// create DomDocument and load our menu

$xml = new DOMDocument;

$xml->load('menu.xml');

$xsl = new DOMDocument;

$xsl->load('xslt/template.xslt'); // importing xslt

$proc = new XSLTProcessor; // creating xslt processor

$proc->importStyleSheet($xsl); // attaching xsl rules

echo $proc->transformToXML($xml); // output

?>

Step 3. CSS

Here are used CSS file. It contain CSS of our future menu too:

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}

.main{background:#FFF;width:698px;height:440px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}

#background {background:url(https://www.script-tutorials.com/demos/53/css/paper.jpg);}

/*menu styles*/

.preload1 {background: url(https://www.script-tutorials.com/demos/53/css/tab.png);}

.preload2 {background: url(https://www.script-tutorials.com/demos/53/css/tabb_on.png);}

.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:36px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

.menu2 li.top {display:block; float:left;}

.menu2 li a.top_link {display:block; float:left; height:36px; color:#444; text-decoration:none; }

.menu2 li a.top_link span {display:block; height:36px; float:left; line-height:27px; font-size:11px; font-weight:bold; padding:0 10px; cursor:pointer; background: url(https://www.script-tutorials.com/demos/53/css/tab_off.png) no-repeat;}

.menu2 li a.top_link b {display:block; width:15px; height:36px; float:left; background: url(https://www.script-tutorials.com/demos/53/css/tabb_off.png) no-repeat;}

.menu2 li a.top_link b.down {background: url(https://www.script-tutorials.com/demos/53/css/tabdown_off.png) no-repeat;}

.menu2 li a.top_link:hover span {color:#fff; background: url(https://www.script-tutorials.com/demos/53/css/tab.png) no-repeat; line-height:26px;}

.menu2 li a.top_link:hover b {color:#fff; background: url(https://www.script-tutorials.com/demos/53/css/tabb_on.png) no-repeat;}

.menu2 li:hover > a.top_link span {color:#fff; background: url(https://www.script-tutorials.com/demos/53/css/tab.png) no-repeat; line-height:26px;}

.menu2 li:hover > a.top_link b {color:#fff; background: url(https://www.script-tutorials.com/demos/53/css/tabb_on.png) no-repeat;}

.menu2 li:hover > a.top_link b.down {color:#fff; background: url(https://www.script-tutorials.com/demos/53/css/tabdown_on.png) no-repeat;}

.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible; position:relative; z-index:200;}

.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */

.menu2 ul,

.menu2 :hover ul ul,

.menu2 :hover ul :hover ul ul,

.menu2 :hover ul :hover ul :hover ul ul,

.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:0; top:32px; white-space:nowrap; width:120px; height:auto; z-index:300;}

.menu2 :hover ul.sub li {display:block; height:20px; float:left; width:120px; font-weight:normal; background: url(https://www.script-tutorials.com/demos/53/css/submid.png);}

.menu2 :hover ul.sub li.fly {background: url(https://www.script-tutorials.com/demos/53/css/submid_r.png);}

.menu2 :hover ul.sub li a {display:block; position:relative; font-size:11px; height:20px; width:120px; line-height:20px; text-indent:10px; color:#000; text-decoration:none;background:url(https://www.script-tutorials.com/demos/53/css/trans.gif);}

.menu2 :hover ul.sub li a:hover {color:#fff;}

.menu2 :hover ul.sub :hover > a {color:#fff;}

.menu2 :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul

{left:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto;}

.menu2 :hover ul.sub li.subtop,

.menu2 :hover ul :hover ul li.subtop,

.menu2 :hover ul :hover ul :hover ul li.subtop,

.menu2 :hover ul :hover ul :hover ul :hover ul li.subtop

{background:url(https://www.script-tutorials.com/demos/53/css/subtop.png);}

.menu2 :hover ul.sub li.flytop,

.menu2 :hover ul :hover ul li.flytop,

.menu2 :hover ul :hover ul :hover ul li.flytop,

.menu2 :hover ul :hover ul :hover ul :hover ul li.flytop

{background: url(https://www.script-tutorials.com/demos/53/css/subtop_r.png);}

.menu2 :hover ul.sub li.subbot,

.menu2 :hover ul :hover ul li.subbot,

.menu2 :hover ul :hover ul :hover ul li.subbot,

.menu2 :hover ul :hover ul :hover ul :hover ul li.subbot

{height:30px; background:url(https://www.script-tutorials.com/demos/53/css/subbottom.png);}

.menu2 :hover ul.sub li.flybot,

.menu2 :hover ul :hover ul li.flybot,

.menu2 :hover ul :hover ul :hover ul li.flybot,

.menu2 :hover ul :hover ul :hover ul :hover ul li.flybot

{height:30px; background: url(https://www.script-tutorials.com/demos/53/css/subbottom_r.png);}

As you can see – menu itself using some images, and I not sure that need put it in our article – they always will available in our downloadable package.

Step 4. XSLT

And, the delicacy – used XSLT rules:

xslt/template.xslt

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" doctype-system="http://www.w3.org/TR/html4/strict.dtd" doctype-public="-//W3C//DTD HTML 4.01//EN" indent="yes" />

<xsl:template match="/">

<head>

</head>

<body>

<xsl:for-each select="menu/top">

<xsl:attribute name="href">

<xsl:value-of select="@url"/>

</xsl:attribute>

<span>

<xsl:value-of select="@title"/>

</span>

<b>

<xsl:if test="count(link) > 0">

<xsl:attribute name="class">down</xsl:attribute>

</xsl:if>

</b>

</a>

<xsl:call-template name="nested_levels">

<xsl:with-param name="level" select="1"/>

</xsl:call-template>

</li>

</xsl:for-each>

</ul>

</div>

<xsl:comment>Copyright: AndrewP</xsl:comment>

<h4>

<a href="https://www.script-tutorials.com/creating-multilevel-menu-using-xslt/">back to original article page</a>

</h4>

</body>

</html>

</xsl:template>

<xsl:template name="nested_levels">

<xsl:param name="level" select="0"/>

<xsl:if test="count(link) > 0">

<ul>

<xsl:if test="$level = 1">

<xsl:attribute name="class">sub</xsl:attribute>

</xsl:if>

<xsl:for-each select="link">

<li>

<xsl:choose>

<xsl:when test="count(link) = 0 and position()=1">

<xsl:attribute name="class">subtop</xsl:attribute>

</xsl:when>

<xsl:when test="count(link) > 0 and position()=1">

<xsl:attribute name="class">flytop</xsl:attribute>

</xsl:when>

<xsl:when test="count(link) > 0 and not(position()=last())">

<xsl:attribute name="class">fly</xsl:attribute>

</xsl:when>

<xsl:when test="count(link) = 0 and position()=last()">

<xsl:attribute name="class">subbot</xsl:attribute>

</xsl:when>

<xsl:when test="count(link) > 0 and position()=last()">

<xsl:attribute name="class">flybot</xsl:attribute>

</xsl:when>

<xsl:otherwise></xsl:otherwise>

</xsl:choose>

<a>

<xsl:attribute name="href">

<xsl:value-of select="@url"/>

</xsl:attribute>

<xsl:value-of select="@title"/>

<xsl:value-of select="$level"/>

</a>

<xsl:call-template name="nested_levels">

<xsl:with-param name="level" select="$level + 1"/>

</xsl:call-template>

</li>

</xsl:for-each>

</ul>

</xsl:if>

</xsl:template>

</xsl:stylesheet>

FbGadgets

Saturday, 18 March 2017