Pure CSS Mega Menu

[danielosko]

OOPS!

I just found out what I did wrong..., For some reason when I copied the code to paste into the tpl_header.php..., it created a space between the < and the first character of code. example: < ? instead of <?.

DUH!
Thanks anyway,
Danny

[picaflor-azul]

OOPS!

I just found out what I did wrong..., For some reason when I copied the code to paste into the tpl_header.php..., it created a space between the < and the first character of code. example: < ? instead of <?.

DUH!
Thanks anyway,
Danny

I am happy that you figured it out ;)

Thanks,

Anne

[picaflor-azul]

Hi Anne...

I installed this module and have a questions about brands. I would like to replace the brands (as I won't be using any) with reviews. Is it possible to do this? Thanks.

Yes, you can edit the includes/templates/override/common/tpl_mega_menu.php file.

Thanks,

Anne

[picaflor-azul]

Looking for a little help customising Mega-menu

We’ve made a decision to have 9 new Top level categories along a horizontal navigation marked on the attached image in pink. This has been done by taking the standard megamenu dropdown labelled “shop” and copying that piece of code from the tpl megamenu file 9 times and changing the name at the top of each.

The dropdown, which is marked in blue, is what would usually be Top level cats, and the sub of that, which is marked in green, would be the level 2.

What I’m trying to do is get the green bit where the blue bit should be. I simply need to move everything up a level, and find some way to tie that in to my own pink 9 top categories.

I’ve looked at the megamenu generator and other pieces of code with no joy.

Can anyone give me any starters on how this can be achieved?

Thanks for any input.

Kristian
Attachment 13178

If you post a link to your site I can take a look.

If you only want to show the top level catetgories, I would recommend using this menu as it will need much less customization:

http://www.zen-cart.com/downloads.php?do=file&id=1243

Thanks,

Anne

[danielosko]

Hi Anne,

The Mega Menu was installed and worked great! However, I noticed that I had a large blank area at the bottom of every page on the website. (see pic). So I uninstalled the menu and all pages displayed normally, with only a few pixels of blank spaces which are wanted. I re-installed the menu and the menu once again worked great, but the large blank area returned.



If I simply remove the code in the tpl_header.php all pages display normally.., but when I include it I get like 12" of blank space.

<!--bof-mega menu display-->
<?php require($template->get_template_dir('tpl_mega_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_mega_menu.php'); ?>
<!--eof-mega menu display-->
<div class="clearBoth"></div>

Any ideas on how to resolve the issue?
Thank You Much!
Danny

[picaflor-azul]

Hi Anne,

The Mega Menu was installed and worked great! However, I noticed that I had a large blank area at the bottom of every page on the website. (see pic). So I uninstalled the menu and all pages displayed normally, with only a few pixels of blank spaces which are wanted. I re-installed the menu and the menu once again worked great, but the large blank area returned.



If I simply remove the code in the tpl_header.php all pages display normally.., but when I include it I get like 12" of blank space.

<!--bof-mega menu display-->
<?php require($template->get_template_dir('tpl_mega_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_mega_menu.php'); ?>
<!--eof-mega menu display-->
<div class="clearBoth"></div>

Any ideas on how to resolve the issue?
Thank You Much!
Danny

I have not looked at your site, but my guess is that it is the length of your manufacturers and/or shop categories that is causing the space.

Thanks,

Anne

[danielosko]

Wow Anne.., your GOOD!

That is exactly what is causing it. Do you know where in the CSS that I can make the spacing between the "Shop" category titles and also the "Brands" name titles smaller?

Thanks again,
Danny

[picaflor-azul]

Wow Anne.., your GOOD!

That is exactly what is causing it. Do you know where in the CSS that I can make the spacing between the "Shop" category titles and also the "Brands" name titles smaller?

Thanks again,
Danny

If you post a link to your site I can take a look ;)

Thanks,

Anne

[danielosko]

Hi Anne,

Thanks, but the site is under development on my local server. I found out where to adjust the line spacing, (line height), here is the code:

.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;line-height:15px;}

However, the "Brands" list of the manufacturer names is still too long. So I guess I'm left with one of three options:
1) Remove the "Brands" container
2) Shorten the list of manufacturer names within the "Brands" container
3) or preferably convert the "Brands" container into three columns.

Unfortunately, I can not find enough detailed information about doing any of them.

Any thoughts or tips?
Danka,
Danny

[danielosko]

Hi All,

I figured out how to make the "Brands" container into TWO columns instead of one.

First, open the tpl_mega_menu.php file.

Next, find:

<li class="manufacturers-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_MANUFACTURERS; ?></a><!--bof shop by brand -->
<div class="dropdown_1column">
<div class="col_1 firstcolumn">

<ul >
<?php

$show_manufacturers= true;

// for large lists of manufacturers uncomment this section
/*
if (($_GET['main_page']==FILENAME_DEFAULT and ($_GET['cPath'] == '' or $_GET['cPath'] == 0)) or ($request_type == 'SSL')) {
$show_manufacturers= false;
} else {
$show_manufacturers= true;
}
*/

and REPLACE it with:

<li class="manufacturers-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_MANUFACTURERS; ?></a><!--bof shop by brand -->
<div class="dropdown_2columns">
<div class="col_2">

<ul >
<?php

$show_manufacturers= true;

// for large lists of manufacturers uncomment this section

if (($_GET['main_page']==FILENAME_DEFAULT and ($_GET['cPath'] == '' or $_GET['cPath'] == 0)) or ($request_type == 'SSL')) {
$show_manufacturers= false;
} else {
$show_manufacturers= true;
}

That's it, you now have two columns in your "Brands" container.

Hope this helps someone else as well.
Danny