Rollout menu

gigafare · #1 (**permalink**) 04-17-06, 04:16 PM

I have some problems with a rollout menu. I'm following a pretty good tutorial but the thing is there is a script behind it already, hard to implement.

Web site: http://www.vhtechnology.com/daxtrader/index.php

Result : http://money.cnn.com/ (menu)

Problem: somewhere in the tablist (?) The submenu's position seems absolute, not able to "float" and it's next to each other instead of underneath.

Tutorial: http://www.alistapart.com/articles/dropdowns

THANKS in advance !

CSS

Code:

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;

float: left;
position: relative;
width: 10em;

}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 0px none;
border-bottom: none;
color: FFFFFF; 
font-family: arial; 
font-size: 11px; 
text-decoration: none;

}

#tablist li a:link, #tablist li a:visited{
color: FFFFFF; 
font-family: arial; 
font-size: 11px; 
text-decoration: none;
}

#tablist li a:hover{
color: F5F5FB; 
font-family: arial; 
font-size: 11px; 
text-decoration: none;
display: block;


}

#tablist li a.current{
background: url(img/subcategorie_bg.jpg);
}

#tabcontentcontainer{
width:960px;
height:20px;
color: FFFFFF;
font-size: 12px;
display: block;

}

.tabcontent{
color:#FFFFFF;
display: none;
}

DROP_DOWN Javascript

Code:

<!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("tablist");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//-->

HEADER FILE

Code:

<html>
<head>
<title>{$page_title}</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" >
<!--
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
{if $showiteration}
var initialtab=[{$showiteration+2}, "sc{$showiteration+1}"];
{else}
var initialtab=[1, "sc"];
{/if}
-->
</script>

<script type="text/javascript" src="drop_down.js"></script>
<script type="text/javascript" src="common.js"></script>

</head>
<body>

<table width="100%" height="70px" cellspacing="0" cellpadding="0">
<tr><td background="img/header.gif"></td> </tr>
</table>

<table width="100%" height="21px" cellspacing="0" cellpadding="0">
<tr>
<td background="img/categorie_bg.jpg">
<ul id="tablist">
<li><a href="index.php" onMouseOver="expandcontent('sc', this)" id="homelink">Home</a></li>
{section name=p loop=$pages}
<li><a href="page.php?ID={$pages[p].ID}" onMouseOver="expandcontent('sc{$smarty.section.p.iteration}', this)">{$pages[p].name}</a></li>
{/section}
</ul>
</td>
</tr>
</table><table width="100%" height="17px" cellspacing="0" cellpadding="0">
<tr>
<td background="img/subcategorie_bg.jpg">
<div id="tabcontentcontainer">
<div id="sc" class="tabcontent"></div>
{section name=p loop=$pages}
<div id="sc{$smarty.section.p.iteration}" class="tabcontent">
{repeat txt="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" count=$smarty.section.p.iteration}{section name=sp loop=$pages[p].subpages}<a href="page.php?ID={$pages[p].subpages[sp].ID}" class="sub">{$pages[p].subpages[sp].name}</a>{if not $smarty.section.sp.last} &nbsp; {/if}{/section}
</div>
{/section}
</div>
</td>
</tr>
</table>

jfulton · #2 (**permalink**) 04-17-06, 05:37 PM

I'm not really sure what your exact question is, and quite frankly your site is a pain to look at (at least in Firefox...it asks me to save files from yahoo finance when I mouse over an iframe or something? I don't know, I got the heck out of there...) so I'm not going to waste too much time trying to debug your site

.

But one thing I noticed was this little bit of code:

Code:

			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}

I do not see an over class in your css file.

And please post the html output of your page (although it is good to see that you are using smarty

).

And let me know when your site is cleaned up a little bit.