Letterbomb05 Posted December 27, 2008 Share Posted December 27, 2008 Hi, I'm currently trying to make this menu work the way I want it. It's a DHTML goodies menu, I'm just trying to get it to work in a way I want . The menu is made up of HTML, CSS and JavaScript. www.team-recoil.com/testing/menu.htm If you take a look at the page (all source code is there) I have the menu, which slides nicely, but the div that is to the right is below it, and moves with the menu. All I want is for that div to be at the same level as the menu, and not move when the menu is used. Basically I'd just like to have the menu work on its own without effecting anything else. Thanks in advance. Quote Link to comment https://forums.phpfreaks.com/topic/138557-dhtml-menu/ Share on other sites More sharing options...
dropfaith Posted December 31, 2008 Share Posted December 31, 2008 wierd i dont fully support this option but i added a table to your page to test something and got it working im tweaking it a bit still but this is a temp fix <html><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Sliding Menu</title> <style type="text/css"> menu{ float:left; width:218px; } .dhtmlgoodies_question{ color:#FFF; font-size:0.9em; background:red; width:218px; margin-top:2px; background-repeat:no-repeat; background-position:top right; height:20px; overflow:hidden; cursor:pointer; } .dhtmlgoodies_answer{ background:red; width:218px; visibility:hidden; height:0px; overflow:hidden; padding:0; margin:0; } .dhtmlgoodies_answer ul { list-style:none; } .dhtmlgoodies_answer_content{ font-size:0.9em; height:70px; } .block { background:red; width:400px; height:80px; float:right; margin-top:0px; } div.contain {width:626px;background:#00f} </style> <script type="text/JavaScript"> var dhtmlgoodies_slideSpeed = 10; // Higher value = faster var dhtmlgoodies_timer = 10; // Lower value = faster var objectIdToSlideDown = false; var dhtmlgoodies_activeId = false; var dhtmlgoodies_slideInProgress = false; function showHideContent(e,inputId) { if(dhtmlgoodies_slideInProgress)return; dhtmlgoodies_slideInProgress = true; if(!inputId)inputId = this.id; inputId = inputId + ''; var numericId = inputId.replace(/[^0-9]/g,''); var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId); objectIdToSlideDown = false; if(!answerDiv.style.display || answerDiv.style.display=='none'){ if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){ objectIdToSlideDown = numericId; slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1)); }else{ answerDiv.style.display='block'; answerDiv.style.visibility = 'visible'; slideContent(numericId,dhtmlgoodies_slideSpeed); } }else{ slideContent(numericId,(dhtmlgoodies_slideSpeed*-1)); dhtmlgoodies_activeId = false; } } function slideContent(inputId,direction) { var obj =document.getElementById('dhtmlgoodies_a' + inputId); var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId); height = obj.clientHeight; if(height==0)height = obj.offsetHeight; height = height + direction; rerunFunction = true; if(height>contentObj.offsetHeight){ height = contentObj.offsetHeight; rerunFunction = false; } if(height<=1){ height = 1; rerunFunction = false; } obj.style.height = height + 'px'; var topPos = height - contentObj.offsetHeight; if(topPos>0)topPos=0; contentObj.style.top = topPos + 'px'; if(rerunFunction){ setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer); }else{ if(height<=1){ obj.style.display='none'; if(objectIdToSlideDown && objectIdToSlideDown!=inputId){ document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block'; document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible'; slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed); }else{ dhtmlgoodies_slideInProgress = false; } }else{ dhtmlgoodies_activeId = inputId; dhtmlgoodies_slideInProgress = false; } } } function initShowHideDivs() { var divs = document.getElementsByTagName('DIV'); var divCounter = 1; for(var no=0;no<divs.length;no++){ if(divs[no].className=='dhtmlgoodies_question'){ divs[no].onclick = showHideContent; divs[no].id = 'dhtmlgoodies_q'+divCounter; var answer = divs[no].nextSibling; while(answer && answer.tagName!='DIV'){ answer = answer.nextSibling; } answer.id = 'dhtmlgoodies_a'+divCounter; contentDiv = answer.getElementsByTagName('DIV')[0]; contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; contentDiv.className='dhtmlgoodies_answer_content'; contentDiv.id = 'dhtmlgoodies_ac' + divCounter; answer.style.display='none'; answer.style.height='1px'; divCounter++; } } } window.onload = initShowHideDivs; </script> </head><body> <div class="contain"> <table><tr><td><div id="dhtmlgoodies_q1" class="dhtmlgoodies_question"> <div style="margin: 2px;"><strong>Lumbridge.Net</strong> </div> </div> <div style="display: block; height: 70px; visibility: visible;" id="dhtmlgoodies_a1" class="dhtmlgoodies_answer"> <div id="dhtmlgoodies_ac1" class="dhtmlgoodies_answer_content" style="top: 0px;"> <ul> <li><a href="http://www.team-recoil.com/testing/forums/">Forums</a></li> </ul> </div> </div> <div id="dhtmlgoodies_q2" class="dhtmlgoodies_question"> <div style="margin: 2px;"><strong>Calcs</strong> </div> </div> <div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a2" class="dhtmlgoodies_answer"> <div id="dhtmlgoodies_ac2" class="dhtmlgoodies_answer_content" style="top: -69px;"> <ul> <li><a href="">Skill Calculators</a></li> <li><a href="">Mini Games</a></li> </ul> </div> </div> <div id="dhtmlgoodies_q3" class="dhtmlgoodies_question"> <div style="margin: 2px;"><strong>Guides</strong> </div> </div> <div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a3" class="dhtmlgoodies_answer"> <div id="dhtmlgoodies_ac3" class="dhtmlgoodies_answer_content" style="top: -69px;"> <ul> <li><a href="http://www.team-recoil.com/testing/guides/skills/">Skill Guides</a></li> <li><a href="http://www.team-recoil.com/testing/guides/mini-games/">Quest Guides</a></li> </ul> </div> </div> </td> <div class="block"> Hi #PHP. </div> </td></tr></table> </div> </body></html> Quote Link to comment https://forums.phpfreaks.com/topic/138557-dhtml-menu/#findComment-726793 Share on other sites More sharing options...
dropfaith Posted December 31, 2008 Share Posted December 31, 2008 ignore my table post below works i tweaked some things but not too much the only real difference is the div.menus div i created which flaots it to the left cuase them to be on the same line you can ignore of remove the container div but i like using them as it gives me a bit more control over everything meh i had free time so uhm heres a working code <html><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Sliding Menu</title> <style type="text/css"> div.menus{ float:left; width:218px; } .dhtmlgoodies_question{ color:#FFF; font-size:0.9em; background:red; width:218px; margin-top:2px; background-repeat:no-repeat; background-position:top right; height:20px; overflow:hidden; cursor:pointer; } .dhtmlgoodies_answer{ background:red; width:218px; visibility:hidden; height:0px; overflow:hidden; padding:0; margin:0; } .dhtmlgoodies_answer ul { list-style:none; } .dhtmlgoodies_answer_content{ font-size:0.9em; height:70px; } .block { background:red; width:400px; height:80px; float:right; margin-top:0px; } div.contain {width:626px;background:#00f} </style> <script type="text/JavaScript"> var dhtmlgoodies_slideSpeed = 10; // Higher value = faster var dhtmlgoodies_timer = 10; // Lower value = faster var objectIdToSlideDown = false; var dhtmlgoodies_activeId = false; var dhtmlgoodies_slideInProgress = false; function showHideContent(e,inputId) { if(dhtmlgoodies_slideInProgress)return; dhtmlgoodies_slideInProgress = true; if(!inputId)inputId = this.id; inputId = inputId + ''; var numericId = inputId.replace(/[^0-9]/g,''); var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId); objectIdToSlideDown = false; if(!answerDiv.style.display || answerDiv.style.display=='none'){ if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){ objectIdToSlideDown = numericId; slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1)); }else{ answerDiv.style.display='block'; answerDiv.style.visibility = 'visible'; slideContent(numericId,dhtmlgoodies_slideSpeed); } }else{ slideContent(numericId,(dhtmlgoodies_slideSpeed*-1)); dhtmlgoodies_activeId = false; } } function slideContent(inputId,direction) { var obj =document.getElementById('dhtmlgoodies_a' + inputId); var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId); height = obj.clientHeight; if(height==0)height = obj.offsetHeight; height = height + direction; rerunFunction = true; if(height>contentObj.offsetHeight){ height = contentObj.offsetHeight; rerunFunction = false; } if(height<=1){ height = 1; rerunFunction = false; } obj.style.height = height + 'px'; var topPos = height - contentObj.offsetHeight; if(topPos>0)topPos=0; contentObj.style.top = topPos + 'px'; if(rerunFunction){ setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer); }else{ if(height<=1){ obj.style.display='none'; if(objectIdToSlideDown && objectIdToSlideDown!=inputId){ document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block'; document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible'; slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed); }else{ dhtmlgoodies_slideInProgress = false; } }else{ dhtmlgoodies_activeId = inputId; dhtmlgoodies_slideInProgress = false; } } } function initShowHideDivs() { var divs = document.getElementsByTagName('DIV'); var divCounter = 1; for(var no=0;no<divs.length;no++){ if(divs[no].className=='dhtmlgoodies_question'){ divs[no].onclick = showHideContent; divs[no].id = 'dhtmlgoodies_q'+divCounter; var answer = divs[no].nextSibling; while(answer && answer.tagName!='DIV'){ answer = answer.nextSibling; } answer.id = 'dhtmlgoodies_a'+divCounter; contentDiv = answer.getElementsByTagName('DIV')[0]; contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; contentDiv.className='dhtmlgoodies_answer_content'; contentDiv.id = 'dhtmlgoodies_ac' + divCounter; answer.style.display='none'; answer.style.height='1px'; divCounter++; } } } window.onload = initShowHideDivs; </script> </head><body> <div class="contain"> <div class="menus"> <div id="dhtmlgoodies_q1" class="dhtmlgoodies_question"> <div style="margin: 2px;"><strong>Lumbridge.Net</strong> </div> </div> <div style="display: block; height: 70px; visibility: visible;" id="dhtmlgoodies_a1" class="dhtmlgoodies_answer"> <div id="dhtmlgoodies_ac1" class="dhtmlgoodies_answer_content" style="top: 0px;"> <ul> <li><a href="http://www.team-recoil.com/testing/forums/">Forums</a></li> </ul> </div> </div> <div id="dhtmlgoodies_q2" class="dhtmlgoodies_question"> <div style="margin: 2px;"><strong>Calcs</strong> </div> </div> <div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a2" class="dhtmlgoodies_answer"> <div id="dhtmlgoodies_ac2" class="dhtmlgoodies_answer_content" style="top: -69px;"> <ul> <li><a href="">Skill Calculators</a></li> <li><a href="">Mini Games</a></li> </ul> </div> </div> <div id="dhtmlgoodies_q3" class="dhtmlgoodies_question"> <div style="margin: 2px;"><strong>Guides</strong> </div> </div> <div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a3" class="dhtmlgoodies_answer"> <div id="dhtmlgoodies_ac3" class="dhtmlgoodies_answer_content" style="top: -69px;"> <ul> <li><a href="http://www.team-recoil.com/testing/guides/skills/">Skill Guides</a></li> <li><a href="http://www.team-recoil.com/testing/guides/mini-games/">Quest Guides</a></li> </ul> </div> </div> </div> <div class="block"> Hi #PHP. </div> </div> </body></html> Quote Link to comment https://forums.phpfreaks.com/topic/138557-dhtml-menu/#findComment-726799 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.