login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > Overige > CSS > Mooi pop-up menu!

Mooi pop-up menu!

Auteur: Insane - 30 september 2004 - 17:59 - Gekeurd door: Dennisvb - Hits: 5240 - Aantal punten: 4.00 (1 stem)





Gewoon knippen en plakken...aanpassen is mogelijk!

Code:
Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!-- hier kun je het uitzicht van de popups wijzigen -->
  2. <style>
  3. .popup{
  4. position:absolute;
  5. width:100px;
  6. background-color:yellow;
  7. border:2px solid brown;
  8. font:normal 12px Arial;
  9. line-height:18px;
  10. z-index:10;
  11. visibility:hidden;
  12. }
  13.  
  14. .popup a{
  15. text-decoration:none;
  16. color:brown;
  17. font-weight:bold;
  18. padding-left:5px;
  19. padding-right:5px;
  20. }
  21.  
  22. #muisover{
  23. background-color:gold;
  24. }
  25.  
  26. #muisover a{
  27. color:red;
  28. }
  29. </style>
  30.  
  31. <script language="JavaScript1.2">
  32. // hier maak je de menu-items aan
  33. var menu=new Array()
  34.  
  35. menu[0]='<div class="popitem"><a href="#">Subitem 1.1</a></div>'
  36. menu[0]+='<div class="popitem"><a href="#">Subitem 1.2</a></div>'
  37. menu[0]+='<div class="popitem"><a href="#">Subitem 1.3</a></div>'
  38.  
  39. menu[1]='<div class="popitem"><a href="#">Subitem 2.1</a></div>'
  40. menu[1]+='<div class="popitem"><a href="#">Subitem 2.2</a></div>'
  41. menu[1]+='<div class="popitem"><a href="#">Subitem 2.3</a></div>'
  42.  
  43. menu[2]='<div class="popitem"><a href="#">Subitem 3.1</a></div>'
  44. menu[2]+='<div class="popitem"><a href="#">Subitem 3.2</a></div>'
  45. menu[2]+='<div class="popitem"><a href="#">Subitem 3.3</a></div>'
  46.  
  47. menu[3]='<div class="popitem"><a href="#">Subitem 4.1</a></div>'
  48. menu[3]+='<div class="popitem"><a href="#">Subitem 4.2</a></div>'
  49. menu[3]+='<div class="popitem"><a href="#">Subitem 4.3</a></div>'
  50.  
  51. menu[4]='<div class="popitem"><a href="#">Subitem 5.1</a></div>'
  52. menu[4]+='<div class="popitem"><a href="#">Subitem 5.2</a></div>'
  53. menu[4]+='<div class="popitem"><a href="#">Subitem 5.3</a></div>'
  54.  
  55. // hieronder niets wijzigen
  56.  
  57. var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
  58. var ns6=document.getElementById&&!document.all
  59. var ns4=document.layers
  60. function toonmenu(e,nr){
  61. if (!document.all&&!document.getElementById&&!document.layers)
  62. return reset()
  63. menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
  64. menuobj.stijl=(ie4||ns6)? menuobj.style : menuobj
  65. if (ie4||ns6)
  66. menuobj.innerHTML=nr
  67. else{
  68. menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="reset()" onmouseout="hidemenu()">'+nr+'</layer>')
  69. menuobj.document.close()
  70. }
  71. menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
  72. menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
  73. eventX=ie4? event.clientX : ns6? e.clientX : e.x
  74. eventY=ie4? event.clientY : ns6? e.clientY : e.y
  75. var rechts=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
  76. var onder=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
  77. if (rechts<menuobj.contentwidth)
  78. menuobj.stijl.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
  79. else menuobj.stijl.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX
  80. if (onder<menuobj.contentheight)
  81. menuobj.stijl.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
  82. else menuobj.stijl.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
  83. menuobj.stijl.visibility="visible"
  84. return false}
  85. function contains_ns6(a, b) {
  86. while (b.parentNode)
  87. if ((b = b.parentNode) == a)
  88. return true;
  89. return false;}
  90. function hidemenu(){
  91. if (window.menuobj)
  92. menuobj.stijl.visibility=(ie4||ns6)? "hidden" : "hide"}
  93. function stop(e){
  94. if (ie4&&!menuobj.contains(e.toElement))
  95. hidemenu()
  96. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  97. hidemenu()}
  98. function verbergmenu(){
  99. if (ie4||ns6||ns4)
  100. delayhide=setTimeout("hidemenu()",500)}
  101. function reset(){
  102. if (window.delayhide)
  103. clearTimeout(delayhide)}
  104. function hilite(e,state){
  105. if (document.all)
  106. source_el=event.srcElement
  107. else if (document.getElementById)
  108. source_el=e.target
  109. if (source_el.className=="popitem"){
  110. source_el.id=(state=="aan")? "muisover" : ""}
  111. else{
  112. while(source_el.id!="popmenu"){
  113. source_el=document.getElementById? source_el.parentNode : source_el.parentElement
  114. if (source_el.className=="popitem"){
  115. source_el.id=(state=="aan")? "muisover" : ""}}}}
  116. if (ie4||ns6)
  117. document.onclick=hidemenu
  118. </script>


Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina :
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="popmenu" class="popup" onMouseover="reset();hilite(event,'aan')" onMouseout="hilite(event,'uit');stop(event)">
  2. </div>
  3. <center>
  4. <a href="#" onMouseover="toonmenu(event,menu[0])" onMouseout="verbergmenu()">Hoofditem 1</a>     
  5. <a href="#" onMouseover="toonmenu(event,menu[1])" onMouseout="verbergmenu()">Hoofditem 2</a>     
  6. <a href="#" onMouseover="toonmenu(event,menu[2])" onMouseout="verbergmenu()">Hoofditem 3</a>     
  7. <a href="#" onMouseover="toonmenu(event,menu[3])" onMouseout="verbergmenu()">Hoofditem 4</a>     
  8. <a href="#" onMouseover="toonmenu(event,menu[4])" onMouseout="verbergmenu()">Hoofditem 5</a>     
  9. </center>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (1)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.037s