FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY

You are invited to Log in or Register a Frihost Account!

Table Help / Javascript dopdown menu

Frihost Forum Index -> Scripting -> Html, CSS and Javascript

Okay I have this as my html code:

Code:

<table border="2px" width="70px"
<tr>
<td>

<div id="wrapper">
<div id="leftcolumn">
<dl class="dropdown">
<dt id="three-ddheader" class="upperdd">Home</dt>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" class="upperdd" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Church</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Mass Schedule</a></li>
<li><a href="#" class="underline">Bullentin</a></li>
<li><a href="#" class="underline">Parish Staff</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">Teachers</dt>
<dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">
<ul>
<li><a href="#">1a. Teacher</a></li>
<li><a href="#">1b. Teacher</a></li>
<li><a href="#">2a. Teacher</a></li>
<li><a href="#">2b. Teacher</a></li>
<li><a href="#">3a. Teacher</a></li>
<li><a href="#">3b. Teacher</a></li>
<li><a href="#">4a. Teacher</a></li>
<li><a href="#">4b. Teacher</a></li>
<li><a href="#">5a. Teacher</a></li>
<li><a href="#">5b. Teacher</a></li>
<li><a href="#">6a. Teacher</a></li>
<li><a href="#">6b. Teacher</a></li>
<li><a href="#">7a. Teacher</a></li>
<li><a href="#">7b. Teacher</a></li>
<li><a href="#">8a. Teacher</a></li>
<li><a href="#">8b. Teacher</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="five-ddheader" onmouseover="ddMenu('five',1)" onmouseout="ddMenu('five',-1)">Support</dt>
<dd id="five-ddcontent" onmouseover="cancelHide('five')" onmouseout="ddMenu('five',-1)">
<ul>
<li><a href="#">Support</a></li>
</ul
</dd>
</dl>

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

CSS

Code:

body{
background-image:url('http://art4linux.org/system/files/blue-sky-1600.jpg');
font:12px Verdana;
}

* {padding:0; margin:0}
body {font:12px Verdana, Arial, Helvetica}

#wrapper {width:750px; padding:25px; margin:0 auto;}

#leftcolumn {float:left; width:206px; background:#CCCCCC;}

#rightcolumn {float:left; width:525px}

.dropdown {display:block; position:relative; background: #CCCCCC;}

.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(theme/images/navbar/header.gif)}

.dropdown .upperdd {border-bottom:none}

.dropdown dt:hover {background:url(theme/images/navbar/header_over.gif)}

.dropdown dd {position:absolute; top:0; overflow:hidden; width:208px; display:none; background:#000000;}

.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none}

.dropdown li {display:inline}

.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333333; text-decoration:none; background:#eaf0f2; width:194px}

.dropdown a:hover {background:#d9e1e4; color:#000}

.dropdown .underline {border-bottom:1px solid #b9d6dc}

JavaScript

Code:

var DDSPEED = 10;
var DDTIMER = 15;
var OFFSET = -2;
var ZINT = 100;

function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
c.style.display = 'block';
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.left = (h.offsetWidth + OFFSET) + 'px';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
ZINT = ZINT + 1;
c.style.zIndex = ZINT;
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = Math.round((c.maxh - currh) / DDSPEED);
}else{
dist = Math.round(currh / DDSPEED);
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if(currh > (c.maxh - 2) && d == 1){
clearInterval(c.timer);
}else if(dist < 1 && d != 1){
clearInterval(c.timer);
c.style.display = 'none';
}
}

Now I am pretty good at creating websites. I have gotten some professional comments, but I can't seem to get this right. It tends to make a big table around the JavaScript menu. I have checked my Css and JS and it all checks out. Got any ideas... Maybe new drop down menu..?[/code]

Last edited by Asap170 on Tue Sep 01, 2009 7:39 pm; edited 1 time in total

Asap170 wrote:

It tends to make a big table around the JavaScript menu.

Code:

<table border="2px" width="70px"
<tr>
<td>

you didn't close the table tag and have set the border to 2.

can we get the full source code with css and javascript, that way we have a better view of what the issue is

okay I updated the code and... tried what u said and it still won't work...

sorry for the late reply

are you talking about the border of the main table?

Code:

<table border="2px" width="70px">

change the 2px to 0px

if you are talking about the double border between teachers and support... then use the class upperdd you created on all but the last menu item:

Code:

<dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)" class="upperdd" >Teachers</dt>

you can also try for Sothink free DHTML Menu its very nice

Related topics

Need help with a menu!
I need help with my menu code.
Javascript Floating Menu
Need Help: Javascript stoped until all pages loaded.
Can somebody do me a help?

Off-Screen Objects Javascript
html tag <table help?
onmouseOver onmouseOut
*please lock*
.html using header/footer include script?

Test my site and rate...
Thumbnails Linked to jpgs in the Same window. JS or Html?
New Design Please Review
Does a website have to be 'from scratch' to be 'your work'?
How does a person find out about his/her homosexuality?

Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.