Jump to content

Stop Menu Bar From Shifting Other Menu Items


nachumk

Recommended Posts

Hi,I have a sample up athttp://www.nkcorner.com/tmp/What I'd like is for the other menu items to stay in originally placed location when I set font-weight to bold. I want to stop the shifting. I know I can absolutely fix width but I prefer not to. Is there any way to fix this without giving a fixed width?ThanxHTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"><link href="main.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="main.js"></script></head><body onload="return onLoad();"><div class="divIcon" id="divIcon"><img class="mainIcon" src="NK_100x100.gif"/></div><div class="topMenuBar"><div class="topMenu"><div class="topMenuItemBox" id="topMenuHome" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);"><div class="topMenuItem">Home</div></div><div class="topMenuItemBox" id="topMenuResume" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);"><div class="topMenuItem">Resume</div></div><div class="topMenuItemBox" id="topMenuPictures" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);"><div class="topMenuItem">Pictures</div></div></div></div></body></html>CSS:.divIcon{ margin-top:0px; margin-left:0px; width:100px; height:100px; border-width:2px; border-style:groove; float:left;}.topMenuBar { margin-top:0px; margin-left:104px; background-color:red; height:104px;}.topMenu { padding-top:52px; width:100%; height:50%;}.topMenuItemBox { height:100%; float:left;}.topMenuItem { padding:10px; text-align:center;}.topMenuSetItem { font-weight:bold; font-style:italic; font-size:large;}.topMenuOverItem { font-weight:bold; cursor:pointer;}JS:currentDiv = null;function onLoad() { storeStartClassNames(); setTopMenu(document.getElementById('topMenuHome')); return 1;}function storeStartClassNames() { var allElements = document.getElementsByTagName("*"); for(var i = 0; i < allElements.length; i++) allElements.oldClassName = allElements.className;}function setTopMenu(div) { if(currentDiv && (div != currentDiv)) unsetTopMenu(currentDiv); if(div == currentDiv) return 0; currentDiv = div; div.className = div.oldClassName + " topMenuSetItem"; return 1;}function unsetTopMenu(div) { div.className = div.oldClassName;}function menuClick(div) { setTopMenu(div);}function menuOver(div) { if(currentDiv == div) return 0; div.className = div.oldClassName + " topMenuOverItem"; return 1;}function menuOut(div) { if(currentDiv == div) return 0; div.className = div.oldClassName; return 1;}

Link to comment
Share on other sites

there is a much easier to do what you are trying to do. Try looking in the CSS tutorials under pseudo classes. If people have JS turned off, then no rollover effect.

Link to comment
Share on other sites

if you are going the javascript route, you have to stop the width of current roll-over menu expanding, to allow for the menu text changing to bold.tryfunction menuOver(div) {if(currentDiv == div)return 0;div.style.width=div.offsetWidth+"px";div.className = div.oldClassName + " topMenuOverItem";return 1;}

Link to comment
Share on other sites

if you are going the javascript route, you have to stop the width of current roll-over menu expanding, to allow for the menu text changing to bold.tryfunction menuOver(div) {if(currentDiv == div)return 0;div.style.width=div.offsetWidth+"px";div.className = div.oldClassName + " topMenuOverItem";return 1;}
Actually I'm not doing this in Javascript code. I am using javascript to apply classes dynamically. I want it to be solved without manual js intervention. I'm gonna look into pseudo classes as mentioned above.
Link to comment
Share on other sites

there is a much easier to do what you are trying to do. Try looking in the CSS tutorials under pseudo classes. If people have JS turned off, then no rollover effect.
Thank you for the pseudo classes tip! I removed my menuOver and menuOut functions and just added the hover code. Much simpler now :)
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...