CSS Dropdown menu for the header- With Categories!

[gjh42]

You seem to have already found where to turn off the standard categories menu, whether it was categories-tabs or categories sidebox you meant.
To remove the navMain bar at the top of the header, open /includes/templates/your_template/common/tpl_header.php and comment out the first "navigation" section. If you want to be more specific and just remove those two links leaving the headerbar, you can delete the <li>...</li> items in question.

Sorry to be complicit in the hijack:)

[GraniteMan44]

I believe this is the correct thread for the CSS Flyout Header for Zen Cart v1.5. I posted this in the wrong thread before but I think this is finally the right place.

It appears I was premature in thinking I had the headerWrapper issue resolved after having problems with installing the categories flyout menu. To solve the problem I had to add a margin in my logoWrapper (see below).

Quote:
#headerWrapper {
background-image: url(../images/Header_1280x107.jpg);
background-position: top;
background-repeat: no-repeat;
padding: 0;
}



#logoWrapper{

margin-bottom: 8em;
padding: 0;}

While it seems to put a bandaid on the issue for FF and IE, the problem shows up in Chrome, Safari, and on my Blackberry browser. It seems that the (margin: 8em) I put in the logoWrapper is causing the alignment issues. If I don't put the margin in, my header image doesn't show up because the header colapses. Here is what I have in my tpl_header.php code. Maybe I have something wrong in it?

Quote:
<?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-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>


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


ZC 1.3.7
http://www.monumentsplus.com

[GraniteMan44]

btw....this all happened when I installed this mod

[DivaVocals]

Sorry to be complicit in the hijack:)

Grrrrrr.... No encouraging this..

[DivaVocals]

btw....this all happened when I installed this mod

Sorry to bust your bubble.. this is not the right support thread for the Flyout Menu..

[GraniteMan44]

I seem to get that no matter what thread I post in. I simply looked in the instructions and copied and pasted the "support thread" link and it sent me here.

[GraniteMan44]

Here is a copy of the instructions with this thread indicated as the place to go.

CSS Flyout Header for Zen Cart v1.5
=========================================

*~PLEASE READ THIS ENTIRE README.TXT BEFORE INSTALLING~*

Designed by Jade True - www.sagefish.com
Designed and tested on Zen Cart versions 1.3.6, 1.3.7 and 1.3.8

Tested Browsers: FireFox v1.5.0.4, FireFox 2.0, Opera v9.0, Safari 2.0.4, IE6***, IE7
*** Read the install section below for important information regarding IE6 and earlier support!!

You can view this menu in action at:
http://www.zencart137.jadetrue.com

Menu Support Thread:
http://www.zen-cart.com/forum/showthread.php?t=58629

*******************************************************
There are no restrictions on using this menu. Donations are not required, but accepted via Paypal at these addresses:

[email protected]
[email protected] (funded payments only)

Don't forget to donate to Zen Cart as well: http://www.zen-cart.com/index.php?ma...es&pages_id=14
*******************************************************

This add-on will allow you to have a horizontal css based flyout menu for your zen cart header. This mod was built upon a previous version for earlier versions of zen cart.

=====================================
Steps to Install CSS Flyout Header
=====================================

1. Be sure to change all folders named YOUR_TEMPLATE to your actual template name.

2. Upload the files to your website, retaining the folder structure.

3. If you have heavily modified your includes/templates/YOUR_TEMPLATE/common/tpl_header.php, instead of uploading the tpl_header.php included in this download, you can simply add this to your header where you'd like the css menu to appear:

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

4. I've added the ability to have your ezpages automatically shown in the INFORMATION drop down menu. To get this to work, follow these steps:

--> go to your admin, and go to "Tools", "Layout Boxes controller". There should be a new sidebox (ezpages_drop_menu.php). You must turn the SINGLE COLUMN STATUS TO ON, leave the LEFT/RIGHT COLUMN STATUS off.

--> Under "Tools", "EZPages", make sure the ezpages are set to ON for the header. The sort orders also have to be greater than "0".

--> If you want to have the regular zen cart horizontal header bar off, go to "Configuration", "EZPages Settings", and turn the header bar display status to off (0).

5. For full compatibility with IE browsers prior to IE7, you can add the sample code within the "additions to .htaccess" file to your ROOT folder's .htaccess file (if no file exists, you can create one. NOTE- if you were looking in your root folder, the .htaccess file would belong right above the "admin" folder). For example:

.htaccess <-- .htaccess belongs here
admin
cache
download
editors
email
etc.

