Column Type
MegaHeader Lookup
MenuRow Number
MenuColumn Number
ItemNumber Number
Title Single line of text (Don’t make this required!! It will not always have data)
MenuLink Hyperlink or Picture
ItemImage Hyperlink or Picture
ItemBody Multiple lines of text (This is rich text)
Published Yes/No
ItemWidth Choice (the choices are: “default, 2, 3, 4”. Make the default value "default". The code below will look out for that.)
MegaHeader:Order Lookup
MegaHeader:CssClass Lookup
<ul id="topnav">
<li>Header Tab
<div class=”sub”>
<div class=”row”>
<ul>
<li>Menu Item
<li>Menu Item
<li>Menu Item
</ul>
</div>
</div>
<li>Next Header tab
</ul>
<Xsl>
<xsl:stylesheet
version="1.0"
xmlns:x="http://www.w3.org/2001/XMLSchema"
xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:ddwrt2="urn:frontpage:internal"
exclude-result-prefixes="x d asp xsl msxsl ddwrt ddwrt2">
<xsl:output method="html" indent="no"/>
<xsl:decimal-format NaN=""/>
<xsl:param name="dvt_apos">'</xsl:param>
<xsl:param name="ManualRefresh">
</xsl:param><xsl:variable name="dvt_1_automode">0</xsl:variable>
<xsl:key name="MHeaders" match="Row" use="@MegaHeader_x003a_Order"/>
<xsl:key name="MRows" match="Row" use="concat(@MegaHeader_x003a_Order, '-', @MenuRow)"/>
<xsl:key name="MColumns" match="Row" use="concat(@MegaHeader_x003a_Order,'-', @MenuRow,'-', @MenuColumn)"/>
<xsl:template match="/" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
<xsl:call-template name="Setup"/>
</xsl:template>
<xsl:template name="Setup">
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<!-- start unordered list for the navigation top tabs -->
<ul id="topnav">
<xsl:variable name="HeaderLoop" select="//Row[generate-id() = generate-id(key('MHeaders', @MegaHeader_x003a_Order)[1])]"/>
<xsl:for-each select="$HeaderLoop">
<xsl:variable name="LinkStart" select="string('<a href="#" class="')"/>
<xsl:variable name="LinkClass"><xsl:value-of select="@MegaHeader_x003a_CssClass"/></xsl:variable>
<xsl:variable name="LinkEnd" select="string('" >')"/>
<xsl:variable name="LinkVar" select="concat($LinkStart,$LinkClass,$LinkEnd)"/>
<xsl:variable name="CloseATag" select="string('</a>')"/>
<!-- build the list items for the top tabs -->
<li>
<xsl:value-of select="$LinkVar" disable-output-escaping="yes"/>
<xsl:value-of select="substring-after(@MegaHeader., ';#')"/>
<xsl:value-of select="$CloseATag" disable-output-escaping="yes"/>
<!-- create a container for each menu panel -->
<div class="sub">
<xsl:variable name="RowLoop" select="key('MHeaders', @MegaHeader_x003a_Order)[generate-id() = generate-id(key('MRows', concat(@MegaHeader_x003a_Order, '-', @MenuRow))[1])]"/>
<xsl:for-each select="$RowLoop">
<!-- create a container for each row -->
<div class="row">
<xsl:variable name="ColumnLoop" select="key('MRows', concat(@MegaHeader_x003a_Order, '-', @MenuRow))[generate-id() = generate-id(key('MColumns', concat(@MegaHeader_x003a_Order,'-', @MenuRow,'-', @MenuColumn))[1])]"/>
<xsl:for-each select="$ColumnLoop">
<!-- start a new unordered list for each column -->
<!-- if column width is specified, use that as a class -->
<xsl:variable name="SpanTagStart" select="string('<ul ')"/>
<xsl:variable name="SpanTagClass">
<xsl:choose>
<xsl:when test="@ItemWidth != string('default')">
<xsl:value-of select="concat(string('class="span'),@ItemWidth,string('" '))"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="''"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="SpanTagEnd" select="string('>')"/>
<xsl:variable name="SpanTagOpen" select="concat($SpanTagStart,$SpanTagClass,$SpanTagEnd)"/>
<xsl:variable name="SpanTagClose" select="string('</ul>')"/>
<xsl:value-of select="$SpanTagOpen" disable-output-escaping="yes"/>
<!-- start a new unordered list for each column -->
<xsl:variable name="ItemLoop" select="key('MColumns', concat(@MegaHeader_x003a_Order,'-', @MenuRow,'-', @MenuColumn))"/>
<xsl:for-each select="$ItemLoop">
<!-- build the a href tag if we have a link -->
<xsl:variable name="ItemLinkStart" select="string('<a href="')"/>
<xsl:variable name="ItemLinkURL"><xsl:value-of select="@MenuLink"/></xsl:variable>
<xsl:variable name="ItemLinkVar">
<xsl:choose>
<xsl:when test="string-length(@MenuLink) > 0">
<xsl:value-of select="concat($ItemLinkStart,$ItemLinkURL,$LinkEnd)"/>
</xsl:when>
<xsl:otherwise><xsl:value-of select="''"/></xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- build the list items -->
<li>
<!-- if we have a Title, format as h2 -->
<xsl:choose>
<xsl:when test="string-length(@MenuLink) > 0 and string-length(@Title) > 0">
<!-- title and link -->
<h2>
<xsl:value-of select="$ItemLinkVar" disable-output-escaping="yes"/>
<xsl:value-of select="@Title"/>
<xsl:value-of select="$CloseATag" disable-output-escaping="yes"/>
</h2>
</xsl:when>
<xsl:when test="string-length(@MenuLink) = 0">
<!-- title only -->
<h2>
<xsl:value-of select="@Title"/>
</h2>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$ItemLinkVar" disable-output-escaping="yes"/>
<xsl:value-of select="@MenuLink.desc"/>
<xsl:value-of select="$CloseATag" disable-output-escaping="yes"/>
</xsl:otherwise>
</xsl:choose>
<xsl:if test="string-length(@ItemImage) > 0">
<img border="0" src="{@ItemImage}" alt="{@ItemImage.desc}"/>
</xsl:if>
<xsl:if test="string-length(@ItemBody) > 0">
<xsl:value-of select="@ItemBody" disable-output-escaping="yes"/>
</xsl:if>
</li>
</xsl:for-each>
<xsl:value-of select="$SpanTagClose" disable-output-escaping="yes"/>
</xsl:for-each>
</div>
</xsl:for-each>
</div>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
</Xsl>
<xsl:key name="MHeaders" match="Row" use="@MegaHeader_x003a_Order"/>
<xsl:key name="MRows" match="Row" use="concat(@MegaHeader_x003a_Order, '-', @MenuRow)"/>
<xsl:key name="MColumns" match="Row" use="concat(@MegaHeader_x003a_Order,'-', @MenuRow,'-', @MenuColumn)"/>
<xsl:variable name="LinkStart" select="string('<a href="#" class="')"/>
<xsl:variable name="LinkClass"><xsl:value-of select="@MegaHeader_x003a_CssClass"/></xsl:variable>
<xsl:variable name="LinkEnd" select="string('" >')"/>
<xsl:variable name="LinkVar" select="concat($LinkStart,$LinkClass,$LinkEnd)"/>
<xsl:variable name="CloseATag" select="string('</a>')"/>
<!-- build the list items for the top tabs -->
<li>
<xsl:value-of select="$LinkVar" disable-output-escaping="yes"/>
<xsl:value-of select="substring-after(@MegaHeader., ';#')"/>
<xsl:value-of select="$CloseATag" disable-output-escaping="yes"/>
<a class=”MyClass” href=”#”>TheFirstTab</a>
<xsl:variable name="SpanTagStart" select="string('<ul ')"/>
<xsl:variable name="SpanTagClass">
<xsl:choose>
<xsl:when test="@ItemWidth != string('default')">
<xsl:value-of select="concat(string('class="span'),@ItemWidth,string('" '))"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="''"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="SpanTagEnd" select="string('>')"/>
<xsl:variable name="SpanTagOpen" select="concat($SpanTagStart,$SpanTagClass,$SpanTagEnd)"/>
<xsl:variable name="SpanTagClose" select="string('</ul>')"/>
<xsl:value-of select="$SpanTagOpen" disable-output-escaping="yes"/>
<xsl:value-of select="$SpanTagClose" disable-output-escaping="yes"/>
ul#topnav li .sub ul{
list-style: none; /*--This is in the original CSS--*/
margin: 0; padding: 0;
width: 180px;
float: left;
}
ul#topnav li .sub ul.span2{
width: 360px; /*--This is a new definition--*/
}
ul#topnav li .sub ul.span3{
width: 540px; /*--This is a new definition--*/
}
ul#topnav li .sub ul.span4{
width: 720px; /*--This is a new definition--*/
}
<script type="text/javascript" src="/managedPath/siteName/Resource Library/jquery.min.js"></script>
<script type="text/javascript" src="/managedPath/siteName/Resource Library/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//On Hover Over
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
(function($) {
//Function to calculate total width of all ul's
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() { //for each ul...
rowWidth += $(this).width(); //Add each ul's width together
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
$(this).find(".row").each(function() { //for each row...
$(this).calcSubWidth(); //Call function to calculate width of all ul's
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
$(this).find(".sub").css({'width' :biggestRow}); //Set width
$(this).find(".row:last").css({'margin':'0'}); //Kill last row's margin
} else { //If row does not exist...
$(this).calcSubWidth(); //Call function to calculate width of all ul's
$(this).find(".sub").css({'width' : rowWidth}); //Set Width
}
}
//On Hover Out
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
$(this).hide(); //after fading, hide it
});
}
//Set custom configurations
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
$("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configurations
});
</script>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (9)
Commented:
Name Error: The domain name does not exist.
---
So I cannot join in the laughter...
(This is 450 points off btw ;-)
Tolomir (EE points clerk)
Author
Commented:If you are familiar with the concept of mega menus in general, then you may get the gist of the project's idea from the screenshots posted in the article. Otherwise, any bingle for "mega menu" should get you samples of mega menus in the real web.
When the sohtanaka web site is down, you can't donwload the CSS, though, so I'll upload the CSS and the complete XSLT file here for your convenience.
cheers, teylyn
MegaMenu.css
MegaMenuXSLT.txt
Commented:
Author
Commented:Author
Commented:The link in my above article to the demo of the MegaMenu has died.
Fear not. The Wayback machine comes to the rescue. Here are the links to the content that does not work anymore from the links above.
MegaMenu Demo
Background on the MegaMenu CSS and HTML structure
cheers, teylyn
View More