mega menu help

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
toolman
Forum Members
Forum Members
Posts: 51
Joined: Wed Sep 12, 2007 5:10 pm

mega menu help

Post by toolman »

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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: mega menu help

Post by Dr.CSS »

Yup...
toolman
Forum Members
Forum Members
Posts: 51
Joined: Wed Sep 12, 2007 5:10 pm

Re: mega menu help

Post by toolman »

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]
toolman
Forum Members
Forum Members
Posts: 51
Joined: Wed Sep 12, 2007 5:10 pm

Re: mega menu help

Post by toolman »

Does anyone have any ideas whats wrong?
Post Reply

Return to “Layout and Design (CSS & HTML)”