Hey,

With Umbraco it's easy to output the mark up as you need to, so what I would suggest is go and find a mega menu you like and post the markup here along with your site structure, this will give people a better chance to help you.

Rich 

Hi there, I am doing exactly this, would like to see the code please.

Regards

Praveen

Sample 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:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
xmlns:netaddicts-be="urn:netaddicts-be:xslt"

exclude-result-prefixes="msxml umbraco.library netaddicts-be">

<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<!-- Holds the start node for the navigation. Optional -->
<xsl:param name="startNodeId" select="/macro/startNodeId"/>
<!-- Holds number of sublevels to generate. Macro parameter is optional. Defaults to one if not supplied -->
<xsl:param name="maxDrilldownLevel" select="netaddicts-be:ReadMacroParameter(//macro/maxLevels,'0')"/>

<xsl:template match="/">

<!-- Check whether a start node has been supplied -->
<xsl:choose>
<xsl:when test="$startNodeId != ''">

<!-- Start building the top navigation from the node supplied by start node id -->

<xsl:call-template name="buildTopNavigation">
<xsl:with-param name="navigationNodes" select="umbraco.library:GetXmlNodeById($startNodeId)"/>
</xsl:call-template>
</xsl:when>
<xsl:otherwise>

<!-- Start building navigation from top level node -->

<xsl:call-template name="buildTopNavigation">
<xsl:with-param name="navigationNodes" select="umbraco.library:GetXmlAll()"/>
</xsl:call-template>

</xsl:otherwise>
</xsl:choose>

</xsl:template>

<!-- Start building the top navigation (first level navigation) -->
<xsl:template name="buildTopNavigation">
<xsl:param name="navigationNodes"/>
<xsl:variable name="NoOfChildren" select="count($navigationNodes/child::* [@isDoc][string(umbracoNaviHide) != '1'])" />
<ul>

<!-- Iterate child nodes -->
<xsl:for-each select="$navigationNodes/child::* [@isDoc]">

<!-- Create var for easier reading/processing -->
<xsl:variable name="currentProcessedNode" select="."/>
<xsl:variable name="currentLevel" select="0"/>

<!-- Check whether node should be visible in first level navigation -->
<xsl:if test="string($currentProcessedNode/umbracoNaviHide) != '1'">
<xsl:choose>
<xsl:when test="position() != $NoOfChildren">
<li>

<!-- Build the navigation link using the node currently being processed in the for-each loop -->
<xsl:call-template name="buildLink">
<xsl:with-param name="node" select="$currentProcessedNode"/>
</xsl:call-template>

<!-- Build next level navigation only if applicable -->
<!-- Still need to check whether all child nodes have been set to umbracoHideChildren = 1 whereas umbracoNaviHide = 0
this case would yield an empty ul element -->
<xsl:if test="(count($currentProcessedNode/node) &gt; 0)
and (string($currentProcessedNode/umbracoNaviHide) != '1')
and ($currentLevel &lt; $maxDrilldownLevel)">
<xsl:call-template name="buildNavigation">
<xsl:with-param name="parentNode" select="$currentProcessedNode"/>
<xsl:with-param name="level" select="$currentLevel + 1"/>
</xsl:call-template>
</xsl:if>

</li>
</xsl:when>
<xsl:otherwise>
<li class="last">

<!-- Build the navigation link using the node currently being processed in the for-each loop -->
<xsl:call-template name="buildLink">
<xsl:with-param name="node" select="$currentProcessedNode"/>
</xsl:call-template>

<!-- Build next level navigation only if applicable -->
<!-- Still need to check whether all child nodes have been set to umbracoHideChildren = 1 whereas umbracoNaviHide = 0
this case would yield an empty ul element -->
<xsl:if test="(count($currentProcessedNode/node) &gt; 0)
and (string($currentProcessedNode/umbracoNaviHide) != '1')
and ($currentLevel &lt; $maxDrilldownLevel)">
<xsl:call-template name="buildNavigation">
<xsl:with-param name="parentNode" select="$currentProcessedNode"/>
<xsl:with-param name="level" select="$currentLevel + 1"/>
</xsl:call-template>
</xsl:if>

