Killersites.com Homepage

Print at May 21, 2012 4:24:09 AM View all posts in this thread on one page
Posted by koremelt at Jul 16, 2007 8:33:27 AM
CSS powered drop down menu system issues
I'm very new to CSS and my javascript knowledge wouldn't be great so when I was asked to change the menu of the company website to a nice drop down system I knew I would struggle
I eventually found 1 that was easy to customise- PVII CSS Express Menu and Im happy with how it looks/works now and it seems to work all the way back to IE 5 which is a bonus:

www.koremeltdown.com/dropdown


My problems started when I tried to replace the original menu system of the link below (removed company name-sorry for the mess and Im sure its still in there somewhere anyway)

www.koremeltdown.com/sample

It kinda went completely haywire and I just dont know what to do
Anyone have any pointers/know how it should be done?
Id really appreciate any help on this one, boss is on my case and it would be great to get it working

Posted by newseed at Jul 16, 2007 3:01:01 PM
Re: CSS powered drop down menu system issues
First of all, the javascript file, p7exp.js, is not linked to the /sample/ page.

Also, you don't have the html code in there either.

If you wondering what code to remove the old menu and replace it with the new one, find this code:

<td colspan="3" height="23" valign="top"><img src="images/home_off.gif" alt="filler" height="23" width="87">
<img src="images/home_off.gif" alt="Our Games" name="our games" border="0" height="23" width="82"><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our services','','images/our_services_on.gif',1)">
<img src="http://www.koremeltdown.com/sample/images/our_services_off.gif" alt="our services" name="our services" border="0" height="23" width="94"></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about us','','images/about_us_on.gif',1)">
<img src="http://www.koremeltdown.com/sample/images/about_us_off.gif" alt="about us" name="about us" border="0" height="23" width="70"></a><a href="news/news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/news_on.gif',1)">
<img src="images/news_off.gif" alt="news" name="news" border="0" height="23" width="48"></a><a href="resources.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resources','','images/resources_on.gif',1)">
<img src="http://www.koremeltdown.com/sample/images/resources_off.gif" alt="investors" name="resources" border="0" height="23" width="79"></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_on.gif',1)">
<img src="http://www.koremeltdown.com/sample/images/contact_off.gif" alt="contact" name="contact" border="0" height="23" width="58"></a><img src="images/home_off.gif" border="0" height="23" width="106"><img src="images/spacer.gif" alt="spacer image" height="23" width="16"></td>


and replace it with this:

<td colspan="3" height="23" valign="top">
<div id="menuwrapper">
<ul id="p7menubar">

<li><a href="../drop_down/index.htm">HOME</a></li>

<li><a class="trigger" href="#">SERVICES</a>
<ul>
<li><a href="../drop_down/services.html">SELATRA HOSTING</a></li>
<li><a href="#">CLIENT HOSTING</a></li>
<li><a href="#">SELATRA SOLUTIONS</a></li>
</ul>
</li>

<li><a class="trigger" href="#">ABOUT</a>
<ul>
<li><a href="../drop_down/about.html">ABOUT SELATRA</a></li>
<li><a href="#">TERRITORIES</a></li>
<li><a href="#">LIST OF TERRITORIES</a></li>
<li><a href="#">COMPANY BROCHURE</a></li>
</ul>
</li>

<li><a class="trigger" href="#">NEWS</a>
<ul>
<li><a href="../drop_down/news/news.html">LATEST NEWS</a></li>
<li><a href="#">NEWS ARCHIVE</a></li>
<li><a href="#">PRESS CONTACT</a></li>
</ul>
</li>

<li><a class="trigger" href="#">INVESTORS</a>
<ul>
<li><a href="../drop_down/resources.html">BOARD OF MANAGEMENT</a></li>
<li><a href="#">INVESTOR RELATIONS</a></li>
</ul>
</li>

<li><a href="#">REVIEWS</a></li>

<li><a href="#">HOT GAMES</a></li>

<li><a class="trigger" href="#">CONTACT</a>
<ul>
<li><a href="../drop_down/contact.html">CONTACT DETAILS</a></li>
<li><a href="#">MAP</a></li>
</ul>
</li>



</ul>
<br class="clearit">
</div>
</td>


Also, don't forget to update the body tag to show: onLoad="P7_ExpMenu()"

Old one looks like this:
<body onLoad="imagesPreLoad();imagePreLoad2();runSlideShow();i=0" "RandomizeImage()" >


In my opinion, you got too many javascripts already that the menu just might not work correctly.
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group