login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Menu werkt niet in IE6 (Opgelost)

Offline tbel - 12/02/2009 11:21
Avatar van tbelNieuw lid Beste...,

Ik ben waarschijnlijk de zoveelste die deze vraag gaat stellen, maar ik kom er niet uit ondanks dat ik veel heb gezocht op dit onderwerp.

Wanneer ik mijn website in IE7 bekijk, werkt het rollover menu prima.
Als ik het in IE6 bekijk verschuift het menu en de menu-items staan niet meer naast elkaar. Zie hier de link.

Nu lees ik veel over hover.htc, maar daar kom ik niet uit.
Kan iemand me vertellen hoe ik het kan oplossen?

PHP:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css"/>
  7.  
  8. <!--[if lte IE 7]>
  9. <style type="text/css">
  10. html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
  11. </style>
  12. <![endif]-->
  13.  
  14. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  15. <script type="text/javascript" src="jqueryslidemenu.js"></script>
  16.  
  17. </head>
  18.  
  19. <body>
  20. <div id="myslidemenu" class="jqueryslidemenu">
  21. <ul>
  22. <li><a href="index.php" class="jqueryslidemenu">home</a></li>
  23. <li><a href="werk.php" class="jqueryslidemenu">werk</a></li>
  24. <li><a href="activity.php" class="jqueryslidemenu">activity</a>
  25.   <ul>
  26.   <li><a href="#">sub item</a></li>
  27.   <li><a href="#">sub item</a></li>
  28.   <li><a href="#">sub item</a></li>
  29.   <li><a href="#">sub item</a></li>
  30.   </ul>
  31. <li><a href="organisatie.php" class="jqueryslidemenu">organisatie</a>
  32.   <ul>
  33.   <li><a href="structuur.php">structuur</a></li>
  34.   <li><a href="directie.php">directie</a></li>
  35.   <li><a href="partners.php">partners</a></li>
  36.   </ul>
  37. </li>
  38.   <li><a href="klanten.php" class="jqueryslidemenu">klanten</a></li>
  39.   <li><a href="contact.php" class="jqueryslidemenu">contact</a></li>
  40.   <li><a href="route.php" class="jqueryslidemenu">route</a>
  41.   <ul>
  42.   <li><a href="plattegrond.php">plattegrond</a></li>
  43.   <li><a href="tomtom.php">tomtomadres</a></li>
  44.   </ul>
  45.   </li>
  46. </li>
  47. </ul>
  48. <br style="clear: left" />
  49. </div>
  50.  
  51. </body>
  52. </html>


CSS:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .jqueryslidemenu{
  2. font: bold 13px Arial;
  3. background: #ffffff;
  4. width: 70%;
  5. }
  6.  
  7. .jqueryslidemenu ul{
  8. margin: 0;
  9. padding: 2px 10px;
  10. list-style-type: none;
  11. }
  12.  
  13. /*Top level list items*/
  14. .jqueryslidemenu ul li{
  15. position: relative;
  16. display: block;
  17. float: left;
  18. }
  19.  
  20. /*Top level menu link items style*/
  21. .jqueryslidemenu ul li a{
  22. display: block;
  23. background: #ffffff; /*background of tabs (default state)*/
  24. color: #2d2b2b;
  25. padding: 2px 10px;
  26. color: #2d2b2b;
  27. text-decoration: none;
  28.  
  29. }
  30.  
  31. * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
  32. display: block;
  33. }
  34.  
  35. .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
  36. color: #000000;
  37. }
  38.  
  39. .jqueryslidemenu ul li a:hover{
  40. background: #ffffff; /*tab link background during hover state*/
  41. color: #999999;
  42.  
  43. }
  44.  
  45. /*1st sub level menu*/
  46. .jqueryslidemenu ul li ul{
  47. 	position: absolute;
  48. 	left: 0;
  49. 	display: block;
  50. 	visibility: hidden;
  51. }
  52.  
  53. /*Sub level menu list items (undo style from Top level List Items)*/
  54. .jqueryslidemenu ul li ul li{
  55. display: block;
  56. float: none;
  57. }
  58.  
  59. /*All subsequent sub menu levels vertical offset after 1st level sub menu */
  60. .jqueryslidemenu ul li ul li ul{
  61. top: 0;
  62. }
  63.  
  64. /* Sub level menu links style */
  65. .jqueryslidemenu ul li ul li a{
  66. font: bold 13px Arial;
  67. width: 80px; /*width of sub menus*/
  68. padding: 2px 10px;
  69. margin: 0;
  70. border-top-width: 0;
  71. border-bottom: 1px solid gray;
  72. }
  73.  
  74. .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
  75. background: #eff9ff;
  76. color: black;
  77. }