</li>
</xsl:otherwise>
</xsl:choose>
</xsl:if>

</xsl:for-each>

</ul>

</xsl:template>

<!-- A template used for building the non top navigation tree -->
<xsl:template name="buildNavigation">
<xsl:param name="parentNode"/>
<xsl:param name="level"/>

<ul>
<!-- Iterate over the child nodes-->
<xsl:for-each select="$parentNode/* [@isDoc]">

<!-- Create var for easier reading/processing -->
<xsl:variable name="currentProcessedNode" select="."/>

<!-- Check whether node should be processed -->
<xsl:if test="string($currentProcessedNode/umbracoNaviHide) != '1'">

<li>

<!-- Build the navigation link -->
<xsl:call-template name="buildLink">
<xsl:with-param name="node" select="$currentProcessedNode"/>
</xsl:call-template>

<!-- Build next level navigation only if applicable; recursive call -->
<!-- Still need to check whether all child nodes have been set to umbracoHideChildren = 1 whereas umbracoNaviHide = 0
this case would yield an empty ul element -->
<xsl:if test="
(count($currentProcessedNode/node) &gt; 0)
and (string($currentProcessedNode/umbracoHideChildren) != '1')
and ($level &lt; $maxDrilldownLevel)">
<xsl:call-template name="buildNavigation">
<xsl:with-param name="parentNode" select="$currentProcessedNode"/>
<xsl:with-param name="level" select="$level + 1"/>
</xsl:call-template>
</xsl:if>

</li>

</xsl:if>

</xsl:for-each>

</ul>

</xsl:template>

<!-- A template that builds our navigation link based on node properties -->
<xsl:template name="buildLink">
<xsl:param name="node"/>

<xsl:choose>

<!-- Build link to external page -->
<xsl:when test="string($node/externalURL) != ''">

<xsl:call-template name="buildExternalLink">
<xsl:with-param name="node" select="$* [@isDoc]"/>
</xsl:call-template>

</xsl:when>

<!-- Build link for redirecting to a custom supplied url -->
<xsl:when test="string($node/umbracoRedirect) != ''">

<xsl:call-template name="buildRedirectLink">
<xsl:with-param name="node" select="$* [@isDoc]"/>
</xsl:call-template>

</xsl:when>

<!-- Default link builder -->
<xsl:otherwise>

<xsl:call-template name="buildNormalLink">
<xsl:with-param name="node" select="$* [@isDoc]"/>
</xsl:call-template>

</xsl:otherwise>
</xsl:choose>

</xsl:template>

<!-- A template that builds a link to an external page -->
<xsl:template name="buildExternalLink">
<xsl:param name="node"/>

<!--
<xsl:call-template name ="outputNode">
<xsl:with-param name="currentNode" select="$* [@isDoc]"/>
</xsl:call-template>
-->

<a Target="_blank">
<!-- Set the href attribute -->
<xsl:attribute name="href">
<xsl:value-of select="$node/externalURL"/>
</xsl:attribute>
<!-- Set the target attribute if available from the properties -->
<xsl:if test="string($node/externalTarget) != ''">
<xsl:attribute name="target">
<xsl:value-of select="$node/externalTarget"/>
</xsl:attribute>
</xsl:if>
<!-- Set the title attribute if available from the properties -->
<xsl:if test="string($node/navTooltip) != ''">
<xsl:attribute name="title">
<xsl:value-of select="string($node/navTooltip)"/>
</xsl:attribute>
</xsl:if>
<!-- Set actual text for the link, either available from the properties or just plain umbraco link-->
<xsl:choose>
<xsl:when test="string($node/navText) != ''">
<xsl:value-of select="string($node/navText)"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$node/@nodeName"/>
</xsl:otherwise>
</xsl:choose>
</a>

</xsl:template>

<xsl:template name="buildRedirectLink">
<xsl:param name="node"/>

<!--
<xsl:call-template name ="outputNode">
<xsl:with-param name="currentNode" select="$* [@isDoc]"/>
</xsl:call-template>
-->

