Solved

CSS Dropdown Menu's Help!

Posted on 2010-11-25
8
379 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 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

23 Experts available now in Live!

Get 1:1 Help Now