Solved

CSS Dropdown Menu's Help!

Posted on 2010-11-25
8
376 Views
Last Modified: 2012-05-10
Hello experts,
I am attempting todo a web design and within my design i have CSS/JS Drop down menu's on the site (HTML/CSS its working perfectly, see http://www.nodegeeks.com/clients/rapidspeeds however when designing the WHMCS Template to match all i have is the following: http://www.nodegeeks.com/whmcs/

I've installed FireFox "Firebug" addon and when i remove "visibility: hidden;" from div it shows the menu's but doesnt hide them at all, With "Hidden" it hides them indefinatly.

My code for "header.tpl" is:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset={$charset}" />
<title>{$companyname} - {$pagetitle}{if $kbarticle.title} - {$kbarticle.title}{/if}</title>
{if $systemurl}<base href="{$systemurl}" />
{/if}

<link rel="stylesheet" type="text/css" href="templates/RapidSpeeds/style.css?<{php}echo date('l jS \of F Y h:i:s A');{/php}" />



<script type="text/javascript">
<!--
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
// -->
</script>

</head>
<body>

<div align="center">

	<table border="0" width="1000" cellspacing="0" cellpadding="0">
		<tr>
			<td width="279" rowspan="2">
			<img border="0" src="templates/{$template}/images/logo.png" width="279" height="88"></td>
			<td width="328" rowspan="2">
			<img border="0" src="templates/{$template}/images/logo02.png" width="328" height="88"></td>
			<td width="393">
			<a href="https://www.rapidspeeds.com/whmcs/supporttickets.php">
			<img border="0" src="templates/{$template}/images/top_helpdesk1.png" width="84" height="36"></a><a href="https://www.rapidspeeds.com/Forum"><img border="0" src="templates/{$template}/images/top_forums2.png" width="69" height="36"></a><a href="https://www.rapidspeeds.com/whmcs"><img border="0" src="templates/{$template}/images/top_billing4.png" width="96" height="36"></a></td>
		</tr>
		<tr>
			<td width="393">
			<img border="0" src="templates/{$template}/images/logo04.png" width="332" height="52"></td>
		</tr>
		<tr>
			<td colspan="3">
			
			
			
	<ul id="sddm">
		<li><a href="index.php" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
			<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="index.php">Website Home</a>
			<a href="https://www.rapidspeeds.com/whmcs/">Client Area Home</a>
			<a href="http://www.rapidspeeds.com/Forum/">Forums Home</a>
			</div>
		</li>
		<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Dedicated Servers</a>
			<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="index.php?a=dedicated">Quad Core Xeon</a>
			<a href="index.php?a=customdedi">Custom Solutions</a>
			</div>
		</li>
		<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Virtual Private Servers</a>
			<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="index.php?a=semi-dedi">Semi-Dedicated</a>
			<a href="index.php?a=linuxvps">Linux VPS</a>
			<a href="index.php?a=windowsvps">Windows VPS</a>
			</div>
		</li>
		<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Co-Location</a>
			<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="index.php?a=colocation">Pricing</a>
			<a href="index.php?a=network">Network Information</a>
			</div>
		</li>
		<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Company</a>
			<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="index.php?a=about">About RapidSpeeds</a>
			<a href="index.php?a=facilities">Facilities</a>
			<a href="index.php?a=networkinfo">Network Information</a>
			</div>
		</li>
		<li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">Contact Us</a>
			<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="index.php?a=emailus">By Email</a>
			<a href="index.php?a=contactus">By Post</a>
			<a href="index.php?a=othercontact">Alternatives</a>
			</div>
		</li>
	</ul>
	<div style="clear:both"></div>
	<div style="clear:both"></div>	
			
			
			</td>
		</tr>
		<tr>
			<td colspan="3">&nbsp;</td>
		</tr>
		
		
		
		
		<tr>
			<td colspan="3"><p>{if "templates/$template/images/$filename.png"|file_exists}<img src="templates/{$template}/images/{$filename}.png" align="right" alt="" />{/if}
<span class="heading">{$pagetitle}</span><br />
{$LANG.globalyouarehere}: {$breadcrumbnav}</p>

