horizontal XSLT menu Options
satamita
Posted: Friday, August 22, 2008 2:43:21 PM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
I was having problem creating XSLT navigational menu. But Dirk helped mr a lot to solve it.
Now I can view my menu on webpage. But it is showing in a vertical was as list. I want it to look horizontal with main menu items only and showing sub menues on mouse over.

Please can anybody help me out ...........

here is my XSLT code

Code:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    exclude-result-prefixes="msxml umbraco.library">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->

<ul id="Navi">
<xsl:for-each select="$currentPage/ancestor::root/node [string(./data [@alias='umbracoNaviHide']) != '1']">
    <li>
        <xsl:if test="$currentPage/@id=current()/@id">
            <xsl:attribute name="class"></xsl:attribute>
        </xsl:if>
        <a href="{umbraco.library:NiceUrl(@id)}">
            <xsl:attribute name="title"><xsl:value-of select="@nodeName" /></xsl:attribute>
            <xsl:value-of select="@nodeName" />
        </a>
    </li>
</xsl:for-each>

<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=1]/node [string(./data [@alias='umbracoNaviHide']) != '1']">
    <li>
        <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">
            <xsl:attribute name="class">Selected</xsl:attribute>
        </xsl:if>
        <a href="{umbraco.library:NiceUrl(@id)}">
            <xsl:attribute name="title"><xsl:value-of select="@nodeName" /></xsl:attribute>
            <xsl:value-of select="@nodeName" />
        </a>
    </li>
</xsl:for-each>

</ul>

</xsl:template>

</xsl:stylesheet>

leekelleher
Posted: Friday, August 22, 2008 3:26:28 PM

Rank: Enthusiast

Joined: 5/28/2008
Posts: 45
Location: Bristol, UK
Hi Satamita,

You'll need to use CSS to apply the appropriate styles to your menu (also to make them appear horizontally, instead of vertically).

Take a read over this article on A List Apart for details about "Suckerfish Dropdowns":
http://alistapart.com/articles/dropdowns

Good luck,
- Lee

http://leekelleher.com/
satamita
Posted: Friday, August 22, 2008 4:58:17 PM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
Hi Lee,
Thanks for this link. It really worked for me. The menu is reday. But I am facing a strange problem. As per my XSLT script this menu is always showing the child nodes of selected main none. I mean to say that on mouse over event its showing the childnodes of the selected nodes for each mainnode. I want this menu to show childnodes of mouseover mainnode.
Can you please help me in this matter.........

my modified XSLT code is

Code:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    exclude-result-prefixes="msxml umbraco.library">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->
<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("Navi");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]></script>


<ul id="Navi">
<xsl:for-each select="$currentPage/ancestor::root/node [string(./data [@alias='umbracoNaviHide']) != '1']">
    <li id="first">
        <xsl:if test="$currentPage/@id=current()/@id">
                   <xsl:attribute name="class">Selected</xsl:attribute>
        </xsl:if>
        <a href="{umbraco.library:NiceUrl(@id)}">
            <xsl:attribute name="title"><xsl:value-of select="@nodeName" /></xsl:attribute>
            <xsl:value-of select="@nodeName" />
        </a>
<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=1]/node [string(./data [@alias='umbracoNaviHide']) != '1']">

    <li>
        <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">
                  <xsl:attribute name="class">Selected</xsl:attribute>
        </xsl:if>
        <a href="{umbraco.library:NiceUrl(@id)}">
            <xsl:attribute name="title"><xsl:value-of select="@nodeName" /></xsl:attribute>
            <xsl:value-of select="@nodeName" />
        </a>
    </li>
</xsl:for-each>
</ul>
</li>
</xsl:for-each>



</ul>




</xsl:template>

</xsl:stylesheet>





Thanks,
Satamita
satamita
Posted: Friday, August 22, 2008 5:03:25 PM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
Lee,
Actually I mean to say I want to select node id on mouse over so that i can show its childnodes on mouseover event.

Thanks,
Satamita
satamita
Posted: Saturday, August 23, 2008 12:50:54 PM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
Hi Lee, I solved this. Thanks budy for your help.[:d/]
leekelleher
Posted: Tuesday, August 26, 2008 10:40:35 AM

Rank: Enthusiast

Joined: 5/28/2008
Posts: 45
Location: Bristol, UK
Hi Satamita, sorry for not getting back to you - we've had a long holiday weekend in the UK.

I'm glad you've resolved the issue.

Cheers,
- Lee

http://leekelleher.com/
satamita
Posted: Tuesday, August 26, 2008 2:44:44 PM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
Hi Lee,
How was your vacation ? Do you know anything about selecting the childnodes of a particular mainnode.
Say I have a mainnode called 'Frontpage' . I just wants its suvnodes. Is that possible and how?

Satamita
Dirk
Posted: Tuesday, August 26, 2008 4:14:39 PM

Rank: Umbracoholic

Joined: 9/27/2007
Posts: 1,136
Location: Belgium
Hi Satamita,

Create an xslt and corresponding macro. Pass in a parameter (could be the id of the 'Frontpage' node), and write following construct in the xslt:

Code:
<xsl:param name="id" select="/macro/NodeId" />


and

Code:
<xsl:for-each select="umbraco.library:GetXmlNodeById($id)/node">
  blabla
</xsl:for-each>


Macro should have a parameter of type 'Content Picker' and alias 'NodeId'

Hope that helps.

Regards,
/Dirk



