Pure CSS Mega Menu

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

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

I am happy that you figured it out ;)

Thanks,

Anne

amandavz:

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

liquidpics:

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

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

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-->

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

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

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

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

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

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

Thanks,

Anne

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

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:smile:

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:

and REPLACE it with:

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

Hope this helps someone else as well.
Danny:smile:

Thanks for posting your solution ;) If you read further back in the thread I believe that there are also some suggestions for converting the catgegories drop down to a multi column which could be applied to the brands drop down as well.

Thanks,

Anne

How to have menu bar with no gradient background, but trasparent?

100asa:

How to have menu bar with no gradient background, but trasparent?

You will edit the includes/templates/override/css/stylesheet_mega_menu.css file.

Thanks,

Anne

picaflor-azul:

You will edit the includes/templates/override/css/stylesheet_mega_menu.css file.

Thanks,

Anne
Thank you so much Anne, but if I asked for help in this forum means I'm not able to do so.

100asa:

Thank you so much Anne, but if I asked for help in this forum means I'm not able to do so.

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

Thanks,

Anne

picaflor-azul:

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

Thanks,

Anne

https://Www.100asa.it
Thank you very much

100asa:

How to have menu bar with no gradient background, but trasparent?

picaflor-azul:

You will edit the includes/templates/override/css/stylesheet_mega_menu.css file.

Thanks,

Anne

Find this rule:

#mega-wrapper .mega-menu{width:940px;background:transparent;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background:#444;background:-moz-linear-gradient(top,#ccc,#383838);background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ccc),to(#383838));border:1px solid #444;-moz-box-shadow:inset 0px 0px 1px #edf9ff;-webkit-box-shadow:inset 0px 0px 1px #edf9ff;box-shadow:inset 0px 0px 1px #edf9ff;list-style:none;margin:30px auto 0px auto;height:40px;padding:0px 20px 0px 20px;}

change to this:

#mega-wrapper .mega-menu{width:940px;background:transparent;/* -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background:#444;background:-moz-linear-gradient(top,#ccc,#383838);background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ccc),to(#383838));border:1px solid #444;-moz-box-shadow:inset 0px 0px 1px #edf9ff;-webkit-box-shadow:inset 0px 0px 1px #edf9ff;box-shadow:inset 0px 0px 1px #edf9ff;*/list-style:none;margin:30px auto 0px auto;height:40px;padding:0px 20px 0px 20px;}

or this: (but not both)

#mega-wrapper .mega-menu{width:940px;background:transparent;list-style:none;margin:30px auto 0px auto;height:40px;padding:0px 20px 0px 20px;}

Ray

Than you rbarbour, works great!

I've 4 email address for recipient contact_us page; the email send from contact_us box on mega menu don't send and so don't arrive.

100asa:

I've 4 email address for recipient contact_us page; the email send from contact_us box on mega menu don't send and so don't arrive.

The form is currently set up for 1 email address only. You will need to make adjustments if you want to use it with the email drop down like on the standard contact us form.

Thanks,

Anne