login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Drop Down menu verkeerde positie

Offline sicco - 19/02/2005 14:57 (laatste wijziging 19/02/2005 18:24)
Avatar van siccoLid Hey mensen,
Ik wil dat mijn drop down menu onder een plaatje komt te staan maar dat lukt mij niet.
Ipv dat hij eronder komt, omt het menu op de plaats waar ik mijn muis plaats.
Weet iemand hoe dit komt??

  1. <style>
  2. <!--
  3.  
  4. .menuskin{
  5. position:absolute;
  6. width:140px;
  7. background-color:#5c5c5c;
  8.  
  9. font:normal 12px Arial;
  10. line-height:18px;
  11. z-index:100;
  12. visibility:hidden;
  13. }
  14.  
  15. .menuskin a{
  16.  
  17. text-decoration:none;
  18. color:#FFFFFF;
  19. padding-left:10px;
  20. padding-right:10px;
  21. }
  22.  
  23. #mouseoverstyle{
  24. background-color:#404040;
  25. highlight;#00FF00;
  26.  
  27. }
  28.  
  29. #mouseoverstyle a{
  30. color:#FF6600;
  31. }
  32. -->
  33. </style>
  34. <script language="JavaScript1.2">
  35.  
  36.  
  37.  
  38. var linkset=new Array()
  39.  
  40.  
  41. linkset[0]='<div class="menuitems" border="1"><a href="index2.php?feu=nieuws" target=_self">Nieuws</a></div>'
  42. linkset[0]+='<div class="menuitems"><a href="index2.php?feu=contact" target=_self">Nieuws Insturen</a></div>'
  43.  
  44.  
  45. linkset[1]='<div class="menuitems"><a href="index2.php?feu=infostreet" target=_self">Fifa Street</a></div>'
  46. linkset[1]+='<div class="menuitems"><a href="index2.php?feu=infocl" target=_self">Uefa CL 04/05</a></div>'
  47. linkset[1]+='<div class="menuitems"><a href="index2.php?feu=info05" target=_self">Fifa 2005</a></div>'
  48.  
  49.  
  50.  
  51. linkset[2]='<div class="menuitems"><a href="index2.php?feu=forum" target=_self">Forum</a></div>'
  52. linkset[2]+='<div class="menuitems"><a href="index2.php?feu=crew" target=_self">Crew</a></div>'
  53. linkset[2]+='<div class="menuitems"><a href="index2.php?feu=about" target=_self">About</a></div>'
  54. linkset[2]+='<div class="menuitems"><a href="index2.php?feu=jobs" target=_self">Jobs</a></div>'
  55. linkset[2]+='<div class="menuitems"><a href="index2.php?feu=contact" target=_self">Contact</a></div>'
  56. linkset[2]+='<div class="menuitems"><a href="index2.php?feu=plaats" target=_self">Add Message</a></div>'
  57.  
  58.  
  59.  
  60. linkset[3]='<div class="menuitems"><a href="http://www.fifainternational.nl" target=_new">Fifa International</a></div>'
  61. linkset[3]+='<div class="menuitems"><a href="http://www.breamster.com" target=_new">Breamster</a></div>'
  62. linkset[3]+='<div class="menuitems"><a href="http://www.socceraccess.com" target=_new">SoccerAccess</a></div>'
  63. linkset[3]+='<div class="menuitems"><a href="http://www.soccer.gamez.nl" target=_new">Soccergamez</a></div>'
  64.  
  65.  
  66. linkset[4]='<div class="menuitems"><a href="index2.php?feu=cat">Downloads</a></div>'
  67. linkset[4]+='<div class="menuitems"><a href="index2.php?feu=gastenboek">Gastenboek</a></div>'
  68. linkset[4]+='<div class="menuitems"><a href="index2.php?feu=reviews">Reviews</a></div>'
  69. linkset[4]+='<div class="menuitems"><a href="index2.php?feu=previews">Previews</a></div>'
  70. linkset[4]+='<div class="menuitems"><a href="index2.php?feu=gastenboek">Gastenboek</a></div>'
  71. linkset[4]+='<div class="menuitems"><a href="index2.php?feu=interviews">Interviews</a></div>'
  72.  
  73.  
  74. ////No need to edit beyond here
  75.  
  76. var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
  77. var ns6=document.getElementById&&!document.all
  78. var ns4=document.layers
  79.  
  80. function showmenu(e,which){
  81.  
  82. if (!document.all&&!document.getElementById&&!document.layers)
  83. return
  84.  
  85. clearhidemenu()
  86.  
  87. menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
  88. menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
  89.  
  90. if (ie4||ns6)
  91. menuobj.innerHTML=which
  92. else{
  93. menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
  94. menuobj.document.close()
  95. }
  96.  
  97. menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
  98. menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
  99. eventX=ie4? event.clientX : ns6? e.clientX : e.x
  100. eventY=ie4? event.clientY : ns6? e.clientY : e.y
  101.  
  102. //Find out how close the mouse is to the corner of the window
  103. var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
  104. var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
  105.  
  106. //if the horizontal distance isn't enough to accomodate the width of the context menu
  107. if (rightedge<menuobj.contentwidth)
  108. //move the horizontal position of the menu to the left by it's width
  109. menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
  110. else
  111. //position the horizontal position of the menu where the mouse was clicked
  112. menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX
  113.  
  114. //same concept with the vertical position
  115. if (bottomedge<menuobj.contentheight)
  116. menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
  117. else
  118. menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
  119. menuobj.thestyle.visibility="visible"
  120. return false
  121. }
  122.  
  123. function contains_ns6(a, b) {
  124. //Determines if 1 element in contained in another- by Brainjar.com
  125. while (b.parentNode)
  126. if ((b = b.parentNode) == a)
  127. return true;
  128. return false;
  129. }
  130.  
  131. function hidemenu(){
  132. if (window.menuobj)
  133. menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
  134. }
  135.  
  136. function dynamichide(e){
  137. if (ie4&&!menuobj.contains(e.toElement))
  138. hidemenu()
  139. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  140. hidemenu()
  141. }
  142.  
  143. function delayhidemenu(){
  144. if (ie4||ns6||ns4)
  145. delayhide=setTimeout("hidemenu()",500)
  146. }
  147.  
  148. function clearhidemenu(){
  149. if (window.delayhide)
  150. clearTimeout(delayhide)
  151. }
  152.  
  153. function highlightmenu(e,state){
  154. if (document.all)
  155. source_el=event.srcElement
  156. else if (document.getElementById)
  157. source_el=e.target
  158. if (source_el.className=="menuitems"){
  159. source_el.id=(state=="on")? "mouseoverstyle" : ""
  160. }
  161. else{
  162. while(source_el.id!="popmenu"){
  163. source_el=document.getElementById? source_el.parentNode : source_el.parentElement
  164. if (source_el.className=="menuitems"){
  165. source_el.id=(state=="on")? "mouseoverstyle" : ""
  166. }
  167. }
  168. }
  169. }
  170.  
  171. if (ie4||ns6)
  172. document.onclick=hidemenu
  173.  
  174. </script>




  1. <div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
  2. </div> <td onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"><img name="fe_r5_c3" src="stylo/fe_r5_c3.jpg" width="87" height="24" border="0" alt=""></td>
  3. <td onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()"><img name="fe_r5_c4" src="stylo/fe_r5_c4.jpg" width="85" height="24" border="0" alt=""></td>
  4. <td onMouseover="showmenu(event,linkset[2])" onMouseout="delayhidemenu()"><img name="fe_r5_c5" src="stylo/fe_r5_c5.jpg" width="100" height="24" border="0" alt=""></td>
  5. <td onMouseover="showmenu(event,linkset[3])" onMouseout="delayhidemenu()"><img name="fe_r5_c6" src="stylo/fe_r5_c6.jpg" width="87" height="24" border="0" alt=""></td>
  6. <td onMouseover="showmenu(event,linkset[4])" onMouseout="delayhidemenu()"><img name="fe_r5_c7" src="stylo/fe_r5_c7.jpg" width="86" height="24" border="0" alt=""></td>

5 antwoorden

Gesponsorde links
Offline korby - 30/11/1999 00:00
Avatar van korby HTML interesse heb je mss die site waar hij verkeerd staat ook online dan kan ik mss wel zoeke voor je )
Offline Legolas - 30/11/1999 00:00
Avatar van Legolas Onbekend je heb zeker n template gebruikt
Offline Fenrir - 30/11/1999 00:00
Avatar van Fenrir PHP expert Kijk eens naar deze dropdownsrnhttpwww.alistapart.comarticlesdropdownsrnrnDat is veel simpeler.
Offline Legolas - 30/11/1999 00:00
Avatar van Legolas Onbekend Dan leg je de position van de div vast bij het style attribuut
Offline prorsoft - 30/11/1999 00:00 (laatste wijziging 30/11/1999 00:00)
Avatar van prorsoft PHP gevorderde in het css moet je gwoon [b]left[x positie]; top[y positie][b] neerzetten
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.208s