login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Dropdown Menu

Offline BladiN - 19/08/2005 16:46 (laatste wijziging 19/08/2005 19:08)
Avatar van BladiNGouden medailleGouden medaille

Grafische gevorderde		 Ik heb een dropdown menu gecreëerd dat in FF en Opera perfect werkt, maar in IE doet hij raar. Het pijltje knippert bij mouseover/mouseout. Bekijk het maar eens in beide FF en IE en je ziet het verschil wel. http://www.bladin.nl/AYC-E-Cards/

Ps. let niet op de rotzooi, ik heb het niet geordend.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. // JavaScript Document
  2.  
  3. startList = function() {
  4. if (document.all&&document.getElementById) {
  5. navRoot = document.getElementById("nav");
  6. for (i=0; i<navRoot.childNodes.length; i++) {
  7. node = navRoot.childNodes[i];
  8. if (node.nodeName=="LI") {
  9. node.onmouseover=function() {
  10. this.className+=" over";
  11.   }
  12.   node.onmouseout=function() {
  13.   this.className=this.className.replace(" over", "");
  14.    }
  15.    }
  16.   }
  17.  }
  18. }
  19. window.onload=startList;


php code - Bekijk de code zonder highlighting - Klap code in 
  1. * {
  2.   font-family: verdana;
  3.   color #000;
  4.   font-size: 11px;
  5. }
  6.  
  7. .dropdown_button {
  8.   position: absolute;
  9.   top: 1px;
  10.   right: 0px;
  11.   background-image: url("gfx/dropdown_button.gif");
  12.   background-repeat: no-repeat;
  13.   border-right: 1px solid #f2d6d9;
  14.   border-left: 1px solid #f2d6d9;
  15.   width: 20px;
  16.   height: 18px;
  17.   cursor: pointer; /* IE Fix */
  18. }
  19.  
  20. /* Blaat */
  21. ul {
  22.         margin: 0;
  23.         padding: 0;
  24.         list-style: none;
  25.   width: 145px;
  26.         }
  27.  
  28. ul li {
  29.         position: relative;
  30.         }
  31.  
  32. li ul {
  33.         position: absolute;
  34.         left: 0px; /* Set 1px less than menu width */
  35.         top: 21px;
  36.         display: none;
  37.         width: 137px;
  38.         background-color: #fefdfd;
  39.         border: 1px solid #f2d6d9;
  40.         padding: 3px;
  41.         }
  42.  
  43. /* Styles for Menu Items */
  44. ul li a.parent {
  45.         display: block;
  46.         text-decoration: none;
  47.         color: #000;
  48.   background-image: url("gfx/dropdown_back.gif");
  49.   background-repeat: repeat-x;
  50.   border: 1px solid #f2d6d9;
  51.   height: 14px;
  52.   padding: 2px;
  53.         }
  54.  
  55. ul li a.child {
  56.         display: block;
  57.         text-decoration: none;
  58.         color: #000;
  59.   background-color: #fefdfd;
  60.   border: 1px solid #fefdfd;
  61.   padding: 3px;
  62.         }
  63.  
  64. /* Fix IE. Hide from IE Mac \*/
  65. * html ul li { float: left; height: 1%; }
  66. * html ul li a { height: 1%; }
  67. /* End */
  68.  
  69. ul li a.child:hover {
  70.   color: #a7272f;
  71.   background-color: #fcf6f7;
  72.   border: 1px solid #c9545f;
  73. } /* Hover Styles */
  74.  
  75.  
  76. li:hover ul, li.over ul { display: block; } /* The magic */


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4.   <title>AYCE Cards</title>
  5.   <link rel="stylesheet" href="style.css" type="text/css" />
  6.   <script type="text/javascript" src="javascript.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <ul id="nav">
  11.   <li><a class="parent" href="#">Services<div class="dropdown_button"></div></a>
  12.     <ul>
  13.       <li><a class="child" href="#">Web Design</a></li>
  14.       <li><a class="child" href="#">Internet Marketing</a></li>
  15.       <li><a class="child" href="#">Hosting</a></li>
  16.       <li><a class="child" href="#">Domain Names</a></li>
  17.       <li><a class="child" href="#">Broadband</a></li>
  18.     </ul>
  19.   </li>
  20. </ul>
  21.  
  22. </body>
  23.  
  24. </html>

8 antwoorden

Gesponsorde links
Offline Frederic - 20/08/2005 13:49
Avatar van Frederic PHP ver gevorderde Bij mij werkt het goed in IE? 
Offline dreamworld - 20/08/2005 15:56
Avatar van dreamworld HTML beginner Hier doet ie het in IE ook, alleen is er een (klein) layout verschil vergeleken met FF..
Offline BladiN - 20/08/2005 20:59
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Ja 1 px breder, maar heel vaag dat hij hier wel knippert. Even een vraag, an het er aan liggen dat ik geen SP heb geinstalleerd?
Offline dreamworld - 20/08/2005 21:04
Avatar van dreamworld HTML beginner dat moet naar mijn weten niks uit maken.. 
Offline BladiN - 22/08/2005 00:29
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Vaag dan, de enige mensen waarbij hij flikkert is bij mij en mijn collega. heel vaag.
Offline TFOL - 22/08/2005 00:35 (laatste wijziging 22/08/2005 00:35)
Avatar van TFOL PHP beginner ik zie geen verschil bij FF en IE
Offline Ibrahim - 22/08/2005 00:48
Avatar van Ibrahim PHP expert bij mij werkt ie niet in IE want ik kan niets selecteren maar in FF werkt ie prima
Offline Ultimatum - 22/08/2005 05:13
Avatar van Ultimatum PHP expert hoebedoel je nix selecteren, maar hier werkt hij ook perfect in IE 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.201s