level 1 & 2 certified - umbraco MVP 2008/2009 - umbraco blog at netaddicts.be - working on an integrated forum4umbraco
satamita
Posted: Tuesday, August 26, 2008 5:03:02 PM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
Hi Dirk,
Thanks you. I have another query. Do know how to get the first and last node of an mainnode.

my code:

Code:
<xsl:for-each select="$currentPage/ancestor::root/node">
<xsl:if test="@nodeName = 'Frontpage'">
<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=1]/node">
<strong><xsl:value-of select="@nodeName" /></strong>","
</xsl:for-each>
</xsl:if>
 
</xsl:for-each>





here I am getting the output as a1","a2","a3","a4","
But my desired output is like a1","a2","a3","a1

in case of lastnode it will be only
<strong><xsl:value-of select="@nodeName" /></strong>

is that possible?

Thanks in advance

Satamita
Dirk
Posted: Tuesday, August 26, 2008 8:16:28 PM

Rank: Umbracoholic

Joined: 9/27/2007
Posts: 1,136
Location: Belgium
Yep, there are some nice xslt functions available which are exactly what you're after.

Have a google search for position(), first() and last()

You could use

Code:
<xsl:if test="position() = first()">...</xsl:if>


and

Code:
<xsl:if test="position() = last()">...</xsl:if>


Greetz,
/Dirk


level 1 & 2 certified - umbraco MVP 2008/2009 - umbraco blog at netaddicts.be - working on an integrated forum4umbraco
satamita
Posted: Wednesday, August 27, 2008 4:51:26 PM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
Dirk,
Thanks for the solution. I have another query.
In the macro I have added a contentTree parameter.
it is selecting a particular node from the template page.

Code:
<?UMBRACO_MACRO macroAlias="XSLTNavi" contentTree="1055"></?UMBRACO_MACRO>


in XSLT I have wriiten this
Code:
<!-- start writing XSLT -->
    
<xsl:variable name="n1" select="/macro/contentTree/node/nodeName"/>


<xsl:for-each select="$currentPage/ancestor::root/node">
<xsl:if test="@nodeName = $n1">
<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=1]/node">
<xsl:if test="position() = last()">
"<b><xsl:value-of select="@nodeName" /></b>"
</xsl:if>
<xsl:if test="position() != last()">
"<b><xsl:value-of select="@nodeName" /></b>",
</xsl:if>
</xsl:for-each>
</xsl:if>
</xsl:for-each>




This xslt result is nothing.Here I want the childnodes of the node in the parameter.

Do you think this line
Code:
<xsl:variable name="n1" select="/macro/contentTree/node/nodeName"/>
is alright? I am not sure if this variable value is the nodename.
cuz it is giving desired result when I write
Code:
<xsl:if test="@nodeName = 'Home'">


Please help me solve this.

Thanks ,
Satamita
Dirk
Posted: Wednesday, August 27, 2008 5:03:07 PM

Rank: Umbracoholic

Joined: 9/27/2007
Posts: 1,136
Location: Belgium
Hi Satamita,

Nope, next statement

Code:
<xsl:variable name="n1" select="/macro/contentTree/node/nodeName"/>

is not correct! Getting the param is done using /macro/contentTree and this only returns "1055".

Can be solved in two ways:

Code:
<xsl:variable name="n1" select="umbraco.library:GetXmlNodeById(/macro/contentTree)"/>

or

Code:
<xsl:variable name="n1" select="/macro/contentTree" /> and
<xsl:for-each select="umbraco.library:GetXmlNodeById($n1)/node">


to loop over all childnodes of node with id 1055

Hope that helps.

Regards,
/Dirk


level 1 & 2 certified - umbraco MVP 2008/2009 - umbraco blog at netaddicts.be - working on an integrated forum4umbraco
satamita
Posted: Wednesday, August 27, 2008 5:44:02 PM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
Dirk This is not working for me. What I want is the name of the node with id 1055 in the variable name.

do you think this line will do it?
Code:


<xsl:variable name="n1" select="umbraco.library:GetXmlNodeById(/macro/contentTree)"/>



It is not giving it.
Dirk
Posted: Wednesday, August 27, 2008 6:57:50 PM

Rank: Umbracoholic

Joined: 9/27/2007
Posts: 1,136
Location: Belgium
Yeah Satamita,

Code:
<xsl:variable name="n1" select="umbraco.library:GetXmlNodeById(/macro/contentTree)"/>


gives a node, and all you need to add is /@nodeName

Nothing more, nothing less!

Regards,
/Dirk


level 1 & 2 certified - umbraco MVP 2008/2009 - umbraco blog at netaddicts.be - working on an integrated forum4umbraco
satamita
Posted: Thursday, August 28, 2008 7:30:43 AM

Rank: Enthusiast

Joined: 8/21/2008
Posts: 28
Location: Kolkata, India
Dirk,
I dont know what is wrong in the code. I have used what you have said before. But still its not giving the result. Please go through the code below and let me know what is wrong.

Code:

    
<xsl:variable name="n1" select="umbraco.library:GetXmlNodeById(/macro/contentTree)"/>
<xsl:for-each select="$currentPage/ancestor::root/node">
<xsl:if test="@nodeName = $n1/@nodeName">
<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=1]/node">
<xsl:if test="position() = last()">
"<b><xsl:value-of select="@nodeName" /></b>"
</xsl:if>
<xsl:if test="position() != last()">
"<b><xsl:value-of select="@nodeName" /></b>",
</xsl:if>
</xsl:for-each>


If I use 'Frontpage' instead of $nt/@nodename its giving the result.Here 'Frontpage ' is the nodename.


Thanks,
Satamita
Users browsing this topic
Guest


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.