Pure CSS Mega Menu

Now I've setup in configuration-->email only one email address into contact_us dropdown; from contact_us page, email sending successfully, but not from the box mega-menu. How can setup a default address for contact_us page?

100asa:

Now I've setup in configuration-->email only one email address into contact_us dropdown; from contact_us page, email sending successfully, but not from the box mega-menu. How can setup a default address for contact_us page?

Out of the box, the mega menu contact us form does work. I would recommend restoring the original tpl_mega_menu.php file.

Thanks,

Anne

Hi All,
I love this menu, but it was important to me that my site menu 'work' on a mobile device. The current issue is that the headers are set to be links which return you to the main page when clicked. I just wanted the menu to show, but not refresh the page in any way.
Just to let you know the mod I have done for mobile devices....

I searched the web for a 'fake' link and the solution I used was this:

where each header link is generated in tpl_mega_menu.php I replaced the php href link code with a null javascript call as follows:

Existing link code:

Modified link code:

      <li class="information-li"><a href="javascript:;" class="drop"><?php echo HEADER_TITLE_INFORMATION; ?></a>

Repeat this change for every header link.

I'm not a web developer and this may be a hack, but it was very important this menu worked on touch screen devices for me.
I hope this help others with mobile devices and this menu.

Logicalstep

logicalstep:

Hi All,
I love this menu, but it was important to me that my site menu 'work' on a mobile device. The current issue is that the headers are set to be links which return you to the main page when clicked. I just wanted the menu to show, but not refresh the page in any way.
Just to let you know the mod I have done for mobile devices....

I searched the web for a 'fake' link and the solution I used was this:

where each header link is generated in tpl_mega_menu.php I replaced the php href link code with a null javascript call as follows:

Existing link code:

<li class="information-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_INFORMATION; ?></a><!-- bof information -->

Modified link code:

      <li class="information-li"><a href="javascript:;" class="drop"><?php echo HEADER_TITLE_INFORMATION; ?></a>

<!-- bof information -->

Repeat this change for every header link.

I'm not a web developer and this may be a hack, but it was very important this menu worked on touch screen devices for me.
I hope this help others with mobile devices and this menu.

Logicalstep

Thanks for posting your solution. I hope that it helps others ;)

Thanks,

Anne

Hi Anne,

Firstly, thanks for the script and the support you've given on it. I've already learned a lot!

But... I can't see how to get the UL Generator to do what I'm looking for.

I've already followed another thread and managed to create all of my top levels as separate drop-downs by copying the code as shown in this guide: http://nigeltsblog.blogspot.co.uk/2013/06/adding-seperate-category-dropdown-for.html All good so far.

What I'm trying to do is to get all of the Sub 1 and Sub 2 to list under the top Level.

I've photoshop'd a before and after to explain it clearer.

I'm sure this is something to do with the UL Generator and the TPL, but after a week of trying, I bow down to anyone with knowledge, as my trial and error is leading nowhere fast.

Once again, many thanks

Kristian

The stylesheet will be the primary means of making all subcats display under their categories. You would change the level of the "Work Jackets" etc. to not be hidden and display on hover of the level above, but always display: block;. Getting the columns without changing the coding would be more difficult. You would probably need to apply a multi-column code template to categories, as described many times in this thread.

Superb! Thanks for the pointers. Now we're really getting there. I adjusted the CSS and got everything together and looking the way it should. Just need to solve one more thing.

In the image, Level 5 (they are all sequential in sort order) is sitting beneath Level 4 due to a low number of sub cats, instead of starting a new column.

Is there any way in CSS to force a new column for each of the The Levels?

Thanks to everyone who has contributed.

Ky

nemáte někdo vyzkoušené mega menu na multishopu?
po nainstalování vypadalo vše ok, ale karegorie se zobrazili ze všech shopů i ty uplně zakázané

translated in translátoru

you do not have anyone tried mega menu on multistore?,
after you install it all ok, but the category will display all of the shops you completly disabled

Ien Cv:

nemáte někdo vyzkoušené mega menu na multishopu?
po nainstalování vypadalo vše ok, ale karegorie se zobrazili ze všech shopů i ty uplně zakázané

translated in translátoru

you do not have anyone tried mega menu on multistore?,
after you install it all ok, but the category will display all of the shops you completly disabled

You will need to edit some extra files.
find in includes\classes\categories_ul_generator.php :

    function zen_categories_ul_generator($load_from_database = true)
    {
        global $languages_id, $db;
        $this->data = array();
        $categories_query = "select c.categories_id, cd.categories_name, c.parent_id
                                        from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                                        where c.categories_id = cd.categories_id
                                        and c.categories_status=1 " .
                                        " and cd.language_id = '" . (int)$_SESSION['languages_id'] . "' " .
                                        " order by c.parent_id, c.sort_order, cd.categories_name";
        $categories = $db->Execute($categories_query));