{if $loggedin}
<p align="center" class="clientarealinks">
<a href="clientarea.php"><img src="templates/{$template}/images/clientarea.gif" border="0" hspace="5" align="absmiddle" alt="" />{$LANG.clientareanavhome}</a>
<a href="clientarea.php?action=details"><img src="templates/{$template}/images/details.gif" border="0" hspace="5" align="absmiddle" alt="" />{$LANG.clientareanavdetails}</a>
<a href="clientarea.php?action=products"><img src="templates/{$template}/images/products.gif" border="0" hspace="5" align="absmiddle" alt="" />{$LANG.clientareaproducts}</a>
<a href="clientarea.php?action=domains"><img src="templates/{$template}/images/domains.gif" border="0" hspace="5" align="absmiddle" alt="" />{$LANG.clientareanavdomains}</a>
<a href="clientarea.php?action=invoices"><img src="templates/{$template}/images/invoices.gif" border="0" hspace="5" align="absmiddle" alt="" />{$LANG.invoices}</a>
<a href="supporttickets.php"><img src="templates/{$template}/images/supporttickets.gif" border="0" hspace="5" align="absmiddle" alt="" />{$LANG.clientareanavsupporttickets}</a>
<a href="affiliates.php"><img src="templates/{$template}/images/affiliates.gif" border="0" hspace="5" align="absmiddle" alt="" />{$LANG.affiliatestitle}</a>
<a href="clientarea.php?action=emails"><img src="templates/{$template}/images/emails.gif" border="0" hspace="5" align="absmiddle" alt="" />{$LANG.clientareaemails}</a>
</p>
{/if}</td>
		</tr>
		
		
		
		
		<tr>
			<td colspan="3">&nbsp;</td>
		</tr>
		
		
		
		
		<!-- HEADER -->
		
		
		
		
		
		<tr>
			<td colspan="3">
			<table border="0" width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<td width="25">&nbsp;</td>
					<td>

Open in new window


And footer.tpl
</td>
					<td width="25">&nbsp;</td>
				</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td colspan="3">&nbsp;</td>
		</tr>
	
		</table>
	
</div>
	
	<table border="0" width="100%" height="120" background="templates/{$template}/images/footer_bg.png" cellspacing="0" cellpadding="0" style="border-top: 1px solid #FFFFFF">
	<tr>
		<td height="75">
		<p align="center">
		<img border="0" src="templates/{$template}/images/psd_40.png" width="776" height="75"></td>
	</tr>
	<tr>
		<td>
		<div align="center">
			<table border="0" width="722" height="100%" cellspacing="0" cellpadding="0">
				<tr>
					<td width="288">
					<p align="center"><b><span id="footer-left">
					<font face="Arial" style="font-size: 8pt" color="#4A4A4A">
					©Copyright RapidSpeeds Servers Ltd<br>
					Company Registration No. 7238117</font></span></b></td>
					<td>
					<p align="center"><font face="Arial" style="font-size: 8pt">
					RapidSpeeds proudly accepts<br>
					</font>
					
					<marquee behavior="scroll" direction="left" scrollamount="3" width="356" height="19">
					<img src="templates/{$template}/images/paypal.png">&nbsp;&nbsp;&nbsp;		
					<img src="templates/{$template}/images/alertpay.png">&nbsp;&nbsp;&nbsp;
					<img src="templates/{$template}/images/moneybookers.png">&nbsp;&nbsp;&nbsp;
					<img src="templates/{$template}/images/googlecheckout.png">
					</marquee>

					
					
					</td>
				</tr>
			</table>
		</div>
		</td>
	</tr>
</table>


<!-- Start of Zopim Live Chat Script -->
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + document.location.protocol + "//zopim.com/?xZHxD49A6SV2Qm944EZVD0egaWTFAIta' charset='utf-8' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- End of Zopim Live Chat Script -->
</body>

</html>

Open in new window


And finally "style.css"

body {
	margin:0px; background-image: url('images/pg_bg2.png');
	background-repeat:repeat-x;
	background-color: #bdbebe;
	}
	
#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 9pt arial}

#sddm li a
{	display: block;
	margin: 0 0px 0 0;
	padding: 8px 5px;
	width: 150;
	background-image: url('images/nav_bg.png');
	color: #FFF;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{
	color: #B1DA03;
}

