Member Avatar for bwallace

Hi everyone,

I see a thread here that may help, but as with the code I am using it doesn't help with designing a submenu for each item on our site menu. When you visit , there are three problems with the left menu:

(1) The only submenu that shows when you hover over anything on the left menu is the one for the first category.
(2) The main category on the left menu enlarges when the submenu appears.
(3) The links on the submenu all go to the URL for the main category on the left menu.

Here's the code:

<table class="classC" width="100%">
<script language="javascript" type="text/javascript">
function subMenu(show) {
if (show){
document.getElementById('sub_menu').style.display='block';
document.getElementById('sub_menu').style.position='relative';
document.getElementById('sub_menu').style.left='175px';
document.getElementById('sub_menu').style.bottom='30px';
} else {
document.getElementById('sub_menu').style.display = 'none';
}
}
</script>
<tr><td class="classA" valign="middle">Advice Topics</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://home.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Home & Garden
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Decorating</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Cleaning & Maintenance</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Apartment & City Living</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Gardening</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Moving</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://food.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Food
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Kitchen Help</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Food Shopping & Restaurants</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Recipes</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://people.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Family &<br>&nbsp;&nbsp;&nbsp;Relationships
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Marriage</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Kids</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Holidays</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Fun</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Pets</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href=''">&nbsp;&nbsp;&nbsp;Health
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Decorating</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Cleaning & Maintenance</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Apartment & City Living</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Gardening</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Moving</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://style.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Beauty & Style
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Fitness & Weight Management</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Illness Prevention & Remedies</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Men's Health</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Women's Health</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://travel.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Travel
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Auto Maintenance & Repair</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Trips & Vacation</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Buying & Selling a Vehicle</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://money.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Finances
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Free Stuff</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Saving Money</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Debt</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href=''">Career and Education</a></td></tr>
</table></div>
</td></tr>
</table>


Please help!

  • 2 Contributors
  • 3 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Kraai

Dani AI

Generated

Quick, practical checklist addressing the three symptoms reported by and the pointer from .

First, why only the first submenu shows: document.getElementById finds an element by ID and IDs must be unique. If every submenu uses the same id, the script will always target the first one. See Document.getElementById. Use unique IDs or, better, select the submenu relative to the menu item (for example this.querySelector('.submenu')) or use event delegation.

Second, why the main category grows when the submenu appears: the submenu was inserted inside the table cell and is in the document flow, so toggling display:block forces reflow. Keep submenus out of flow with position: absolute (anchored to a positioned parent) and control visibility with display or opacity/visibility so the parent size doesn’t change. See CSS position.

Third, why submenu clicks jump to the main category URL: inline onclick on the parent cell will fire for clicks inside the submenu because of event bubbling. Fixes: remove the parent navigation onclick and use a proper <a> for the main item; or catch submenu clicks and call event.stopPropagation() so the parent handler isn’t invoked. See Event.stopPropagation.

Minimal examples (not repeating OP’s code):

/* CSS: keep submenu out of flow */
.submenu { position: absolute; display: none; z-index: 100; }
.menu-item:hover .submenu { display: block; }
/* JS: stop parent click from firing when submenu clicked */
submenuElement.addEventListener('click', function(e){
  e.stopPropagation();
});

Also check that each submenu link has the correct href (as noted) and consider switching from table layout to semantic ul/ol nav for cleaner positioning, keyboard focus, and touch accessibility.

Recommended Answers

All 3 Replies

Member Avatar for Kraai

Hi, I did not go over your whole code, but can give you some general pointers:

1. The links in the submenu all go to the homepage, because that is the way they are currently linked:

For example, this:

<table class="seen2" style="font-size:small; right:100px">
<tr><td class="tpx2" valign="middle" onclick="window.location.href=''">Decorating</a></td></tr>

Should be something like this:

<table class="seen2" style="font-size:small; right:100px">
<tr><td class="tpx2" valign="middle" onclick="window.location.href=''">Decorating</a></td></tr>

But there may be some other mistakes as well, I see in above code you end of </a> without opening <a> anywhere, and so on.

You should look carefully over your code, as well as the linked stylesheet, to rectify the problems.

Member Avatar for bwallace

Thanks, Kraai, I forgot to mention that some of the links were dummy links until those pages exist. We figured out a way to fix it though. We moved the submenus from the left menu table and made them divs below the table. Then we adjusted the relative position of each submenu to make them appear beside the left menu.

Member Avatar for Kraai

Good stuff, glad you came right!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.