and change to:

    function zen_categories_ul_generator($load_from_database = true)
    {
        global $languages_id, $db;
        $this->data = array();
        $categories_query = "select c.categories_id, cd.categories_name, c.parent_id
                                        from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                                        where c.categories_id = cd.categories_id
                                        and c.categories_status=1 " .
                                        " and cd.language_id = '" . (int)$_SESSION['languages_id'] . "' " .
                                        " order by c.parent_id, c.sort_order, cd.categories_name";
        $categories = $db->Execute(cat_filter($categories_query));

that should do the trick

jt3c:

Well, I have it only on a local server at this point. Was just coming back to post that I spoke too soon and can't seem to center the menu items with margin or padding.
Here's a screen shot if it'll help:

Not sure that that came through.

Anyway, in the css the "float: left;" in the following line is causing all links to justify to the left side of the menu bar.

.mega-menu li {float:left;text-align:center;position:relative;margin:6px 20px 0px 0;border:none;}

I want to center them. Can't float:center, so is there a way to do it some other way? As mentioned above I've messed with margins and padding in a variety of places but can't get the items to center on the bar with the same relative margins/padding amongst themselves. This would basically end up with roughly 300px to the left and right of the whole group of links and whatever is the default in relation to each other.

Any help is greatly appreciated as I'm obviously still a relative noob.
JT

If I understand you correctly, you want to centre the entire menu within the header. I share your grief. So many bells and whistles but no sweet solution for this.

One albeit messy and approximate way to do it is by editing the menu wrapper in stylesheet_mega_menu.css.

#mega-wrapper {
width: 980px; /change 980px to an em value (eg 50em) that is only a few ems wider than the greatest width of your menu at various zooms. Applying an background colour will let you see the result. Too small a value and the menu may wordwrap./
margin:0 auto; /* auto must remain as it centralises menu./
display:block;
position: relative;
z-index:9999;
background:#ff0; / Optional. For checking width. Can be retained if desired. /
padding-left:2em; / this is the trick. Adjust this value until the menu looks near enough centred at various zooms. */
}

There are other ways to do this, (eg changing display:block; to display:table; etc) but I have yet to get them to work as desired.

Hope this helps.

dw08gm:

If I understand you correctly, you want to centre the entire menu within the header. I share your grief. So many bells and whistles but no sweet solution for this.

One albeit messy and approximate way to do it is by editing the menu wrapper in stylesheet_mega_menu.css.

#mega-wrapper {
width: 980px; /change 980px to an em value (eg 50em) that is only a few ems wider than the greatest width of your menu at various zooms. Applying an background colour will let you see the result. Too small a value and the menu may wordwrap./
margin:0 auto; /* auto must remain as it centralises menu./
display:block;
position: relative;
z-index:9999;
background:#ff0; / Optional. For checking width. Can be retained if desired. /
padding-left:2em; / this is the trick. Adjust this value until the menu looks near enough centred at various zooms. */
}

There are other ways to do this, (eg changing display:block; to display:table; etc) but I have yet to get them to work as desired.

Hope this helps.

One way to easily do this would be to add a margin-left to the .mega-menu li. You would need to play with the numbers until you get one that will center all of the links within the #mega-wrapper.

.mega-menu li {float:left;text-align:center;position:relative;margin-right:20px;margin-top:6px;margin-left:60px /*or whatever number of pixels works*/ ;border:none;}

Thanks,

Anne

I'm attempting to add 'All Products' link to the bottom of the categories dropdown. I can achieve this by adding, in tpl_mega_menu.php, the all products link code like this:

            <div class="dropdown_1column">
                <div class="col_1 firstcolumn">
                   <div class="levels">
                       <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>                        
                   </div>   <a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a>
                </div>
               </div>

I'm having difficulty styling the link - applying inline css styling has no effect.

Does anyone have an ideas or better suggestions?

simon1066:

applying inline css styling has no effect.

Now should read 'has limited effect'. I can change the size and colour - can't change 'ALL PRODUCTS' to 'All Products' even with text-decoration css.

Can't help thinking the way I'm adding the link is a bit of a bodge.

simon1066:

I'm attempting to add 'All Products' link to the bottom of the categories dropdown. I can achieve this by adding, in tpl_mega_menu.php, the all products link code like this:

        <div class="dropdown_1column">
            <div class="col_1 firstcolumn">
               <div class="levels">
                   <?php

// load the UL-generator class and produce the menu list dynamically from there
require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
$zen_CategoriesUL = new zen_categories_ul_generator;
$menulist = $zen_CategoriesUL->buildTree(true);
$menulist = str_replace('"level4"','"level5"',$menulist);
$menulist = str_replace('"level3"','"level4"',$menulist);
$menulist = str_replace('"level2"','"level3"',$menulist);
$menulist = str_replace('"level1"','"level2"',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
$menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
echo $menulist;
?>
</div> <a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a>
</div>
</div>

> 
> I'm having difficulty styling the link - applying inline css styling has no effect.
> 
> Does anyone have an ideas or better suggestions?


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

It would be better to add the link inside a ul tag as a list item.  

Thanks,

Anne

picaflor-azul:

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

It would be better to add the link inside a ul tag as a list item.

Thanks,

Anne

By George you're right, just replacing my added code with

<ul> <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li></ul>

seems to work perfectly.

Thanks so much.

simon1066:

By George you're right, just replacing my added code with

I am happy that it worked ;0

Thanks,

Anne

Hi Anne,

One quick question and I'm finished!!! Thanks to your help on here, I have now made a full width multiple Top Level dropdown which looks great!

The final part is to only display categories and subs/sub subs that have an active product in them. I thought I'd seen it mentioned in this thread, but after half an hour of searching I can't see it.

Thought I'd post a screenshot of the menu now, and will find some time to explain it for other soon.

Hope you can help with the active categories only issue.

Thanks a million

Kristian

Hi Kristian

How did you achieve this? You are right the subject of categories is only touched on, no one actually explains how to do it.

Please do share. As I am trying to do the same.

**Hello:

I have installed this mod, but having problems. You can see @ http://realestatesignstore.com/

Any Help would be great.

Michael**

Right I tried the blog post http://nigeltsblog.blogspot.co.uk/2013/06/adding-seperate-category-dropdown-for.html to add all of my top categories, but I am only getting the one result come up. I have since changed the setup to sub-categories

Please could anyone advise. I am at the end of my tether here :frusty: