umbraco Forum » XSLT » Imported posts » Dropdown menu

Dropdown menu Options
Previous Topic · Next Topic
Simm
Posted: Friday, February 02, 2007 3:53:20 AM

Rank: Fanatic

Joined: 7/22/2006
Posts: 254
Location: Randers, Denmark
Hi,

I'm trying to make a dropdown menu using unordered lists, but I am really not an XSLT wizard, so I need some examples on how to construct a menu from XML->HTML that looks like this:

Code:

<ul class="niveau1">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<ul class="niveau2">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<ul class="niveau3">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>


Thanks very much
Best Regards
Simon

Simm.dk - My base on the web - proud Umbracian since 2.0 Beta
Back to top
 
Ulriksen
Posted: Friday, February 02, 2007 8:40:41 AM
Rank: Devotee

Joined: 9/12/2006
Posts: 38
Hi Simon,

I hope these links can help you on the way.

I find myself using the ADXmenu http://www.aplus.co.yu/adxmenu/ as it does a very good job with IE, especially when you have to cover select boxes and scrollbars.

You might also want to check you a list apart which has an old article about this. http://alistapart.com/articles/dropdowns/.

Listamatic2 features a nice collection of lists and also a browser comparison chart. http://css.maxdesign.com.au/listamatic2/


For all your other css needs Andrew Fernandez has a very nice collection of CCS links http://www.dezwozhere.com/links.html


Hope this helps,
Harald Ulriksen
Back to top
 
Ulriksen
Posted: Friday, February 02, 2007 11:06:19 AM
Rank: Devotee

Joined: 9/12/2006
Posts: 38
Ok, no more answering posts without coffe first, I thought you needed xsl xslt.. anyway here's the xslt I use for a site running the adx menu. It's based on the example site package as far as I can remember.

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:variable name="level" select="1"/>

<xsl:template match="/">

    <xsl:call-template name="printListe">
        <xsl:with-param name="node" select="$currentPage/ancestor-or-self::node [@level = 1]"/>    
        <xsl:with-param name="id" select="string('menuList')"/>
    </xsl:call-template>
</xsl:template>

<xsl:template name="printListe">
    <xsl:param name="node"/>
    <xsl:param name="id"/>
<ul>
<xsl:if test="$id != ''">
    <xsl:attribute name="id"><xsl:value-of select="$id"/></xsl:attribute>
    <xsl:attribute name="class"><xsl:value-of select="string('adxm adxmV')"/></xsl:attribute>
</xsl:if>
<xsl:if test="$id = ''">
    <xsl:attribute name="id">submenu<xsl:value-of select="current()/@id"/></xsl:attribute>    <xsl:attribute name="class">sublist</xsl:attribute>
</xsl:if>
<xsl:for-each select="$node/node">
<li>
    <xsl:if test="count(./node) &gt; 0">
        <xsl:attribute name="class">submenu</xsl:attribute>
    </xsl:if>
    <a href="{umbraco.library:NiceUrl(@id)}"><xsl:value-of select="@nodeName"/>
        <xsl:if test="count(./node) &gt; 0"> &#187;</xsl:if>    
    </a>
    <xsl:if test="count(./node) &gt; 0">
        <xsl:call-template name="printListe">
            <xsl:with-param name="node" select="."/>
        </xsl:call-template>
    </xsl:if>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>


Hope this helps.
Back to top
 
Ulriksen
Posted: Friday, February 02, 2007 11:13:23 AM
Rank: Devotee

Joined: 9/12/2006
Posts: 38
Seems like umbraco is inserting emoticons in my XSLT so look out for ":" with a "p" afterwards as it has been changed to <img src='/include/emotions/tongue.gif'/>
Back to top
 
Simm
Posted: Friday, February 02, 2007 12:32:57 PM

Rank: Fanatic

Joined: 7/22/2006
Posts: 254
Location: Randers, Denmark
Hi Harald,

Thank you very much! It works like a charm :)
and thank you for providing some great links :)

/Simon
Best Regards
Simon

Simm.dk - My base on the web - proud Umbracian since 2.0 Beta
Back to top
 
asma
Posted: Monday, June 09, 2008 12:08:28 PM
Rank: Newbie

Joined: 6/8/2008
Posts: 14
Location: none
Hey Simm
i have tried using your code and it works
but it displays the menu only on mouse hover, i mean we have the main menu and the sub menu, the sub menu's work well but the main menu doesn't show until and unless the mouse hovers over the area

I have actually created a template put ur code in an xslt file and used the adxmenu style

this is how i put the menu

<BODY class="adxmenu">

<TABLE height="100%" cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff
border=0><!--TOP OF PAGE-->
<TR><!--LEFT COLUMN-->
<TD vAlign=top width=196 height="100%"><!--LEFT BLOCK-->
<TABLE cellSpacing=0 cellPadding=0 width=196 border=0>
<TBODY>
<TR>
<TD class=left_block_title vAlign=top
background="image/hdr2.gif"
height=30>Menu</TD></TR>
<TR>
<TD class=left_block_content>



<div class="example">
<ul class="adxm menu">
<li><?UMBRACO_MACRO macroAlias="TopNavigation" ></?UMBRACO_MACRO></li>--> //this the menu code
</ul>
</div>



</TD></TR></TBODY></TABLE><BR><!--/LEFT BLOCK--></TD><!--CENTER COLUMN-->
<TD vAlign=top width=584 height="100%">
<TABLE cellSpacing=0 cellPadding=0 width=584 border=0><!--KEYBOARD BLOCK-->
<TBODY>
<TR>
<TD class=keyboard_block style="BACKGROUND-REPEAT: no-repeat"
vAlign=top background="image/keyb2.jpg"
height=104>
<BR></TD></TR><!--/KEYBOARD BLOCK--><!--CENTER BLOCK-->
<TR>
<TD class=center_block_title style="BACKGROUND-REPEAT: no-repeat"
vAlign=top background="image/hdr3.gif"
height=32>

<?UMBRACO_GETITEM field="pageName"/></TD></TR>
<TR>
<TD class=center_block_content>
<H1>Content Management System (CMS)</H1>
<?UMBRACO_TEMPLATE_LOAD_CHILD/>
</TD></TR>
<TR>
<TD>&nbsp;</TD></TR><!--/CENTER BLOCK--></TBODY></TABLE></TD></TR>
<TD vAlign=top background="image/bgdown.gif"
colSpan=2 height=56><!--BOTTOM BLOCK-->

</TD></TR></TABLE>
</BODY>


can you please tell me where i m wrong in using this
Back to top
 
asma
Posted: Tuesday, June 10, 2008 6:43:38 AM
Rank: Newbie

Joined: 6/8/2008
Posts: 14
Location: none
please simon could you please help me out with this its preety urgent and i still cant figure out how to fix the main menu
Back to top
 
Users browsing this topic
Guest

umbraco Forum » XSLT » Imported posts » Dropdown menu


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.