FIRST check your includes/configure.php file to see if your website is defined as "http://www.yoursite.com" or "http://yoursite.com". Be sure to change "yoursite" to your actual site name.

If your website is defined as "http://www.yoursite.com" enter this into your root folders .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^yoursite.com$ [NC]
RewriteRule ^(.*)$ http://www.yoursite.com/$1 [R=301,L]

If your website is defined as "http://yoursite.com" enter this into your root folders .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.yoursite.com$ [NC]
RewriteRule ^(.*)$ http://yoursite.com/$1 [R=301,L]


6. I've added a "hidden" link for an about us page in the information menu. If you'd like an about us page added to your site, you can add it to your site with this mod here:

http://www.zen-cart.com/index.php?ma...roducts_id=182

Then to add the about us link to your drop down menu, open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php and change this:

<!--<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo HEADER_TITLE_ABOUT_US; ?></a></li>-->

to this:

<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo HEADER_TITLE_ABOUT_US; ?></a></li>


=====================================
Files Included in CSS Flyout Header
=====================================

==additions_to_.htaccess
==includes/classes/categories_ul_generator.php
==includes/csshover.htc
==includes/languages/english/extra_definitions/YOUR_TEMPLATE/headermenu.php
==includes/modules/sideboxes/YOUR_TEMPLATE/ezpages_drop_menu.php
==includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php
==includes/templates/YOUR_TEMPLATE/common/tpl_header.php
==includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css
==includes/templates/YOUR_TEMPLATE/sideboxes/tpl_ezpages_drop_menu.php

=====================================
Customizing the CSS Flyout Header
=====================================

You can modify the text used in your header by opening up includes/languages/english/extra_definitions/YOUR_TEMPLATE/headermenu.php

You can add or remove links from the header menu by opening up includes/templates/YOUR_TEMPLATE/tpl_drop_menu.php. HOWEVER, you can turn off links such as "Privacy Policy" or "Conditions of Use", etc. from the admin, under "Configuration", "Define Page Status". (This turns them off anywhere they may be on the site). If you're not using Gift Certificates or Discount Coupons, you can turn those off globally by removing their modules under "Modules", "Order Total".

You can change the colors or widths of the header menu by opening up includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css

=====================================
Version History
=====================================
v1.5 2008-01-18 updated includes/classes/categories_ul_generator.php, includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php, includes/templates/YOUR_TEMPLATE/common/tpl_header.php, includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css.

v.1.4 2007-11-03 updated includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php, includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css

v1.3 2007-09-30 updated includes/classes/categories_ul_generator.php, includes/modules/sideboxes/YOUR_TEMPLATE/ezpages_drop_menu.php, includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php, and includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css. The menu will now be the full width of the width of your header portion of your site, and the menu items will be spread evenly all the way across.

v1.2 2007-03-21 updated includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php (added ezpages functionality), includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css, and added includes/modules/sideboxes/YOUR_TEMPLATE/ezpages_drop_menu.php and includes/templates/YOUR_TEMPLATE/sideboxes/tpl_ezpages_drop_menu.php.

v1.1 2007-02-23 updated includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php.

v1.0 2007-02-17 First release

[DivaVocals]

Here is a copy of the instructions with this thread indicated as the place to go.

There are TWO menus as follows:
CSS Flyout Menu
Last Updated by: Get Em Fast
Nov 13 2010
v1.3.9 1.3.9b

CSS Horizontal Drop Down Menu
Last Updated by: Jade True - SageFish.com
Jan 18 2008
v1.3.8 1.5

You can see why my initial response was that this is not the correct thread for the CSS Flyout Menu.. This support thread is for is the CSS Horizontal Drop Down Menu..

[GraniteMan44]

CSS Horizontal Drop Down Menu
Last Updated by: Jade True - SageFish.com
Jan 18 2008
v1.3.8 1.5

I downloaded and installed the files from this link----

CSS Horizontal Drop Down Menu
Last Updated by: Jade True - SageFish.com
Jan 18 2008
v1.3.8 1.5

I just downloaded it and reinstalled everything and the problem still exists. I took out the (margin: 8em) from the logoWrapper so that you can see that the image in the header isn't displaying because the header is collapsing.

[DivaVocals]

I downloaded and installed the files from this link----

I just downloaded it and reinstalled everything and the problem still exists. I took out the (margin: 8em) from the logoWrapper so that you can see that the image in the header isn't displaying because the header is collapsing.

I guess I'm confused how your logo display issues would be related to this menu??? Can you clarify why you believe this is true???