Navigation Bar Sub-menus outside an Iframe

[Rain Lover]

Hi,

I'd like to create a horizontal navigation bar with lots of sub-menus in a page and then insert it to my site as an Iframe. I know how to do it, but the problem is I need to set a big height value for the iframe to see the sub-menus. How can I show the main body of navigation bar inside the iframe and the sub-menus outside of it?


Any idea might help!
Regards
Rain Lover

[fobos]

Do you have some kind of example or your site that we can look at. Also, what do you have or have tried as far as coding. People can answer, but good examples and some type of coding showing that you tried can really help us to help you.

[molendijk]

One way to do this is to create separate menu items for (i) the iframe, which would contain the main menu items, and (ii) the pages in which you put the iframe, and which would (also) contain the submenus. But that would force you to use an include technique allowing you to put the subitems on each page containing the iframe. I guess that is not what you want, since you use the iframe as an easy way to include external content on your pages.

You could use PHP, Ajax or another method for including your menu on each page.

If you want to stick to the iframe, you could use select boxes, which are windowed elements (provided they have 'size=0') and consequently allow the 'subitems' to appear on top of anything. An example would be:

menu.html:
Head:
<script type="text/javascript">
var which="";
function selected(){
for (i=0;i<document.getElementsByTagName('select').length; i++) {
document.getElementsByTagName('select').item(i).selectedIndex=0;
}
}
document.onmouseover=selected;

function select_menu(which) {
var optionValue = document.getElementById(which).options[document.getElementById(which).selectedIndex].value;
if (optionValue=="none") {}
else top.location.href=optionValue
}
</script>

Body:
<select size="0" name="select1" id="select1" onchange="select_menu('select1');selectedIndex=0" >
<option value="none" selected>Pages 1 & 2</option>
<option value="page1.html" >Page 1</option>
<option value="page2.html">Page 2</option>
</select> 

<select size="0" name="select2" id="select2" onchange="select_menu('select2');selectedIndex=0" >
<option value="none" selected>Pages 3 & 4</option>
<option value="page3.html" >Page 3</option>
<option value="page4.html">Page 4</option>
</select> 

page1.html:
<div style="position:relative; text-align: center"> 
<iframe src="menu.html" frameborder="0" style="top:0px; width:400px; height:30px">
</iframe>
</div>
<br><br>This is page 1

page2.html:
<div style="position:relative; text-align: center"> 
<iframe src="menu.html" frameborder="0" style="top:0px; width:400px; height:30px">
</iframe>
</div>
<br><br>This is page 2

page3.html:
<div style="position:relative; text-align: center"> 
<iframe src="menu.html" frameborder="0" style="top:0px; width:400px; height:30px">
</iframe>
</div>
<br><br>This is page 3

page4.html:
<div style="position:relative; text-align: center"> 
<iframe src="menu.html" frameborder="0" style="top:0px; width:400px; height:30px">
</iframe>
</div>
<br><br>This is page 4

Here's a tutorial on how to use the select box as some sort of menu.
===
Arie Molendijk