Pure CSS Mega Menu

[marypotter]

I can't seem to get this to work on my page.

I wonder if it's because I'm using a template I bought?

dasterisk.com/theglobe

I added the files to the proper directory and added the code to the end of the tpl_header.php right before the last <?php } ?>

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

I made all the changes in the admin settings and turned off the header category tabs.

When I load the page in Chrome I get the following errors, but I don't think any of them have to do with what I'm doing wrong in the menu:

carouFredSel: Set a height for the items!
carouFredSel: No element found for "#sidebox_slider".
carouFredSel: No element found for "#carousel".
carouFredSel: No element found for "#images".
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
Uncaught SecurityError: Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://dasterisk.com". Protocols, domains, and ports must match.
Uncaught SecurityError: Blocked a frame with origin "https://s-static.ak.facebook.com" from accessing a frame with origin "http://dasterisk.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Uncaught SecurityError: Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://dasterisk.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

[picaflor-azul]

I can't seem to get this to work on my page.

I wonder if it's because I'm using a template I bought?

dasterisk.com/theglobe

I added the files to the proper directory and added the code to the end of the tpl_header.php right before the last <?php } ?>

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

I made all the changes in the admin settings and turned off the header category tabs.

When I load the page in Chrome I get the following errors, but I don't think any of them have to do with what I'm doing wrong in the menu:

carouFredSel: Set a height for the items!
carouFredSel: No element found for "#sidebox_slider".
carouFredSel: No element found for "#carousel".
carouFredSel: No element found for "#images".
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
Uncaught SecurityError: Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://dasterisk.com". Protocols, domains, and ports must match.
Uncaught SecurityError: Blocked a frame with origin "https://s-static.ak.facebook.com" from accessing a frame with origin "http://dasterisk.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Uncaught SecurityError: Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://dasterisk.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

I would recommend contacting the author of the template to see if their coding is causing the problem. Just fyi, the pure css mega menu is not responsive.

Thanks,

Anne

[eranariel]

Mega Menu – extended capabilities …
I am looking into extending the capabilities of the mega menu by adding category and subcategory images within the menu. I can get a category inserted into the menu, however, cannot do so on the 3rd level with subcategories... any suggestions?

I have created individual categories on the mega menu by creating separate categories_ul_generator.php files for each category - changing the var $root_category_id to the specific category id and saving the file under a separate name and accordingly revising so that zen_categories_ul_"name"_generator is adjusted within the file as well as the function buildTree"name"($submenu=true) is also adjusted to coincide with the new name (example: categories_ul_generator_zz.php).

In this manner, I can adjust the tpl_mega_menu.php file by adding an image to represent the category such as in the following code, however, I cannot gain access to the subcategory....

<li class="categories-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_JUDAICA; ?></a><!-- bof Judaica -->
<div class="dropdown_1column">
<div class="col_1 firstcolumn">
<div class="levels">
<a href= http://www.emanuelstudio.org/index.php?main_page=index&cPath=189><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.JUDAICA_ICON ?>" alt="Judaica" class="judaica-icon" /></a><br><br>

</div>

<div class="levels">
<?php

[mpforum]

I've been notified by a customer that they cant open the menu without it loading another page where they can't go into any sub categories. Is there any way to click on the drop down menu and have it open without opening a link?

Website is coffshomebrew.com.au

[DarkAngel]

I've been notified by a customer that they cant open the menu without it loading another page where they can't go into any sub categories. Is there any way to click on the drop down menu and have it open without opening a link?

Website is coffshomebrew.com.au

did you get this fixed? I just went to the link and tried clicking the main mink for each category then clicked several categories listed below that primary link and the only one that I could not get a page for was the site map.

[swdynamic]

I am trying to adjust the categories drop down level 1 to much wider and shorter and turning off the 2nd level and below. if using the chrome dev tools and change size for the two components there...it looks great, EXCEPT...it changes all other right side level 1 drop downs as well...Quick Links, etc. I just want the Categories to be different.

This link will show a screen shot of first change made
https://onedrive.live.com/redir?resi...nt=photo%2cpng


This Link will show a screen shot of 2nd change to get the look I prefer...
https://onedrive.live.com/redir?resi...nt=photo%2cpng

The changes have been made to the following lines as shown below...

/* bof drop down styles */
.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service,
.mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {margin:4px auto;left:-999em;position:absolute;border:0px solid #494949;background:#191816;padding:10px;text-align:left;-moz-border-radius: 0px 5px 5px 5px;-webkit-border-radius: 0px 5px 5px 5px;-khtml-border-radius: 0px 5px 5px 5px;border-radius: 0px 5px 5px 5px;background: -moz-linear-gradient(top, #2c2b2a, #191816);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2c2b2a), to(#191816));background: -o-linear-gradient(top, #2c2b2a, #191816);}

.mega-menu .dropdown_1column {width: 545px;}
.mega-menu .dropdown_2columns {width: 300px;}
.mega-menu .dropdown_customer_service {width: 605px;}
.mega-menu .dropdown_aboutus {width: 585px;}
.mega-menu .dropdown_info {width: 470px;}

/* bof drop down on mouse hover left aligned */
.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}

