How do I create a clickable header that acts as a navigation bar too?

11 Mar 2010, 11:55 AM

#1

New Zenner

Join Date:: Mar 2010
Posts:: 7
Plugin Contributions:: 0

How do I create a clickable header that acts as a navigation bar too?

Hi,

I'm really new to Zen Cart. I found some Zen Cart stores that has a header which also acts as a navigation bar. One example: http://www.tamsinmcateestudios.com/store/

I think it's done using Dreamweaver (slicing etc), but Zen Cart uses PHP..any idea how it's done?

Just some info:
I'm currently using Zen Cart 1.3.8. The shop I'm trying to create the above effect is here: http://www.helpmefindagift.net/testing/

11 Mar 2010, 12:32 PM

#2

schoolboy

Totally Zenned

Join Date:: Jun 2005
Location:: Cumbria, UK
Posts:: 10,327
Plugin Contributions:: 0

Re: How do I create a clickable header that acts as a navigation bar too?

The site you reference uses a customised header, where some additional DIVS have been added into tpl_header.php .

The CORE FILE is located in:

includes/templates/template_default/common/tpl_header.php

You can make a COPY of this file, and make appropriate additions/edits to the headerWrapper and/or navMainWrapper divisions.

Your edited version then needs to be saved to your CUSTOM template system, in your case:

includes/templates/freetamplate1/common/tpl_header.php

You may consider creating an image MAP (hotspots) for your header, to cater for your desired "links". Search for "image hotspots" in the forum for the techniques.

11 Mar 2010, 1:18 PM

#3

papaiya

New Zenner

Join Date:: Mar 2010
Posts:: 7
Plugin Contributions:: 0

Re: How do I create a clickable header that acts as a navigation bar too?

Thank you so much, I'll try and post my outcomes here.

11 Mar 2010, 2:10 PM

#4

papaiya

New Zenner

Join Date:: Mar 2010
Posts:: 7
Plugin Contributions:: 0

Re: How do I create a clickable header that acts as a navigation bar too?

Hi,

I sliced my header & created hotspots using Fireworks, and then opened the HTML file in Dreamweaver. I'm at loss as to which code to copy & paste to my tpl_header.php file.. Here's the HTML from Dreamweaver:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>header.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Thu Mar 11 22:01:34 GMT+0800 (MYT) 2010-->
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="900">
<!-- fwtable fwsrc="header.png" fwpage="Page 1" fwbase="header.jpg" fwstyle="Dreamweaver" fwdocid = "1026498856" fwnested="0" -->
  <tr>
   <td><img src="images/spacer.gif" width="164" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="76" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="14" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="92" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="100" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="63" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="73" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="66" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="203" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="12"><img name="header_r1_c1" src="images/header_r1_c1.jpg" width="900" height="16" border="0" id="header_r1_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2" colspan="2"><img name="header_r2_c1" src="images/header_r2_c1.jpg" width="240" height="108" border="0" id="header_r2_c1" alt="" /></td>
   <td colspan="8"><img name="header_r2_c3" src="images/header_r2_c3.jpg" width="391" height="77" border="0" id="header_r2_c3" usemap="#m_header_r2_c3" alt="" /></td>
   <td rowspan="2" colspan="2"><img name="header_r2_c11" src="images/header_r2_c11.jpg" width="269" height="108" border="0" id="header_r2_c11" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="77" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="8"><img name="header_r3_c3" src="images/header_r3_c3.jpg" width="391" height="31" border="0" id="header_r3_c3" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="31" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="header_r4_c1" src="images/header_r4_c1.jpg" width="164" height="62" border="0" id="header_r4_c1" alt="" /></td>
   <td><img name="header_r4_c2" src="images/header_r4_c2.jpg" width="76" height="32" border="0" id="header_r4_c2" usemap="#m_header_r4_c2" alt="" /></td>
   <td rowspan="2"><img name="header_r4_c3" src="images/header_r4_c3.jpg" width="14" height="62" border="0" id="header_r4_c3" alt="" /></td>
   <td><img name="header_r4_c4" src="images/header_r4_c4.jpg" width="92" height="32" border="0" id="header_r4_c4" usemap="#m_header_r4_c4" alt="" /></td>
   <td rowspan="2"><img name="header_r4_c5" src="images/header_r4_c5.jpg" width="17" height="62" border="0" id="header_r4_c5" alt="" /></td>
   <td><img name="header_r4_c6" src="images/header_r4_c6.jpg" width="100" height="32" border="0" id="header_r4_c6" usemap="#m_header_r4_c6" alt="" /></td>
   <td rowspan="2"><img name="header_r4_c7" src="images/header_r4_c7.jpg" width="15" height="62" border="0" id="header_r4_c7" alt="" /></td>
   <td><img name="header_r4_c8" src="images/header_r4_c8.jpg" width="63" height="32" border="0" id="header_r4_c8" usemap="#m_header_r4_c8" alt="" /></td>
   <td rowspan="2"><img name="header_r4_c9" src="images/header_r4_c9.jpg" width="17" height="62" border="0" id="header_r4_c9" alt="" /></td>
   <td colspan="2"><img name="header_r4_c10" src="images/header_r4_c10.jpg" width="139" height="32" border="0" id="header_r4_c10" usemap="#m_header_r4_c10" alt="" /></td>
   <td rowspan="2"><img name="header_r4_c12" src="images/header_r4_c12.jpg" width="203" height="62" border="0" id="header_r4_c12" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="32" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="header_r5_c2" src="images/header_r5_c2.jpg" width="76" height="30" border="0" id="header_r5_c2" alt="" /></td>
   <td><img name="header_r5_c4" src="images/header_r5_c4.jpg" width="92" height="30" border="0" id="header_r5_c4" alt="" /></td>
   <td><img name="header_r5_c6" src="images/header_r5_c6.jpg" width="100" height="30" border="0" id="header_r5_c6" alt="" /></td>
   <td><img name="header_r5_c8" src="images/header_r5_c8.jpg" width="63" height="30" border="0" id="header_r5_c8" alt="" /></td>
   <td colspan="2"><img name="header_r5_c10" src="images/header_r5_c10.jpg" width="139" height="30" border="0" id="header_r5_c10" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td>
  </tr>
