Current location: Hot Scripts Forums » General Web Coding » JavaScript » Rollout menu


Rollout menu

Reply
  #1 (permalink)  
Old 04-17-06, 04:16 PM
gigafare gigafare is offline
Newbie Coder
 
Join Date: Oct 2005
Posts: 74
Thanks: 0
Thanked 0 Times in 0 Posts
Rollout menu

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>

Last edited by Christian; 04-17-06 at 04:39 PM. Reason: Please use [CODE][/CODE] when posting code!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 04-17-06, 05:37 PM
jfulton's Avatar
jfulton jfulton is offline
Community VIP
 
Join Date: Apr 2006
Location: Los Angeles, CA
Posts: 660
Thanks: 0
Thanked 0 Times in 0 Posts
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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Collapsable Menu - HELP salvo HTML/XHTML/XML 1 08-16-06 05:12 AM
Dynamic menu item creation for "Tigra" (DHTML) menu. HELP! qin1 PHP 0 02-10-06 09:38 AM
Xml / Dom / Css Mark_SC.SE JavaScript 0 06-29-05 09:05 AM
Right Click Menu dwoody JavaScript 1 10-15-04 10:11 AM
Simple tree menu w/ html and js? zcorpan JavaScript 2 06-18-04 07:17 PM


All times are GMT -5. The time now is 08:49 AM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.