CMS Made Simple Forums

Hi,

I have created a mega menu that works fine offline/on a static page, but when I try to apply it to my cssmenu_ulshadow.tpl file, it doesn't work.

Can anyone see anything wrong with this code?

[php]
.....
{else}


alias}">
{if $node->alias == 'services'}
services

       
        Products
           
           
                Desktop
                Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link

                    Navigation Link
                    Navigation Link
                    Navigation Link
               
               
                Laptop
                Navigation Link

                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link

               
               
                Accessories
                Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link

                    Navigation Link
                    Navigation Link
                    Navigation Link
               
               
                Accessories
                Navigation Link

                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link

               
               
           
           
           
           
           
$(document).ready(function() {


function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);

if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {  
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});

} else { //If row does not exist...

$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});

}
}

function megaHoverOut(){
  $(this).find(".sub").stop().fadeTo('fast', 0, function() {
  $(this).hide();
  });
}


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'});
$("ul#topnav li").hoverIntent(config);



});




{/if}
[/php]

Any help would be great. Thanks

Yup...

That is not all the code. I just pasted the part I have modified.

This is the whole code of that file:

[php]
{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='' times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string=' ' times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

current == true}

haschildren == true}

type == 'sectionheader' and $node->haschildren == true}
{$node->menutext} {elseif $node->type == 'separator'}
{else}


alias}">
{if $node->alias == 'services'}
services

       
        Products
           
           
                Desktop
                Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link

                    Navigation Link
                    Navigation Link
                    Navigation Link
               
               
                Laptop
                Navigation Link

                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link

               
               
                Accessories
                Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link

                    Navigation Link
                    Navigation Link
                    Navigation Link
               
               
                Accessories
                Navigation Link

                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link
                    Navigation Link

               
               
           
           
           
           
           
$(document).ready(function() {


function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);

if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {  
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});

} else { //If row does not exist...

$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});

}
}

function megaHoverOut(){
  $(this).find(".sub").stop().fadeTo('fast', 0, function() {
  $(this).hide();
  });
}


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'});
$("ul#topnav li").hoverIntent(config);



});




{/if}



type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}">{$node->menutext}
{elseif $node->type == 'sectionheader'}
>{$node->menutext}
{/if}
{/foreach}
{repeat string=' ' times=$node->depth-1}




{/if}
[/php]

Does anyone have any ideas whats wrong?