</table>
<map name="m_header_r2_c3" id="m_header_r2_c3">
<area shape="rect" coords="0,0,391,77" href="#" title="Shoppe" alt="Shoppe" />
</map>
<map name="m_header_r4_c2" id="m_header_r4_c2">
<area shape="rect" coords="0,0,76,32" href="#" title="Home" alt="Home" />
</map>
<map name="m_header_r4_c4" id="m_header_r4_c4">
<area shape="rect" coords="0,0,92,32" href="#" title="Shoppe" alt="Shoppe" />
</map>
<map name="m_header_r4_c6" id="m_header_r4_c6">
<area shape="rect" coords="0,0,100,32" href="#" title="Gallery" alt="Gallery" />
</map>
<map name="m_header_r4_c8" id="m_header_r4_c8">
<area shape="rect" coords="0,0,63,32" href="#" title="Blog" alt="Blog" />
</map>
<map name="m_header_r4_c10" id="m_header_r4_c10">
<area shape="rect" coords="0,0,139,32" href="#" title="Newsletter" alt="Newsletter" />
</map>
</body>
</html>

I just added "#" in Fireworks for the URL coz the site isn't completed yet.

11 Mar 2010, 2:11 PM

#5

papaiya

New Zenner

Join Date:: Mar 2010
Posts:: 7
Plugin Contributions:: 0

Re: How do I create a clickable header that acts as a navigation bar too?

Sorry, I'm a real newbie..

11 Mar 2010, 2:18 PM

#6

twaddle

Banned

Join Date:: Jul 2009
Location:: Prague, Czech Republic
Posts:: 478
Plugin Contributions:: 0

Re: How do I create a clickable header that acts as a navigation bar too?

papaiya:

Hi,

I'm really new to Zen Cart. I found some Zen Cart stores that has a header which also acts as a navigation bar. One example: http://www.tamsinmcateestudios.com/store/

I think it's done using Dreamweaver (slicing etc), but Zen Cart uses PHP..any idea how it's done?

Just some info:
I'm currently using Zen Cart 1.3.8. The shop I'm trying to create the above effect is here: http://www.helpmefindagift.net/testing/
I used image mapping for this site I am doing and the links on the washing line - if you go through the history of my posts (about two weeks ago) I posted where to put the code you would get from http://www.image-maps.com/

I'll save you the trouble searching, posts #6 and #7 in this thread - http://www.zen-cart.com/forum/showthread.php?t=149092

11 Mar 2010, 2:22 PM

#7

papaiya

New Zenner