Javascript:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. /*********************
  2. //* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
  3. //* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
  4. //* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
  5. *********************/
  6.  
  7. //Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
  8. var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
  9.  
  10. var jqueryslidemenu={
  11.  
  12. animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
  13.  
  14. buildmenu:function(menuid, arrowsvar){
  15. 	jQuery(document).ready(function($){
  16. 		var $mainmenu=$("#"+menuid+">ul")
  17. 		var $headers=$mainmenu.find("ul").parent()
  18. 		$headers.each(function(i){
  19. 			var $curobj=$(this)
  20. 			var $subul=$(this).find('ul:eq(0)')
  21. 			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
  22. 			this.istopheader=$curobj.parents("ul").length==1? true : false
  23. 			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
  24.  
  25. 			$curobj.hover(
  26. 				function(e){
  27. 					var $targetul=$(this).children("ul:eq(0)")
  28. 					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
  29. 					var menuleft=this.istopheader? 0 : this._dimensions.w
  30. 					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
  31. 					if ($targetul.queue().length<=1) //if 1 or less queued animations
  32. 						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
  33. 				},
  34. 				function(e){
  35. 					var $targetul=$(this).children("ul:eq(0)")
  36. 					$targetul.slideUp(jqueryslidemenu.animateduration.out)
  37. 				}
  38. 			) //end hover
  39. 		}) //end $headers.each()
  40. 		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
  41. 	}) //end document.ready
  42. }
  43. }
  44.  
  45. //build menu with ID="myslidemenu" on page:
  46. jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

8 antwoorden

Gesponsorde links
Offline mothh - 12/02/2009 15:18 (laatste wijziging 12/02/2009 15:47)
Avatar van mothh Onbekend ik heb nog wel een menu voor je die het als het goed is gewoon doet
hij schuift ook uit alleen de layout moet je zelf nog maken

als je hem wilt pm mij even


edit: dit is de code


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head><title></title>
  4. <style type="text/css" title="style" media="screen, projection">
  5. ul {
  6.   padding: 0;
  7.   margin: 0;
  8.   list-style: none;
  9.   }
  10. li {
  11.   float: left;
  12.   position: relative;
  13.   width: 100px;
  14.   }
  15. li ul {
  16.   display: none;
  17.   position: absolute; 
  18.   top: 1em;
  19.   left: 0;
  20.   }
  21. li > ul {
  22.  top: auto;
  23.  left: auto;
  24.  }
  25. li:hover ul, li.over ul{ display: block; }
  26. </style>
  27. <script type="text/javascript">
  28. function startList() 
  29. {
  30. if (document.all && document.getElementById)
  31. {
  32.  navRoot = document.getElementById("nav");
  33.  for (i=0; i<navRoot.childNodes.length; i++) 
  34.  {
  35.   node = navRoot.childNodes[i];
  36.   if (node.nodeName=="LI") 
  37.   {
  38.    node.onmouseover=function() 
  39.    {
  40.    this.className+=" over";
  41.    }
  42.    node.onmouseout=function() 
  43.    {
  44.     this.className=this.className.replace(" over", "");
  45.    }
  46.   }
  47.  }
  48. }
  49. }
  50. window.onload = startList;
  51. </script>
  52. </head>
  53. <body>
  54. <ul id="nav">
  55.   <li>Menu item 1
  56.     <ul>
  57.       <li><a href="#">menu item 1a</a></li>
  58.       <li><a href="#">menu item 1b</a></li>
  59.       <li><a href="#">menu item 1c</a></li>
  60.       <li><a href="#">menu item 1d</a></li>
  61.   </ul>
  62.  </li>
  63.   <li>Menu item 2
  64.     <ul>
  65.       <li><a href="#">menu item 2a</a></li>
  66.       <li><a href="#">menu item 2b</a></li>
  67.       <li><a href="#">menu item 2c</a></li>
  68.     </ul>
  69.   </li>
  70.   <li>Menu item 3
  71.     <ul>
  72.       <li><a href="#">menu item 3a</a></li>
  73.       <li><a href="#">menu item 3b</a></li>
  74.       <li><a href="#">menu item 3c</a></li>
  75.       <li><a href="#">menu item 3d</a></li>
  76.       <li><a href="#">menu item 3e</a></li>
  77.     </ul>
  78.   </li>
  79. </ul>
  80. </body>
  81. </html>
