Inserting Code into tpl_header.php

[drymetal]

Ok, after about 10.2 years of trying to figure out how to call a function in the header I gave up. However - there is good news.

I started to wonder if it was possible to make a popup menu just using css and not javascript. I searched online and a bunch of sites said you could not do this. However, thanks to an angel that appeared in my room, I was told how to do this. So - for anyone who wants a popup menu in their store - here is the EASIEST way to do it.

(I am going to list what I did.)

1. First I created the menu code. If you are going to create a popup menu - you will want to use this code as a template as I had to tinker around with it (formatting) for awhile to get it to work: (the code has 4 spaces between each parent menu item so it is easier to see what is what.)

Also - after you are done - just paste the code into your tpl_header.php file wherever you need the menu to be.

<ul id='menu'> 
 <li><a class='sub' href='#.html'><b>Access Control</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Biometric Readers</a></li>
 <li><a href=''>Keyless Entry</a></li>
 <li><a href=''>Keypads & Readers</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 
 
 <li class='current'><a class='sub' href=''><b>Equipment</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a class='fly' href='#url'>Equipment<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Modules</a></li>
 <li><a href=''>Glass Breaks</a></li>
 <li><a href=''>Hold-Up & Panic</a></li>
 <li><a href=''>Motion Sensors</a></li>
 <li><a href=''>Photo Electric Beams</a></li>
 <li><a href=''>Relays & More</a></li>
 <li><a href=''>RF Receivers</a></li>
 <li><a href=''>Siren Speakers/Strobes</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Doors / Windows<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Door Alarms</a></li>
 <li><a href=''>Hardwire Sensors</a></li>
  <li><a href=''>Wireless Sensors</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Control<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Keyfobs</a></li>
 <li><a href=''>Keypads</a></li>
  <li><a href=''>Remotes</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Fire Protection<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Smoke Detectors</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Power Supplies<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Alarm Batteries</a></li>
 <li><a href=''>Battery Chargers</a></li>
  <li><a href=''>Zone/Power</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href=''>Driveway Alarms</a></li>
 <li><a href=''>Enclosures</a></li>
 <li><a href=''>Life Safety</a></li>
 <li><a href=''>Signs & Decals</a></li>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Communications<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Cellular</a></li>
  <li><a href=''>Cellular Backup</a></li>
 <li><a href=''>Dialers</a></li>
 <li><a href=''>iP</a></li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 </ul>
 
 
 
 
 <li><a class='sub' href='#.html'><b>Alarm Systems</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Control Panels</a></li>
 <li><a href=''>Hardwired Alarms</a></li>
 <li><a href=''>Hybrid Alarms</a></li>
 <li><a href=''>Wireless Alarms</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 
 
 <li><a class='sub' href='#.html'><b>Commercial</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Alarm Accessories</a></li>
 <li><a href=''>Fire Alarm Panels</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 
 
 <li><a class='sub' href=''><b>Automation</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Central Vacuum</a></li>
 <li><a href=''>Envir. Controls</a></li>
  <li><a href=''>Garage Controls</a></li>
 <li><a href=''>Gate Controls</a></li>
  <li><a href=''>Intercoms</a></li>
 <li><a href=''>Power Supplies</a></li>
  <li><a href=''>Structure Wiring</a></li>
 <li><a href=''>X10 Automation</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 
 
 <li><a class='sub' href=''><b>Surveillance</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Camera Acc.</a></li>
 <li><a href=''>Camera Kits</a></li>
  <li><a href=''>Cameras</a></li>
  <li><a href=''>Video Recorders</a></li>
  <li><a href=''>Security Monitors</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li> 
 
 
 
 
  <li><a class='sub' href=''><b>Wire / Cable</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Alarms</a></li>
 <li><a href=''>Audio/Video</a></li>
  <li><a href=''>Firewire</a></li>
  <li><a href=''>networking</a></li>
  <li><a href=''>Surveillance</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 </ul>

2. Then the CSS code:

#menu {padding:0; margin:0; list-style:none; float:center; height:25px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#menu li {float:left; margin-right:1px;}
#menu li a {display:block; float:left; height:25px; line-height:25px; background:#000000; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;}


