I have this basic HTML document that I need help with. After a user clicks on the ">", the menu expands. However, I would like the ">" to change to "<" after it is clicked/expanded. In addition, I would like the menu to be able to shift back to its original position if the "<" is clicked. I don't want to radically change the code (this is an assignment). Any suggestions? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> #hmenu {position:absolute; overflow: hidden; left: -275px; width:350px; height:30px; border: solid 1px #339900; padding: 5px; font-family: arial, sans-serif;} #harrow {position: absolute; left: 325px; top: 5px; border: solid 1px #339900; font-weight: bold; width:20px; height: 18px; text-align:center; background-color:#336600; } a {text-decoration: none;} #harrow a {color: white} </style> <script> function move(menu_id,mTop,mLeft){ var obj = document.getElementById(menu_id); obj.style.top = obj.offsetTop+mTop +"px"; obj.style.left = obj.offsetLeft+mLeft+"px"; } </script> </HEAD> <BODY> <div id=hmenu> <a href=#>Link 1</a> | <a href=#>Link 2</a> | <a href=#>Link 3</a> | <a href=#>Link 4</a> | <a href=#>Link 5</a> <div id=harrow><a href="#" onclick="move('hmenu',0,295)"> > </a></div> </div> </BODY> </HTML> HTML:
My advice? WHAT DHTML, and stop trying to use javascript to do CSS' job. If all you are doing is a expand/contract on a section, just swap a class with the scripting and let CSS do the grunt-work, instead of playing games with trying to move the object with unreliable values. Though given the decade and a half out of date markup methodologies, scripting methodologies, and just plain bad code, you've probably been given a dipshit assignment by a dipshit "teacher" who has no business teaching anyone a blasted thing! See 90%+ of educators in the IT field and why that piece of paper you're working towards isn't worth a sheet of bog roll. Apologies if that seems a little harsh -- but to do what I THINK you are trying to do, I'd throw out EVERYTHING you have there.
deathshadow, I know it's ridiculous. Unfortunately, this is the scope of the assignment and I can't do anything about it. Putting that aside, what can I add to this code to do what I need? I know it's tempting to change the entire approach, but I can't Oh, and I read your insight on this particular issue: http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-3?pid=202#section_3.4 I couldn't agree more. Words of wisdom...
Ok, ASSUMING you want to keep as much of the buggy broken invalid outdated garbage as possible... ALL you need here is a couple simple class swaps and some display state changes, NOT goofing around with positioning. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title> open/close menu demo </title> <style type="text/css"><!-- #hMenu { overflow:hidden; /* wrap floats */ position:relative; /* so the div can be apo off #hMenu */ zoom:1; /* trip haslayout so positioning isn't screwed up in IE */ } .menu div { float:left; border:1px solid #390; } .menu a { display:inline-block; padding:0.2em 0.5em; } .hMenuClose div, .hMenuClose .closeArrow, .hMenuOpen .openArrow { display:none; } .hMenuOpen div { display:inline; } .hMenuOpen .closeArrow, .hMenuClose .openArrow { display:inline-block; } .openArrow, .closeArrow { font-weight:bold; text-decoration:none; color:#FFF; background:#360; border:1px solid #390; } --></style> </head></body> <div id="hMenu" class="menu hMenuClose"> <div> <a href=#>Link 1</a> | <a href=#>Link 2</a> | <a href=#>Link 3</a> | <a href=#>Link 4</a> | <a href=#>Link 5</a> </div> <a href="#" onclick="document.getElementById('hMenu').className='menu hMenuOpen'; return false;" class="openArrow" >></a> <a href="#" onclick="document.getElementById('hMenu').className='menu hMenuClose'; return false;" class="closeArrow" ><</a> </div> </body></html> Code (markup): NOT that I'd ever deploy code like that... but that's generally how I'd go about it... (I dumbed down the scripting a LOT and resisted the temptation to throw all the markup away) -- without screwing around with margins or positioning since there's NO reason to be using APO on any of that.