/* bof drop down on mouse hover right aligned */
.mega-menu li .align_right {-moz-border-radius: 5px 0px 5px 5px;-webkit-border-radius: 5px 0px 5px 5px;border-radius: 5px 0px 5px 5px;}
.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}

/* bof column sizes */
.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}
.mega-menu .col_1 {width: 545px;}
.mega-menu .col_2 {width:300px;}
.mega-menu .col_cs {width:605px;}
.mega-menu .col_aboutus {width:585px;}
.mega-menu .col_3 {width:455px;}
.mega-menu .col_4 {width:610px;}
.mega-menu .col_5 {width:765px;}
.mega-menu .col_6 {width:920px;}

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown */
.mega-menu .firstcolumn {margin-left: 0; /* Clearing margin &

Above partial of Mega_menu.css file through Dev Tools also. No changes made to actual yet.

I tried changing the (mega-menu .dropdown_1column ) to .dropdown_3 & 4column but just messed entire menu up completely.

I would like to have quicklinks, shop by brand, and information drop downs to remain stock. AAARRRGGGHHH!!! Could anyone possibly point me in the right direction as to what area(s) I should be looking in?

Thank You in Advance for the assist.
Have a Blessed Day

[swdynamic]

I think I found how to do it...I could still use a pointer if this doesn't seem to be the proper way, but I believe that if I change the "Products" or "Categories" drop down li-class, div-classes etc from dropdown_1column and such too aboutus class and li/ul, it appears to change the menu to a width that I can live with and changed both the drop down background as well as the lists at the same time and did not appear to change any of the other drop downs.

Should this work without causing site issues?

Thanks again in advance

[kdlklm]

Is it possible without too much altering, to make this so that the main columns are horizontal across the top of the page, and each subcategory drops down. I can't seem to find anything like that.

[toomanyknots]

Hello. I'm having trouble getting this to work. I am attempting to test this out on a fresh 1.5.4 install on wamp on my local server. I have currently tried installing the mega menu on the responsive avonlee contempo template, and the normal avonlee contempo template, to no avail. The problem comes after I add the code to tpl header:

"3. In your favorite plain text editor, open the includes/templates/YOUR_TEMPLATE/common/tpl_header.php file. If you do not already have this file in your template override directory, make an override for it by coping the includes/templates/template_default/common/tpl_header.php to includes/templates/YOUR_TEMPLATE/common/tpl_header.php.

Directly before the ending line:

<?php } ?>

Add this code:

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

Save the file."

What happens is everything on the website disappears except the header. It is strange, and I am not sure what is the problem. Is this menu compatible with 1.5.4?

[toomanyknots]

My Original tpl header:

" </div>

<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>


</div>

<br class="clearBoth" />
<!--eof-branding display-->



<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a> | </li>
<?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a> | </li>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | </li>
<?php
} else {
if (STORE_STATUS == '0') {
?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a> | </li>
<?php } } ?>
<li><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.HEADER_ICON_CART ?>" alt="cart icon" class="cart-icon" /><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo $_SESSION['cart']->count_contents();?> <?php echo HEADER_TITLE_CART_ITEMS; ?> - <?php echo $currencies->format($_SESSION['cart']->show_total());?></a> | </li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<?php }?>
</ul>
</div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->





<!--eof-header logo and navigation display-->


<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof handheld menu display-->
<?php require($template->get_template_dir('tpl_modules_mobile_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_mobile_categories_tabs.php'); ?>
<!--eof handheld menu display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<?php } ?>"



-After the code is added (I am adding it in the correct place, right?):



</div>

<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>


</div>

<br class="clearBoth" />
<!--eof-branding display-->



<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a> | </li>
<?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a> | </li>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | </li>
<?php
} else {
if (STORE_STATUS == '0') {
?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a> | </li>
<?php } } ?>
<li><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.HEADER_ICON_CART ?>" alt="cart icon" class="cart-icon" /><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo $_SESSION['cart']->count_contents();?> <?php echo HEADER_TITLE_CART_ITEMS; ?> - <?php echo $currencies->format($_SESSION['cart']->show_total());?></a> | </li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<?php }?>
</ul>
</div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->





<!--eof-header logo and navigation display-->


<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof handheld menu display-->
<?php require($template->get_template_dir('tpl_modules_mobile_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_mobile_categories_tabs.php'); ?>
<!--eof handheld menu display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<!--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>
<?php } ?>