Jump to content

Stop Menu Bar From Shifting Other Menu Items


nachumk
 Share

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.

Edited by thescientist
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;}

Edited by dsonesuk
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...