Links underneath dropdown menu don't work

[gusgus]

Hi,
I've managed to get my drop down menu to load via an iframe and drop down nicely over my articles. Unfortunately the setting for it to do that, height 100%, shows great in the browser but none of the links under it are accessible.

My goal is to avoid having to maintain menu edits on all 300+ pages on our site. The iframe is perfect except for this. In the original menu code there is a notation that is commented out that refers to this problem but I can't see how to fix.

Here is a test page (http://www.topkayaker.net/mytopo/index.html). If you need any other info to help me with this I'd appreciate it.


/* Begin CSS Drop Down Menu */

#menuh-container
{
position: relative;
top: 0em;
/* below keeps background from stretching 100% on front page*/
/* background: url(bluetilebck.jpg); */
/* commented out as does not seem to be needed */
/*left: 1em; */
}

#menuh
{
position: relative; /*centers in IE for the ubbclassic forum*/
font-size: 10px;
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
width:84em;
margin-left:auto; /*centers in Fire Fox - thanks downtap of csscreater.com */
margin-right:auto; /*centers in Fire Fox - thanks downtap of csscreater.com */
}

#menuh a
{
text-align: center;
display:block;
border: 1px solid #006699;
white-space:nowrap;
margin:0;
padding: 0.3em;
}

#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */
{
color: #ffffff;
background: url(bluetilebcklite.jpg);
text-decoration:none;
}

#menuh a:hover /* menu at mouse-over */
{
color: #990000;
background: url(sandtilebck.jpg);
text-decoration:none;
}

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
font-size:12px;
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin: 0;
padding:0;
float:left; /* this keeps the cells horizontal as apposed to a vertical list */
width:14em; /* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto; /* centers child under parent - thanks downtap of csscreater.com */
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursor:pointer;
z-index:100;
}



div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

[coothead]

Hi there gusgus,


you really should not be using an iframe for this, as you have discovered. ;)

Instead the preferred method is server-side includes such as PHP.



coothead

[Beverleyh]

I second that! Here's a nice tutorial to help you get started with includes http://www.tizag.com/phpT/include.php

[molendijk]

The reason why the text on your pages is inaccessible is the height of the (transparent) iframe. You might think of making it smaller, but then the menu items will be partly invisible. So the iframe should not be used for this kind of thing. (Moreover, the URL in your address bar doesn't change on page transition, meaning that your pages cannot be bookmarked separately).
You could try to apply the technique described here (http://mesdomaines.nu/eendracht/include_menu11/file1.html) to solve the problem, but there's a much easier javascript way. Construct a file menu.html and put your menu in it (together with all its css and js). Then on all your pages where you want the menu to show, write something like:
In the head:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Somewhere in the body:

<div id="menu"></div>
End of body:

<script>
$('#menu').load('menu.html')
</script>

If you want to do it on the server side, follow Beverleyh's suggestion

You may also be interested in http://www.dynamicdrive.com/forums/entry.php?292-From-frameset-to-hashchange

[gusgus]

Thank you all... I guess I've got some homework to do... I'll post my solution here.

[gusgus]

OMG! I can't believe that worked!
I work with PHP on our linuex server where our shopping cart is but did not want to change all our html pages to php to use it here, so I tried Arie's tip.
This fix also gives me the correct urls for bookmarking. Yeah!
I put the script tag between the divs:


<div id="menu"><script>
$('#menu').load('menu.html')
</script></div>

[molendijk]

I put the script tag between the divs
Whenever there's a menu-loading problem, put the script immediately before the closing body tag. But I think the way you did it will work.