#sddm div
{	position: absolute;
	z-index:2;
	visibility: hidden;
	margin: 0;
	padding: 0;
	width: 150;
	background: #000000;
	border-left: 1px solid #B1DA03;
	border-right: 1px solid #B1DA03;
	border-bottom: 1px solid #B1DA03
	}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 8px 5px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #000000;
		color: #B1DA03;
		font: bold 9pt arial}

	#sddm div a:hover
	{	background: #B1DA03;
		display: block;
		visibility: hidden;
		color: #000000}




form {

	margin: 0px;

}



body,td,input,select,textarea {

	font-family: Tahoma;

	font-size: 11px;

}



a {

	color: #65A5E6;

}



a:hover {

	text-decoration: none;

}



.wrapper {

	width: 730px;

	border: 0px;

	padding: 5px;

	background-color: #ffffff;

	margin-left: auto;

	margin-right: auto;

}



/* --------------------------------------------------------------

   HEADINGS

-------------------------------------------------------------- */



.heading {

	font-family: Tahoma;

	font-size: 18px;

	font-weight: normal;

	color: #65A5E6;

}



.heading2 {

	font-family: Tahoma;

	font-size: 16px;

	font-weight: bold;

    text-decoration: none;

    color: #000000;

}



.heading3 {

    font-family: Tahoma;

    font-size: 12px;

    font-weight: bold;

    color: #16679F;

}



/* --------------------------------------------------------------

   INFO BOXES

-------------------------------------------------------------- */



.contentbox {

	width: 75%;

	text-align: center;

	background-color: #f7f7f7;

	border: 1px dashed #cccccc;

	padding: 5px;

	margin-left: auto;

	margin-right: auto;

}



.errorbox {

	border: 1px dashed #cc0000;

	font-weight: bold;

	background-color: #FBEEEB;

	text-align: center;

	width: 90%;

	padding: 10px;

	color: #cc0000;

	margin-left: auto;

	margin-right: auto;

}



.successbox {

	border: 1px dashed #66CC00;

	font-weight: bold;

	background-color: #DDFFC6;

	text-align: center;

	width: 90%;

	padding: 10px;

	color: #009933;

	margin-left: auto;

	margin-right: auto;

}



/* --------------------------------------------------------------

   CLIENT AREA NAVBAR

-------------------------------------------------------------- */



.clientarealinks {

    background-color: #FDFCDD;

    padding: 10px;

}



.clientarealinks a {

	color: #555555;

}



/* --------------------------------------------------------------

   TABLES

-------------------------------------------------------------- */



table.topnavbar {

	width: 100%;

}



tr.topnavbar {

	background-color: #efefef;

	font-weight:bold;

	text-align: center;

}



tr.topnavbar a {

	color: #000000;

	text-decoration: none;

}



tr.topnavbar a:hover {

	color: #666666;

}



table.frame {

	width: 100%;

	border: 1px solid #8FBCE9;

	padding: 0px;

}



.fieldarea {

	background-color: #EFF2F9;

	text-align: right;

}



.clientareatable {

	width: 100%;

	background-color: #cccccc;

}



tr.clientareatableheading td, tr.clientareatableheading th {

	background-color: #efefef;

	font-weight: bold;

	text-align: center;

    font-size: 12px;

	padding: 4px;

}



tr.clientareatableheading th a {

    color: #000;

}



.clientareatable td, tr.clientareatableactive td {

	background-color: #ffffff;

	text-align: center;

    padding: 2px;

}



tr.clientareatablepending td {

	background-color: #FFFFE2;

	text-align: center;

    padding: 2px;

}



tr.clientareatablesuspended td {

	background-color: #E9FFD2;

	text-align: center;

    padding: 2px;

}



tr.clientareatableterminated td {

	background-color: #FFE1E1;

	text-align: center;

    padding: 2px;

}



/* --------------------------------------------------------------

   NETWORK ISSUES

-------------------------------------------------------------- */



.networkissuessummary {

    background-color: #f6f6f6;

    border: 1px dashed #cccccc;

    padding: 10px;

    text-align: center;

}



.networkissuesopen {

    font-size: 16px;

    font-weight: bold;

    color: #65CC00;

    padding-right: 20px;

}



.networkissuesscheduled {

    font-size: 16px;

    font-weight: bold;

    color: #EEDD00;

    padding-right: 20px;

}



.networkissuesclosed {

    font-size: 16px;

    font-weight: bold;

    color: #888888;

}



.networkissuedescription {

    border-left: 5px solid #efefef;

    padding: 20px;

    padding-top: 1px;

}



.networkissueaffected {

    background-color: #FDFCDD;

    padding: 10px;

    margin-top: 10px;

}



/* --------------------------------------------------------------

   SUPPORT TICKETS

-------------------------------------------------------------- */



.clientticketreplyheader {

    margin-top: 20px;

    background-color: #92BDEA;

    font-weight: bold;

    color: #ffffff;

    padding: 4px 20px 4px 20px;

}



.clientticketreply {

    min-height: 80px;

    background-color: #ffffff;

    background-image: url('images/clientticketreplybg.gif');

    background-repeat: repeat-x;

    padding: 10px;

}



.adminticketreplyheader {

    margin-top: 20px;

    background-color: #888888;

    font-weight: bold;

    color: #ffffff;

    padding: 4px 20px 4px 20px;

}



.adminticketreply {

    min-height: 80px;

    background-color: #ffffff;

    background-image: url('images/adminticketreplybg.gif');

    background-repeat: repeat-x;

    padding: 10px;

}



.closeticket {

    border: 1px dashed #cc0000;

	font-weight: bold;

	background-color: #FBEEEB;

    color: #cc0000;

}



/* --------------------------------------------------------------

   KNOWLEDGEBASE

-------------------------------------------------------------- */



.kbarticle {

    padding: 2px 5px 5px 15px;

}



.kbviews {

    color:#A8A8A8;

    font-size:10px;

}



.kbalsoread {

    padding: 5px 5px 5px 15px;

    background-color: #f8f8f8;

    border-top: 1px dashed #ccc;

    border-bottom: 1px dashed #ccc;

    font-weight: bold;

    margin: 10px 0 10px 0;

}



/* --------------------------------------------------------------

   TEXT COLORS

-------------------------------------------------------------- */



.textblack {

	color: #000000;

}



.textblue {

    color: #224488;

}



.textgreen {

	color: #779500;

}



.textgrey {

	color: #888888;

}



.textgold {

    color: #ffbb55;

}



.textorange {

	color: #ff6600;

}



.textred {

	color: #cc0000;

}



/* --------------------------------------------------------------

   BUTTONS

-------------------------------------------------------------- */



input.button,input.buttongo,input.buttonwarn {

    margin:0 7px 0 0;

    background-color:#f5f5f5;

    border:1px solid #dedede;

    border-top:1px solid #eee;

    border-left:1px solid #eee;

    line-height:130%;

    text-decoration:none;

    font-weight:bold;

    color:#565656;

    cursor:pointer;

    width:auto;

    overflow:visible;

    padding:4px 7px 3px 7px;

}

input.button:hover{

    background-color:#dff4ff;

    border:1px solid #c2e1ef;

    color:#336699;

}

input.buttongo:hover{

    background-color:#E6EFC2;

    border:1px solid #C6D880;

    color:#529214;

}

input.buttonwarn:hover{

    background-color:#fbe3e4;

    border:1px solid #fbc2c4;

    color:#d12f19;

}



/* --------------------------------------------------------------

   TWITTER FEED

-------------------------------------------------------------- */



#twitterfeed ul {

    list-style-type: none;

    padding: 0;

    margin: 15px 0 20px 0;

}