Offline tbel - 12/02/2009 16:24
Avatar van tbel Nieuw lid Dankjewel.
Het werkt inmiddels goed, zie url.

Het enige probleem is nu dat de ruimte tussen de menu-items niet hetzelfde is, zie organisatie en klanten.

Is dat op te lossen?
Offline mothh - 12/02/2009 16:51
Avatar van mothh Onbekend ja dat is op te lossen door <div> te gebruiken
Offline tbel - 12/02/2009 17:00
Avatar van tbel Nieuw lid Moet je dan alle losse menu items in een div stoppen?
Offline mothh - 13/02/2009 13:52
Avatar van mothh Onbekend gebruik je nu die code die ik je gestuurd heb???
Offline tbel - 13/02/2009 15:12
Avatar van tbel Nieuw lid ja, die gebruik ik.
Offline mothh - 13/02/2009 17:47 (laatste wijziging 13/02/2009 17:49)
Avatar van mothh Onbekend
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="myslidemenu" class="jqueryslidemenu">
  2. <ul>
  3. <li><a href="index.php" class="jqueryslidemenu">home</a>
  4. </li>
  5. <li><a href="werk.php" class="jqueryslidemenu">werk</a>
  6. </li>
  7.  
  8. <li><a href="activity.php" class="jqueryslidemenu">activity</a>
  9.   <ul style="top: 16px; display: none; visibility: visible; left: 0px; width: 80px;">
  10.   <li><a href="#">sub item</a></li>
  11.  
  12.   <li><a href="#">sub item</a></li>
  13.   <li><a href="#">sub item</a></li>
  14.   <li><a href="#">sub item</a></li>
  15.   </ul>
  16. </li>
  17.  
  18. <li><a href="organisatie.php" class="jqueryslidemenu">organisatie</a>
  19.   <ul style="top: 16px; display: none; visibility: visible; left: 0px; width: 80px;">
  20.  
  21.   <li><a href="structuur.php">structuur</a></li>
  22.   <li><a href="directie.php">directie</a></li>
  23.   <li><a href="partners.php">partners</a></li>
  24.   </ul>
  25. </li>
  26.  
  27. <li><a href="klanten.php" class="jqueryslidemenu">klanten</a>
  28. </li>
  29. <li><a href="contact.php" class="jqueryslidemenu">contact</a>
  30.  
  31. </li>
  32.  
  33. <li><a href="route.php" class="jqueryslidemenu">route</a>
  34.   <ul style="top: 16px; display: none; visibility: visible;">
  35.   <li><a href="plattegrond.php">plattegrond</a></li>
  36.   <li><a href="tomtom.php">tomtomadres</a></li>
  37.   </ul>
  38. </li>
  39. </ul>
  40. <br style="clear: left;">
  41.  
  42. </div>



<ul style="top: 16px; display: none; visibility: visible;">
waarom heb je dat er staan als je dat daar doet moet je het overal doen:)
Offline tbel - 16/02/2009 09:47
Avatar van tbel Nieuw lid Hoi mothh,

Het is me nu gelukt! Echt onwijs bedankt!

Groeten
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.235s