jQuery und IE

[beaT360]

Hallo zusammen,

ich wollte ein Menü mit jQuery und mehreren Ebenen erstellen. Soweit funktioniert es auch in Safari, Chrome und Firefox. Nur IE6 und höher zeigen es nicht an. Wo liegt das Problem dabei? Habe das JavaScript ganz normal eingebunden...

jQuery

 <script type="text/javascript" src="js/jquery.min.js"></script>
  <script  type="text/javascript">
		document.createElement('header');
		document.createElement('article');
		document.createElement('aside');
		document.createElement('video');
		document.createElement('footer');
		
		var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)


  </script>

** Die document.createElement sind dazu dar, um HTML5 auch in IE6 usw. zu nutzen...

HTML

<aside id="nav">
			  <div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Start</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a>
  <ul>
  <li><a href="#">2010</a></li>
  <li><a href="#">2009</a></li>
  </ul>
</li>
<li><a href="#">Galerie</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
<li><a href="#">Resultate</a></li>

<li><a href="#">Karriere</a></li>
<li><a href="#">Sponsoren</a></li>
<li><a href="#">Job</a>
<ul>
  <li><a href="#">Marketing</a></li>
  <li><a href="#">Trainer</a></li>
  </ul>
</li>
</ul>
</div>		</aside>

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Georgia;
width: 120px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-box-border-radius: 5px;
	border-radius: 5px;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: rgba(111, 169,208, 0.75); /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: rgb(111, 169,208);}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 120px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }

Im Anhang habe ich noch zwei Bilder, diese zeigen wie es im Firefox aussieht und im IE.


Vielen Dank für eure Hilfe und einen schönen Tag

BeaT

[beaT360]

Oh kann das mal bitte jemand in "JavaScript" verschieben... Sorry