Adding CSS Menu to my site

**caesartrading** · 8 Jul 2011, 11:40 PM

Ok, thanks clydejones.

I added that to the bottom, under /* ------ Navigation bar -----*/ etc etc.

Now, with the tpl_header.php file, how do I add it?
This is the original file here:

Code:

<?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="clearBoth"></div>					
					</div>
			</div>
		</div>
		<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 } ?>

And here is the HTML section I was given by my CSS Editor:

Code:

<div id="cssm1"> 
	<ul> 
		<li><a href="#">Apple</a> 
				<ul> 
				<li><a href="https://www.the-ishop.co.uk/apple-iphone-4-c-51_2.html">iPhone 4</a></li> 
				<li><a href="https://www.the-ishop.co.uk/apple-iphone-3gs3g2g-c-51_3.html">iPhone 3G/S</a></li>
				<li><a href="https://www.the-ishop.co.uk/apple-ipad-c-51_4.html">iPad</a></li>
				<li><a href="https://www.the-ishop.co.uk/apple-ipad-2-c-51_44.html">iPad 2</a></li> 
				<li><a href="https://www.the-ishop.co.uk/apple-ipod-touch-c-51_5.html">iPod Touch</a></li> 			
				</ul> 
		
		</li> 
		<li><a href="#">BlackBerry</a>
		       		<ul> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-torch-c-6_61.html">Torch</a></li> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-bold-c-6_73.html">Bold</a></li>
				<li><a href="https://www.the-ishop.co.uk/blackberry-curve-c-6_63.html">Curve</a></li>
				<li><a href="https://www.the-ishop.co.uk/blackberry-storm-c-6_74.html">Storm</a></li> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-pearl-c-6_62.html">Pearl</a></li> 			
				</ul> 
		</li>
				
		<li><a href="#">HTC</a>
		       		<ul> 
				<li><a href="#">Sensation</a></li>
    				<li><a href="#">Evo 3D</a></li>
				<li><a href="#">Flyer</a></li> 
				<li><a href="#">ChaCha</a></li>
				<li><a href="#">Salsa</a></li> 
				<li><a href="#">Incredible</a></li>
				<li><a href="#">HD7</a></li> 
				<li><a href="#">7</a>
		  		       <ul> 
				       <li><a href="#">Mozart</a> 
				       <li><a href="#">Trophy</a> 
				       </ul> 
				       </li>
     	                        <li><a href="#">Wildfire</a>
     	                               <ul> 
				       <li><a href="#">Wildfire</a> 
				       <li><a href="#">Wildfire S</a> 
				       </ul>
				       </li> 
				<li><a href="#">Desire</a>
				       <ul> 
				       <li><a href="#">Desire</a> 
				       <li><a href="#">Desire HD</a> 
				       <li><a href="#">Desire S</a> 
				       <li><a href="#">Desire Z</a> 
				       </ul> 
				       </li>
				<li><a href="#">Legend</a></li>
				<li><a href="#">Smart</a></li>
				<li><a href="#">Other</a></li>
				</ul> 
		</li>
		
		<li><a href="#">Samsung</a>
		       		<ul> 
				<li><a href="https://www.the-ishop.co.uk/samsung-galaxy-tab-p1000-c-52_48.html">Galaxy Tab</a></li> 
				</ul> 
		</li>
		
		<li><a href="https://www.the-ishop.co.uk/blog">Blog</a></li>		
		<li><a href="https://www.the-ishop.co.uk/faq-ezp-1.html">FAQ</a></li> 
		<li><a href="https://www.the-ishop.co.uk/account.html">Account</a></li> 
		       	        		
	</ul> 
</div>

At the moment, I'm just replacing the NAVIGATION LINKS section with the HTML I was given, but it's not doing anything.

Also, is the NAVIGATION LINKS the EZ Pages ones, or the normal text based ones that you can turn on (tabs, I think they're called?)

Any help is much appreciated, of course!