Drop-down menu help [Archive] - Dynamic Drive Forums

Bleach984

07-27-2006, 10:51 AM

I need some help. I have a drop-down menu that I need to go over a frame. Basicly it is a dropdown menu that when you hover over the menu it will display the submenu over a frame/window.

Is there a way to do this? And, if there is could someone help me out. I have no clue how to do this.
________________________________________________________________

Also in this menu when the menu drops down I have a colapsable menu that you can collapse so that the dropdown is smaller. For some reason when I click on the collapsable menu and when it starts to collapse the drop-down menu retracts and you have to make the drop-down restart and once that happens the collapsable menu is where it should be.. with the tab that I collapsed in a collapsed state. The same thing happens when I un-collapse the menu the drop down dissappears.

Is there a way to fix the That problem?

P.S: When I try the aforementioned problem(problem #2) in Firefox the menu with the collapsing subheaders it works fine. The problem is in I.E.

Also I have another problem, yes sorry for all of the problems, whem I try to view my site in Firefox I only get the first frame of my website. Wierd HUH?

Could some one help me out with this?
________________________________________________________________

If any of my problems were solved I would be soooooo grateful.(preferably the first 2 problems first) I hope they all can be by all you extremly-knowledgeable coders and scripters out there.
Thank you for your help!!!

jscheuer1

07-28-2006, 06:13 AM

You really should look into HV Menu:

http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm

mburt

07-29-2006, 05:03 PM

I like to use this: (doesn't work in Mozilla though)

<html>
<head>
<script language="javascript">
window.onload = function() {
link1.onmouseover = function() {
link1.style.border = "1px solid #000000"
pullOut(menu1)
}
link1.onmouseout = function() {
link1.style.border = "1px solid #4787D7"
pullIn(menu1)
}
menu1.onmouseover = function() {
link1.style.border = "1px solid #000000"
pullOut(menu1)
}
menu1.onmouseout = function() {
link1.style.border = "1px solid #4787D7"
pullIn(menu1)
}
link2.onmouseover = function() {
link2.style.border = "1px solid #000000"
pullOut(menu2)
}
link2.onmouseout = function() {
link2.style.border = "1px solid #4787D7"
pullIn(menu2)
}
menu2.onmouseover = function() {
link2.style.border = "1px solid #000000"
pullOut(menu2)
}
menu2.onmouseout = function() {
link2.style.border = "1px solid #4787D7"
pullIn(menu2)
}
}
function pullOut(id) {
id.style.display = "block"
}
function pullIn(id) {
id.style.display = "none"
}
</script>
<style type="text/css">
body {
margin-right:400;
font:16px tahoma
}
.link {
border:1px solid #4787D7;
width:100px;
padding:5;
font:10px verdana ref;
cursor:default;
margin-bottom:0
}
.menu {
border:1px solid #000000;
width:100px;
padding:5;
font:10px verdana ref;
cursor:default;
display:none;
border-top:none;
margin-top:0;
background:white
}
</style>
</head>
<body>
Menu
<br><table style="position:absolute">
<tr>
<td valign="top">
<span id="link1" class="link">Test</span><span id="menu1" class="menu">
Line 1
<br>Line 2
<br>Line 3
<br>Line 4
<br>Line 5
<br>Line 6
<br>Line 7
</span>
</td>
<td valign="top">
<span id="link2" class="link">Test</span><span id="menu2" class="menu">
Line 1
<br>Line 2
<br>Line 3
<br>Line 4
<br>Line 5
</span>
</td>
</tr>
</table>
<br><br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam...
</body>
</html>