Adding CSS Menu to my site

[caesartrading]

Anyone?

[gjh42]

The "navigation links" section is the stock top/main navbar. The stock categories-tabs and the ez-pages top navbar are lower in the file, but your already highly customized tpl_header.php is completely missing the ez-pages navbar call. It has a call to a drop menu mod:

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

and you could probably replace that with your HTML or a call to a file with the HTML in it. If you want the drop menu, you could put your new HTML either above or below it depending on where you want the new menu.

Have you tried the CSS dropdown menu mods available in Free Addons and found them all inadequate? I think there is at least one that will do everything you are trying to build from scratch, and is already tested and functional.

[caesartrading]

Hi gjh,

Thanks for the reply.

I tried one originally, but found it really hard to install, to be honest.

I just found this one, which seems much much simpler to install: http://www.zen-cart.com/index.php?ma...roducts_id=476

However, I've changed the appropriate section in my tpl_header.php file, and modified the module file with the links accordingly (as indicated in the instructions), but it's still not showing up. Any ideas what's happening? The installation is very straightforward, but I have a suspicion that ealier edits in the tpl_header.php may have somehow inhibited anything like this.

Your help is much appreciated!

[caesartrading]

Right, the website is now refusing to work. I even reverted my changes (I think), so not sure what's happening.

Can you just check that there isn't something blindingly obvious in my tpl_header.php that's messing stuff up?

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

}
?>


<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

    <div id="header">
		<div class="top-tail2"></div>
		<div class="top">
			<div class="top-bg">
			<div class="main-width">
				<div class="logo">
					<!-- ========== LOGO ========== -->
						<a href="<?php echo zen_href_link(FILENAME_DEFAULT);?>"><?php echo zen_image(DIR_WS_TEMPLATE.'images/logo.gif'); ?></a>

					<!-- ========================== -->
				</div>
							
				<div class="social-media">
					<div class="alignright">
					<!-- ========== Social Media ========== -->
						<a href="https://www.the-ishop.co.uk/blog"> 															<img src="https://www.the-ishop.co.uk/images/banners/blog.png" width="61" height="50" style="margin-top:40px" alt="The iShop Blog" />
</a>						
						<a href="https://www.facebook.com/the.ishop" target="_blank"> 														<img src="https://www.the-ishop.co.uk/images/banners/facebook.png" width="50" height="50" style="margin-top:40px" alt="The iShop on Facebook" />
</a>
						<a href="https://twitter.com/The_iShop" target="_blank"> 
						<img src="https://www.the-ishop.co.uk/images/banners/twitter.png" width="50" height="50" style="margin-top:40px" style="vertical-align:middle" alt="The iShop on Twitter"/>						
</a>
						<a href="https://www.youtube.com/user/theishoptv" target="_blank"> 
						<img src="https://www.the-ishop.co.uk/images/banners/youtube.png" width="50" height="50" style="margin-top:40px; margin-right:40px" style="vertical-align:middle" alt="The iShop on Twitter"/>						
</a>											
				
					<!-- ================================== -->					
					
	
					
			<div class="cart">
				<div class="alignright">
					<div class="cart-bg">
						<div class="cart-icon">
								<!-- ========== SHOPPING CART ========== -->
									<?php 
										if ($_SESSION['cart']->count_contents() == 0) {
											$cart_text = 'Items: <a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '">' . $_SESSION['cart']->count_contents() . ' items</a>';
										} elseif ($_SESSION['cart']->count_contents() == 1) {
											$cart_text = 'Items: <a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '">' . $_SESSION['cart']->count_contents() . ' item</a>';
										} else {
											$cart_text = 'Items: <a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '">' . $_SESSION['cart']->count_contents() . ' items</a>';
										}
									?>
									<span><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo BOX_HEADING_SHOPPING_CART;?></a>:</span> <?php echo $cart_text ?> 

							<!-- =================================== -->
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
		

							<!-- ========== Contact Details ========== -->

					<a><img src="https://www.the-ishop.co.uk/images/banners/contact.png" width="461" height="28" style="margin-left:40px" />
</a>						
							<!-- ===================================== -->
			<div class="row">
			<div class="main-width">
				<div class="nav-links">
					<div class="left-corner">
						<div class="right-corner">
							<!-- ========== NAVIGATION LINKS ========== -->
									<a href="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>
									
								<?php if ($_SESSION['customer_id']) { ?>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> 
								<?php
									  } else {
										if (STORE_STATUS == '0') {
								?>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>  
								<?php } } ?>  
								
								<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
								<?php } ?>
							<!-- ====================================== -->
						</div>
					</div>
				</div>

						<div class="lang">
						<!-- ========== LANGUAGES ========== -->
							<?php 
								if (!isset($lng) || (isset($lng) && !is_object($lng))) {
									$lng = new language;
								}
							
								reset($lng->catalog_languages);
							
								while (list($key, $value) = each($lng->catalog_languages)) {
									echo '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '">' . zen_image(DIR_WS_LANGUAGES.$value['directory'].'/images/'.$value['image'], $value['name'], '', '', ' style="vertical-align:middle;"') . '</a>';
								}
							?>
						<!-- =============================== -->
					</div>
					<div class="search">
						<!-- ========== SEARCH ========== -->
							<?php echo zen_draw_form('quick_find_header', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get');?>
								<div>
							<?php 
								echo zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT);
								echo zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id();
							?>
							<?php echo zen_draw_input_field('keyword', '', 'class="input1"');?><?php echo zen_image_submit ('search.gif', HEADER_SEARCH_BUTTON);?>
								</div>
							</form>
						<!-- ============================ -->
					</div>
					<div class="currencies">
						<!-- ========== CURRENCIES ========= -->
							<?php echo zen_draw_form('currencies', zen_href_link(basename(ereg_replace('.php','', $PHP_SELF)), '', $request_type, false), 'get'); ?>
								<div>
									<?php echo BOX_HEADING_CURRENCIES;?>:
							
									<?
										if (isset($currencies) && is_object($currencies)) {
									
										  reset($currencies->currencies);
										  $currencies_array = array();
										  while (list($key, $value) = each($currencies->currencies)) {
											$currencies_array[] = array('id' => $key, 'text' => $value['title']);
										  }
									
										  $hidden_get_variables = '';
										  reset($_GET);
										  while (list($key, $value) = each($_GET)) {
											if ( ($key != 'currency') && ($key != zen_session_name()) && ($key != 'x') && ($key != 'y') ) {
											  $hidden_get_variables .= zen_draw_hidden_field($key, $value);
											}
										  }
										}
									?>
									<?php echo zen_draw_pull_down_menu('currency', $currencies_array, $_SESSION['currency'], 'class="select" onchange="this.form.submit();"') . $hidden_get_variables . zen_hide_session_id()?>
								</div>
							</form>
						<!-- ====================================== -->


