Support for CSS Flyout Menu

[GraniteMan44]

It appears I may have put my questions regarding the disappearance of my headerWrapper and logoWrapper after installing CSS Flyout menu in the wrong thread. How can I get those back so that my images will show up in the header?

zc 1.3.7
http://www.monumentsplus.com

Thanks in advance.

[Get Em Fast]

It appears I may have put my questions regarding the disappearance of my headerWrapper and logoWrapper after installing CSS Flyout menu in the wrong thread. How can I get those back so that my images will show up in the header?

zc 1.3.7
http://www.monumentsplus.com

Thanks in advance.

No, you had it in the right thread before..........wrong thread this time. This is for the CSS Flyout Menu.........not dropdown. It's a vertical Sidebox Menu.

But...............I do see your problem. In your includes/templates/CM_2/common/tpl_header.php find this section of code:

<!--<div id="logoWrapper">
    <div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>-->

and change that section to:

<div id="logoWrapper">
    <div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>

Notice the <!-- and the --> is what's 'killing' you. You cannot have your php code inside those.

Hope this helps.

[GraniteMan44]

No, you had it in the right thread before..........wrong thread this time. This is for the CSS Flyout Menu.........not dropdown. It's a vertical Sidebox Menu.

But...............I do see your problem. In your includes/templates/CM_2/common/tpl_header.php find this section of code:

Code:

<!--<div id="logoWrapper">
<div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>-->

and change that section to:

Code:

<div id="logoWrapper">
<div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>

Notice the <!-- and the --> is what's 'killing' you. You cannot have your php code inside those.

Hope this helps.

I couldn't find that code in my /includes/templates/CM_2/common/tpl_header.php file. Here is what my tpl.header.php file contains:

<?php
/**
* Common Template - tpl_header.php
*
* this file can be copied to /templates/your_template_dir/pagename<br />
* example: to override the privacy page<br />
* make a directory /templates/my_template/privacy<br />
* copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
* to override the global settings and turn off the footer un-comment the following line:<br />
* <br />
* $flag_disable_header = true;<br />
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
*/
?>

<?php
// Display all header alerts via messageStack:
if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
}
if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
echo htmlspecialchars(urldecode($_GET['error_message']));
}
if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">
<!--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 } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--bof-branding display-->

<!--<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>-->


<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
}
?>
<?php
if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
</div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

<!--eof-header logo and navigation 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-->


<!--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-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->

<div class="clearBoth"></div>



<?php } ?>

[gjh42]

I haven't read this thread in some time, and see that there are several requests for individualized category treatments of various kinds, and suggestions that Categories Dressing can do them at the cost of losing flyouts.
It's true that flyout styling is not built into CD, but I believe that it could be applied (using the chcategories option). CD has a correct ul/li structure underneath the individualized tags.

[gjh42]

<!--bof-branding display-->

<!--<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>-->

These are the HTML comment tags that are causing your problem.

[gjh42]

Just tested some flyout code on Categories Dressing, and it does work without impeding any other mod styling or function.
Something like this (adjusted to #chcategories):

#categories ul ul {display: none;}
#categories li:hover {position: relative;}
#categories li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:100; width:140px;}
#categories ul ul ul {display: none;}
#categories li li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:200; width:140px;}
#categories ul ul ul ul {display: none;}
#categories li li li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:300; width:140px;}

We now return you to your regularly scheduled mod... :)

[gjh42]

Just missed the edit window... it can be simplified to

#categories ul ul {display: none;}
#categories li:hover {position: relative;}
#categories li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:100; width:140px;}

[Get Em Fast]

Ya' know, Glen, I've been meaning for quite some time to see if maybe these two could be merged. That would make an absolute great menu..............add a couple lines of jquery to go with it (I've actually got the Horizontal CSS Dropdown Menu working very nicely with jquery, and am about to add a jquery version of it AND this one)........hmmmm........
But, oh...........I've just been sooooooo busy, lately. Not that I'm complaining, or anything...............

[sportbiker]

I'm curious - it seems there was some discussion about Category Dressing being able to work with this mod http://www.zen-cart.com/forum/showpo...&postcount=590 but I'm not clear on the final outcome. Was this achieved? I'd hate to tweak a working flyout menu system if Category Dressing doesn't work.

Ultimately, I'm just looking to add headers in the menu system.

[gjh42]

It's not that Categories Dressing can work with this mod, but that you can get flyout functionality in CD with a few style rules added to it. There is more detail in the CD support thread.