#twitterfeed li {

    background-image: url(../../images/twittericon.png);

    background-repeat: no-repeat;

    background-position: 0;

    margin: 0 20px 10px 20px;

    padding-left: 25px;

}

#twitterfeed p {

    text-align: center;

    margin: 15px;

}



#announcementstwitter {

    float: right;

    width: 250px;

    margin: 0 0 20px 10px;

    padding: 10px 0 10px 0;

    border: 1px dashed #f5e303;

    background-color: #ffffec;

}

#announcementstwitterfeed ul {

    list-style-type: none;

    padding: 0;

    margin: 15px 0 0 0;

}

#announcementstwitterfeed li {

    padding: 10px;

    border-top: 1px dashed #f5e303;

}

#announcementstwitterfeed p {

    text-align: center;

    padding: 10px;

    margin: 10px 0 0 0;

    border-top: 1px dashed #f5e303;

}

Open in new window


Please Help me figure this out!
0
Comment
Question by:vePortal
  • 4
  • 4
8 Comments
 
LVL 9

Expert Comment

by:oheil
ID: 34212340
The first thing I see is, that you have a syntax error here in line 27:

// cancel close timer
function mcancelclosetime()
}

So javascript stops and your menu will not work.
remove the }

Oli
0
 
LVL 9

Expert Comment

by:oheil
ID: 34212345
or add the opening { to this function
like

function mcancelclosetime()
{
}

Oli
0
 

Author Comment

by:vePortal
ID: 34212356
I dont mean to be rude but Line 27 says " // get new layer and show it "

I dont see "mcancelclosetime()" without double quotes anywhere :\ Perhapse paste it and bolden up the part you are refering too?
0
 
LVL 9

Expert Comment

by:oheil
ID: 34212366
Sorry.
It is in the html source of the URL you gave

http://www.nodegeeks.com/whmcs/

and I just open the "Error Console" of firefox to see the error.

Oli
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:vePortal
ID: 34212393
The code above is EXACTLY what is on the host you are browsing, so please try to assist using the code pasted above.
0
 
LVL 9

Expert Comment

by:oheil
ID: 34212448
Your code contains variables so I prefer to use the live system to look for errors. The code above and finding the solutions for errors on your live system is your part.

Furthermore I recommend that you go step by step by solving the obvious errors first (and the above one is obvious). When done with this you can dig for your css menu problem.

And further more the code above is not EXACTLY the same because the error occurs on the URL and is not in the code above.

I prefer to talk about the problem and not how I have to solve your problem.

Regards,

Oli
0
 

Accepted Solution

by:
vePortal earned 0 total points
ID: 34213503
Problem Resolved.

And for future viewers the solution was...

Within WHMCS it uses the SMARTY Templating system and therefore when using <script> tags you must encapsulate them in {literal} and {/literal}.

Done this and it worked perfectly.
0
 

Author Closing Comment

by:vePortal
ID: 34237227
Resolved issue myself!
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now