#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu li a:hover {z-index:200; position:relative;color:#ffffff; background-color:#000000;}
#menu li:hover {position:relative; z-index:200;}

#menu li:hover > a {color:#ffffff; background:#000000;}
#menu li:hover > a.sub {color:#ffffff; background-color:#000000;}

#menu li.current a {color:#ffffff; background:#000000;}

#menu li a.sub {background: #000000 url(/down-arrow.gif) no-repeat right center;}
#menu li.current a.sub {color:#ffffff; background:#000000 url(down-arrow.gif) no-repeat right center;;}

#menu :hover ul {left:0; top:25px; width:160px; background:#000000;}

/* keep the 'next' level invisible by placing it off screen. */
#menu ul, 
#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#menu :hover ul :hover ul
{left:120px; top:-1px; background:#000000; white-space:nowrap; width:100px; z-index:200; height:auto;}

#menu :hover ul li {margin:0; border-top:1px solid #000000;}
#menu :hover ul li a {width:160px; padding:0; text-indent:10px; background:#000000; color:#ccc; height:30px; line-height:30px;}
#menu :hover ul li a.fly {background:#000000 url(/right-arrow.gif) no-repeat right center;}

#menu :hover ul :hover {background-color:#000000; color:#ffffff;}
#menu :hover ul :hover a.fly {background-color:#000000; color:#ffffff;}

#menu :hover ul li.currentsub a {background:#000000; color:#ffffff;}
#menu :hover ul li.currentsub a.fly {background:#000000 url(right-arrow.gif) no-repeat right center; color:#ffffff;}

#menu :hover ul :hover ul li a {width:140px; padding:0; text-indent:10px; background:#000000; color:#ffffff;}
#menu :hover ul :hover ul :hover {background-color:#000000; color:#ffffff;}

#menu :hover ul :hover ul li.currentfly a,
#menu :hover ul :hover ul li.currentfly a:hover {background:#000000; color:#ffffff;}

3. Then I pasted the CSS code at the bottom of the stylesheet.css file that is being used by my custom_template in custom_template/css/

4. That is it. No weird call functions or anything else.


If anyone is wondering how I inserted a flash file into the tpl_header.php file - I uploaded the SWF file to custom_template/media/ and wrote and pasted this code into the tpl_header.php file: (If you use it, you'll only have to change the file path and file name, background color and height)

<object type="application/x-shockwave-flash" data="includes/templates/custom_template/media/banner.swf" width="100%" height="250">
<param name="movie" value="includes/templates/custom_template/media/banner.swf" />
<param name="quality" value="high"><param name="BGCOLOR" value="#000000">
<param name="menu" value="false">
</object>

[misty]

Interesting code, but would help to see an example of what it actually produces... i.e URL?

[schoolboy]

Did you know that Jade True (creator of Apple Zen Template) has already developed a "popup" header menu?

I use it on several sites : eg- HERE

[drymetal]

It is here:

Page with Menu

No I did not know that schoolboy. You coulda told me! lol

To be honest, before a week ago I never even touched zencart before. Now it makes sense but I just don't know anything about calling functions and stuff for javascript.

I still have a little bit of tweaking to do on the menu such as messing with the colors and stuff. But there it is at the link above under the flash banner (The banner isn't done yet. That is my next job. Yippee.)

[drymetal]

Is that menu on that site sb using javascript?

[schoolboy]

You coulda told me! lol

None of us were aware of what you were trying to do until post #31 of this thread.

If you had said in Post #1

"I am interested in having a pop-out menu in the header"

I would have put this into Post #2

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

[drymetal]

*kicks self*

Dangit. All that.

Oh well. At least I learned a lot of new stuff though. :) I guess that makes it all worthwhile really. Because I certainly know a lot more about zencart now than I did at post 1. :)

[schoolboy]

We were all there at some point...

It's a good idea to browse around the free add-ons - perhaps even set up a test install of ZC in a subfolder on your site (hide it away with a .htaccess login on that subfolder) and then use that to do all your experimenting.

In that way you dont put your live store at risk when you try things out.