<a>
<!-- Set the href attribute based on the redirect supplied -->
<xsl:attribute name="href">
<xsl:value-of select="netaddicts-be:FixLink(string($node/umbracoRedirect))"/>
</xsl:attribute>
<!-- Set the title attribute if available from the properties -->
<xsl:if test="string($node/navTooltip) != ''">
<xsl:attribute name="title">
<xsl:value-of select="string($node/navTooltip)"/>
</xsl:attribute>
</xsl:if>
<!-- Set actual text for the link, either available from the properties or just plain umbraco link-->
<xsl:choose>
<xsl:when test="string($node/navText) != ''">
<xsl:value-of select="string($node/navText)"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$node/@nodeName"/>
</xsl:otherwise>
</xsl:choose>
</a>

</xsl:template>

<xsl:template name="buildNormalLink">
<xsl:param name="node"/>

<!--
<xsl:call-template name ="outputNode">
<xsl:with-param name="currentNode" select="$* [@isDoc]"/>
</xsl:call-template>
-->

<xsl:choose>
<xsl:when test="$currentPage/ancestor-or-self::node/@id = current()/@id">
<xsl:choose>
<xsl:when test="(count($node/node) &gt; 0)">
<a class="active" rel="dropmenu{position()}">
<!-- Set the href attribute, either the alias if available, else use NiceUrl() -->
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="string($node/umbracoUrlAlias) != ''">
<xsl:value-of select="netaddicts-be:FixLink(string($node/umbracoUrlAlias))"/>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="number($node/@level) = 1">
<xsl:for-each select="$node/child::* [@isDoc]">
<xsl:if test="position()&lt;= 1">
<xsl:variable name="currentProcessedNode" select="."/>
<xsl:value-of select="umbraco.library:NiceUrl($currentProcessedNode/@id)"/>
</xsl:if>
</xsl:for-each>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="umbraco.library:NiceUrl($node/@id)"/>
</xsl:otherwise>
</xsl:choose>

</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<!-- Set the title attribute if available from the properties -->
<xsl:if test="string($node/navTooltip) != ''">
<xsl:attribute name="title">
<xsl:value-of select="string($node/navTooltip)"/>
</xsl:attribute>
</xsl:if>
<!-- Set actual text for the link, either available from the properties or just plain umbraco link-->
<xsl:choose>
<xsl:when test="string($node/navText) != ''">
<xsl:value-of select="string($node/navText)"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$node/@nodeName"/>
</xsl:otherwise>
</xsl:choose>
</a>

</xsl:when>
<xsl:otherwise>

<a class="active">
<!-- Set the href attribute, either the alias if available, else use NiceUrl() -->
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="string($node/umbracoUrlAlias) != ''">
<xsl:value-of select="netaddicts-be:FixLink(string($node/umbracoUrlAlias))"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="umbraco.library:NiceUrl($node/@id)"/>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<!-- Set the title attribute if available from the properties -->
<xsl:if test="string($node/navTooltip) != ''">
<xsl:attribute name="title">
<xsl:value-of select="string($node/navTooltip)"/>
</xsl:attribute>
</xsl:if>
<!-- Set actual text for the link, either available from the properties or just plain umbraco link-->
<xsl:choose>
<xsl:when test="string($node/navText) != ''">
<xsl:value-of select="string($node/navText)"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$node/@nodeName"/>
</xsl:otherwise>
</xsl:choose>
</a>
</xsl:otherwise>
</xsl:choose>
</xsl:when>

