login  Naam:   Wachtwoord: 
Registreer je!
 Forum

dropdown doet et niet in IE 6 en lager

Offline napalm1432 - 20/04/2008 18:06
Avatar van napalm1432Lid hey heb een dropdown menuutje die et prima doet in FF en IE vanaf versie zeven maar niet in de oudere versies ik weet dat et komt doordat IE 6 geen hover ondersteunt maar hoe kan ik dit oplossen hier de css code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menuh-container
  2. 	{
  3. 	position: absolute;		
  4. 	top: 1em;
  5. 	left: 1em;
  6. 	}
  7.  
  8. #menuh
  9. 	{
  10. 	font-size: small;
  11. 	font-family: arial, helvetica, sans-serif;
  12. 	width:100%;
  13. 	float:left;
  14. 	margin:2em;
  15. 	margin-top: 1em;
  16. 	}
  17.  
  18. #menuh a
  19. 	{
  20. 	text-align: center;
  21. 	display:block;
  22. 	border: 1px solid #555;
  23. 	white-space: nowrap;
  24. 	margin: auto;
  25. 	padding: 0.3em;
  26. 	}
  27.  
  28. #menuh a, #menuh a:visited	
  29. 	{
  30. 	color: white;
  31. 	background-color: #000000;
  32. 	text-decoration:none;
  33. 	}
  34.  
  35. #menuh a:hover	
  36. 	{
  37. 	color: #3e7166;
  38. 	background-color: black;
  39. 	}
  40. 	* html ul li { float: left; }
  41. 	* html ul li a { height: }	
  42.  
  43. #menuh a.top_parent, #menuh a.top_parent:hover  
  44. 	{
  45. 	background-image: url(navdown_white.gif);
  46. 	background-position: right center;
  47. 	background-repeat: no-repeat;
  48. 	}
  49.  
  50. #menuh a.parent, #menuh a.parent:hover 
  51. 	{
  52. 	background-image: url(nav_white.gif);
  53. 	background-position: right center;
  54. 	background-repeat: no-repeat;
  55. 	}
  56.  
  57. #menuh ul
  58. 	{
  59. 	list-style:none;
  60. 	margin:0;
  61. 	padding:0;
  62. 	float:left;
  63. 	width:9em;	
  64. 	}
  65.  
  66. #menuh li
  67. 	{
  68. 	position:relative;
  69.     min-height: 1px; 
  70.     vertical-align: bottom; 
  71. 	margin: 1px;
  72. 	}
  73.  
  74. #menuh ul ul
  75. 	{
  76. 	position:absolute;
  77. 	z-index:500;
  78. 	top:auto;
  79. 	display:none;
  80. 	padding: 1em;
  81. 	margin:-1em 0 0 -1em;
  82. 	}
  83.  
  84. #menuh ul ul ul
  85. 	{
  86. 	top:0;
  87. 	left:100%;
  88. 	}
  89.  
  90. div#menuh li:hover
  91. 	{
  92. 	cursor:pointer;
  93. 	z-index:100;
  94. 	}
  95.  
  96. div#menuh li:hover ul ul,
  97. div#menuh li li:hover ul ul,
  98. div#menuh li li li:hover ul ul,
  99. div#menuh li li li li:hover ul ul
  100. {display:none;}
  101.  
  102. div#menuh li:hover ul,
  103. div#menuh li li:hover ul,
  104. div#menuh li li li:hover ul,
  105. div#menuh li li li li:hover ul
  106. {display:block;}

alvast bedankt,,

5 antwoorden

Gesponsorde links
Offline larssy1 - 21/04/2008 09:25
Avatar van larssy1 MySQL beginner Uhm.. als Ie het niet ondersteunt, denk ik niet dat het nut heeft om het te maken,,wat ik ook niet begrijp, waarom maak je een site dat gebasseerd is op IE6..datword al niet meer gebruikt tegenwoordig.
Offline Kr4nKz1n - 21/04/2008 09:27
Avatar van Kr4nKz1n Onbekend Niet?

Ik ken genoeg mensen die nog IE6 gebruiken.

Ik weet niet voor welke doelgroep de site bestemd is maar...
Offline larssy1 - 21/04/2008 09:31
Avatar van larssy1 MySQL beginner Ja? Ik dacht dat IE6 al practisch niet meer gebruikt werd 
mijn fout dan 

Maar uhm napalm.. Als IE6 geen hover ondesteunt,,hoe wil je dan uberhoud een dropdown menu maken voor IE6?
Offline Kr4nKz1n - 21/04/2008 09:33
Avatar van Kr4nKz1n Onbekend Scripts hier...
http://www.site...mp;id=1474
Offline friko - 21/04/2008 09:35
Avatar van friko Nieuw lid wat je kan doen is een js gebruiken.
die kun je zelfs als ik het goed heb toevoegen aan je style sheet omdat dat ondersteund wordt door IE


In een bestand hover.htc zet je
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. /* IE behavior, adds .hover to HTML element. (c) 2004, Sjaak Priester */
  2.  
  3. <PUBLIC:COMPONENT lightWeight="true">
  4. <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hover()" />
  5. <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="Unhover()" />
  6. <SCRIPT LANGUAGE="JScript">
  7. function Hover()
  8. {
  9. 	element.className += " hover";
  10. }
  11.  
  12. function Unhover()
  13. {
  14. 	element.className = element.className.replace(/\s*hover/, "");
  15. }
  16. </SCRIPT>
  17. </PUBLIC:COMPONENT>


en in je css zet je dit waar je de hover wilt hebben:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. behavior: url('css/hover.htc');


en als laatste pas je nog je stylesheet aan door naast de pseudoclass :hover ook de class .hover te gebruiken:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #element:hover, #element.hover{
  2.   /* andere style */
  3. }


Zo moet het wel lukken. Trouwens door een beetje google gevonden
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.204s