<!--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="main-width">
		<?php 
			if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) {
				if (HEADER_SALES_TEXT != '') {
		?>
				<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
		<?php
				}
			}
		?>
	
		<!-- ========== CATEGORIES TABS ========= -->
			<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). 
'/tpl_modules_categories_tabs.php'); ?>
		<!-- ==================================== -->
		</div>
	</div>

<!-- Start of PunchTab Script -->
<script type="text/javascript" charset="utf-8">
  var is_ssl = ("https:" == document.location.protocol);
  var asset_host = is_ssl ? "https://www.punchtab.com/" : "http://www.punchtab.com/";
  document.write(unescape("%3Cscript src='" + asset_host + "s/js/pt.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript" charset="utf-8">
  var _ptq = _ptq || [];
  var reward_widget_options = {};
  reward_widget_options.key = "65dd3c2baab91d74fa3161424ea948aa";
  reward_widget_options.host = "www.punchtab.com";
  reward_widget_options.display = "tab";
  reward_widget_options.position = {x:"right",y:"top"};
  var reward_widget = new PT.reward_widget(reward_widget_options);
</script>
<!-- End of PunchTab Script -->

	
<!-- Start of Zopim Live Chat Script -->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=
z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o
){z.set._.push(o)};$.setAttribute('charset','utf-8');$.async=!0;z.set.
_=[];$.src=('https:'==d.location.protocol?'https://ssl':'http://cdn')+
'.zopim.com/?oxzJMmQgAKVITOhZGTyiqedEPtou0ckb';$.type='text/java'+s;z.
t=+new Date;z._=[];e.parentNode.insertBefore($,e)})(document,'script')
</script>
<!-- End of Zopim Live Chat Script -->

<?php } ?>

Thanks

[caesartrading]

If anyone could help me out, that would be great! Please!!

[gjh42]

I didn't notice any PHP errors, except that you have an ereg_replace() which is deprecated in favor of preg_replace() since v5.3.

						<!-- ========== CURRENCIES ========= -->
							<?php echo zen_draw_form('currencies', zen_href_link(basename(ereg_replace('.php','', $PHP_SELF)),

The preg_ syntax is different from the ereg_ syntax, so be sure you change any functions correctly.

[caesartrading]

Thanks for that.

I managed to restore a backup from the morning before I made the changes, so it's back to normal now.
However, that still leaves the issue of how to install the CSS Menu.

I know this is a lot to ask, but do you reckon you could take a look at this module http://www.zen-cart.com/index.php?ma...roducts_id=476 ? I tried to implement it into my code, but didn't make any difference. Then, a few hours later, the site went down!

I followed the instructions, but still couldn't get it to work....

[gjh42]

I don't know anything about that mod (it's old and might not be compatible with the latest ZC), but I do know that many people use this CSS Horizontal Drop Down Menu or its jquery variant, and they are well supported in the forum.

[caesartrading]

I actually used that one originally, but found it hard to install.

However, I've decided to get back into it again and try to install it. I've managed to get it 75% of the way there!

The issue now, is that the navigation bar is somehow partially hidden. I'm really not sure how it's happening - if you see my source code, you'll notive that it's above the EZ Pages navigation area, and below the Contact Details section. It is in the correct place on the page, but seems to have been sent to the back...

I'm guessing you know your stuff about CSS (as you've been so helpful so far!) - is this a CSS issue? Also, the navbar was originally aligned in the centre, but for some reason the bar suddenly aligned to the left when I changed something that I thought was completely unrelated (the hover colour!) However, when I changed the colour back, the alignment didn't revert to the middle. Not sure what's going on there...

I know I have the EZpages bar there at the moment - that's because I want customers who are visiting at the moment to be able to actually browse my products, not be instantly cast off by the lack of navigation.

Even when I turn off the EZpages bar and the default horizontal text-based menu, the dropdown one just stays where it is....odd.


So, any help that you can give will be hugely appreciated!

[gjh42]

You have a Template Monster template, which may well be the source of many of your problems. TM is notorious for making drastic changes to core code in clumsy ways that often make it hard or impossible to use stock Zen Cart functions, and may be incompatible with other mods.