Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drop down menu onto bottom frame

Status
Not open for further replies.
itsita001

itsita001

Programmer
Nov 6, 2002
21
0
0
IL
How can i have the following drop down menu drop onto the bottom frame (assuming it is in the top frame) and also still be able to close properly once mouse is off:

<html >
<head>
<style type=&quot;text/css&quot;>
a { font-size:10pt; color: navy; text-decoration: none }
a:hover { color:blue; text-decoration: underline }
a.plain:hover { font-size:10pt;font-weight:bold; color: blue; text-decoration: none }

#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:lime }
#bluebox {background-color:lightsteelblue }
hover{color: white;)
#mnubar {font:10pt arial; font-weight:bold; color:&quot;steelblue&quot; }

</style>

<script language=&quot;JavaScript&quot;>
ns=window.navigator.appName == &quot;Netscape&quot;
ie=window.navigator.appName == &quot;Microsoft Internet Explorer&quot;

function openIt(x) {
if(ns) {
showbox= document.layers[x+1]
showbox.visibility = &quot;show&quot;;
showbox.top=25;

var items = 4 ;
for (i=1; i<=items; i++) {
elopen=document.layers
if (i != (x + 1)) {
elopen.visibility = &quot;hide&quot; }
}
}

if(ie) {
curEl = event.toElement
curEl.style.background = &quot;lightsteelblue&quot;

showBox = document.all.box[x];
showBox.style.visibility = &quot;visible&quot;;
showBox.style.top = 25;

var items = 4
for (i=0; i<items; i++) {
elOpen=document.all.box
barEl=document.all.mnubar
if (i != x){
elOpen.style.visibility = &quot;hidden&quot;
barEl.style.background = &quot;black&quot;
}
}
}
}

function closeIt() {
var items = 4
for (i=0; i<items; i++) {
if(ie){
document.all.box.style.visibility = &quot;hidden&quot;
barEl=document.all.mnubar
barEl.style.background = &quot;black&quot;
}
if(ns){ document.layers[i+1].visibility = &quot;hide&quot;}
}
}

</script>

</head>

<body bgcolor=&quot;white&quot; vlink=navy marginwidth=&quot;0&quot; marginheight=&quot;0&quot; topmargin=&quot;0&quot; leftmargin=&quot;0&quot; style='direction:rtl;'>

<table border=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;100%&quot; bgcolor=&quot;black&quot; height=&quot;18&quot; id=mainmenu>



<tr>
<td align=&quot;center&quot; ><a href=' onmouseover=&quot;closeIt()&quot; class=plain>My Home Page</a></td>

<td align=&quot;center&quot; nowrap >
<a href=&quot;#&quot; onmouseover=&quot;openIt(0)&quot; id=mnubar>ùìåí</a><br></td>

<td align=&quot;center&quot; nowrap >
<a href=&quot;#&quot; onmouseover=&quot;openIt(1)&quot; id=mnubar>Menu Item 2</a><br></td>

<td align=&quot;center&quot; nowrap >
<a href=&quot;#&quot; onmouseover=&quot;openIt(2)&quot; id=mnubar>Menu Item 3</a><br></td>

<td align=&quot;center&quot; nowrap >
<a href=&quot;#&quot; onmouseover=&quot;openIt(3)&quot; id=mnubar>Menu Item 4</a><br></td>



<td align=&quot;center&quot; width=&quot;30&quot; nowrap valign=&quot;top&quot;>&nbsp;</td>
</tr>
</table>
<br><br>

<div onmouseover=&quot;closeIt()&quot; >
<layer onmouseover=&quot;closeIt()&quot;>

<p style='color:white;'><b>Hidden close script</b></p>

<p style='color:white;'>A horizontal menu bar that displays a second horizontal menu on mouseover </p>
<p style='color:white;'>A horizontal menu bar that displays a second horizontal menu on mouseover </p>

<p style='color:white;'>kjllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
<p style='color:white;'>kjllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>


</layer>
</div>


<!-- Menu Bar Item 1 -->

<div id=box style=right:200>
<table border=&quot;1&quot; height=&quot;1%&quot; id=bluebox >
<tr><td height=&quot;80%&quot;><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>


<!-- Menu Bar Item 2 -->

<div id=box style=right:400>
<table width=10%&quot; border=&quot;1&quot; id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>

<!-- Menu Bar Item 3 -->

<div id=box style=right:600>
<table border=&quot;1&quot; id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>

<!-- Menu Bar Item 4 -->

<div id=box style=right:800>
<table border=&quot;1&quot; id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>



</body>
</html>
 
Sort by date Sort by votes
you cannot fly from frame to frame...you can if you use an iframe....but not a regular frame [soapbox]
sleep is good
 
Upvote 0 Downvote
lets say you have a table 100% by 100% and you have it broken into 3 rows...lets say bottom row is 100px fixed height...make an iframe in the bottom row 100px fixed height...then you just make your page around it and page content i.e layers and menus will appear over iframe....but iframe is only 1e 5+ and nn6 compatible [soapbox]
sleep is good
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
124
trevil620
trevil620
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
122
nanbread
nanbread
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
131
TheLazyPig
TheLazyPig
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
45
Dara2020
Dara2020
edd92
  • Locked
  • Question
Dropzone Issues
Replies
0
Views
57
edd92
edd92

Part and Inventory Search

Sponsor

Back
Top