<xsl:otherwise>
<xsl:choose>
<xsl:when test="(count($node/node) &gt; 0)">
<a rel="dropmenu{position()}">
<!-- Set the href attribute, either the alias if available, else use NiceUrl() -->
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="string($node/umbracoUrlAlias) != ''">
<xsl:value-of select="netaddicts-be:FixLink(string($node/umbracoUrlAlias))"/>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="number($node/@level) = 1">
<xsl:for-each select="$node/child::* [@isDoc]">
<xsl:if test="position()&lt;= 1">
<xsl:variable name="currentProcessedNode" select="."/>
<xsl:value-of select="umbraco.library:NiceUrl($currentProcessedNode/@id)"/>
</xsl:if>
</xsl:for-each>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="umbraco.library:NiceUrl($node/@id)"/>
</xsl:otherwise>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<!-- Set the title attribute if available from the properties -->
<xsl:if test="string($node/navTooltip) != ''">
<xsl:attribute name="title">
<xsl:value-of select="string($node/navTooltip)"/>
</xsl:attribute>
</xsl:if>
<!-- Set actual text for the link, either available from the properties or just plain umbraco link-->
<xsl:choose>
<xsl:when test="string($node/navText) != ''">
<xsl:value-of select="string($node/navText)"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$node/@nodeName"/>
</xsl:otherwise>
</xsl:choose>
</a>

</xsl:when>
<xsl:otherwise>

<a>
<!-- Set the href attribute, either the alias if available, else use NiceUrl() -->
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="string($node/umbracoUrlAlias) != ''">
<xsl:value-of select="netaddicts-be:FixLink(string($node/umbracoUrlAlias))"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="umbraco.library:NiceUrl($node/@id)"/>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<!-- Set the title attribute if available from the properties -->
<xsl:if test="string($node/navTooltip) != ''">
<xsl:attribute name="title">
<xsl:value-of select="string($node/navTooltip)"/>
</xsl:attribute>
</xsl:if>
<!-- Set actual text for the link, either available from the properties or just plain umbraco link-->
<xsl:choose>
<xsl:when test="string($node/navText) != ''">
<xsl:value-of select="string($node/navText)"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$node/@nodeName"/>
</xsl:otherwise>
</xsl:choose>
</a>
</xsl:otherwise>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>

</xsl:template>

<!-- For debugging purposes, writes out all relevant node properties -->
<xsl:template name="outputNode">
<xsl:param name="currentNode"/>
<ul>
<li>
@id=<xsl:value-of select="$currentNode/@id"/>
</li>
<li>
@nodeName=<xsl:value-of select="$currentNode/@nodeName"/>
</li>
<li>
@umbracoNaviHide=<xsl:value-of select="$currentNode/umbracoNaviHide"/>
</li>
<li>
@umbracoHideChildren=<xsl:value-of select="$currentNode/umbracoHideChildren"/>
</li>
<li>
@navText=<xsl:value-of select="$currentNode/navText"/>
</li>
<li>
@navTooltip=<xsl:value-of select="$currentNode/navTooltip"/>
</li>
<li>
@externalURL=<xsl:value-of select="$currentNode/externalURL"/>
</li>
<li>
@externalTarget=<xsl:value-of select="$currentNode/externalTarget"/>
</li>
<li>
@umbracoRedirect=<xsl:value-of select="$currentNode/umbracoRedirect"/>
</li>
<li>
@umbracoUrlAlias=<xsl:value-of select="$currentNode/umbracoUrlAlias"/>
</li>
</ul>
</xsl:template>

<msxsl:script language="C#" implements-prefix="netaddicts-be">
<![CDATA[

//Function is taken from XSLTSearch by Douglas Robar from Percipient Studios (http://www.percipientstudios.com/)
public string ReadMacroParameter(string value, string defaultValue) {
if (value == "")
return defaultValue;
else
return value.Replace(" ", "");
}

//Function fixes a possible wrongly formatted link
public string FixLink(string oldLink) {
string newLink = string.Empty;

if (!oldLink.StartsWith("/"))
newLink += "/";
newLink += oldLink;
if (!oldLink.EndsWith(".aspx"))
newLink += ".aspx";

return newLink;
}

]]>
</msxsl:script>
</xsl:stylesheet>

 

hi  Rich Green,

I have still not started the mega menu, so not having markup. But I want to develop menus like http://www.foodnetwork.com/ or http://www.actionenvelope.com/

my site structure is something like.....

-My Website

    -- Home

    -- Downloads

          --  Books

          -- Videos

          -- Songs

    -- Schedule

    -- Who we are

so, say on Home, Schedule and who we are links, normal contenet page will open.  But on Downloads link I want to show mega menu in which books, videos, songs links with some text and img will be displayed.

  

is working on a reply...