✔ IE macht Problem

K

Kalito

Erfahrenes Mitglied
hallo

ich bin gerade dabei eine Seite zu bauen und da bin ich über folgendes Problem gestolbert:

Mittels Javascript habe ich ein Menü gebaut, wo sich die Untermenüs bei mouseover aufklappen

Code: 
        <script type="text/javascript">
            <!--
            function montre(id)
            {
            	with (document)
            	{
            		if (getElementById)
            			getElementById(id).style.display = 'block';
            		else if (all)
            			all[id].style.display = 'block';
            		else
            			layers[id].display = 'block';
            	}
            }

            function cache(id)
            {
            	with (document)
            	{
            		if (getElementById)
            			getElementById(id).style.display = 'none';
            		else if (all)
            			all[id].style.display = 'none';
            		else
            			layers[id].display = 'none';
            	}
            }
        </script>
HTML: 
            <div class="menu">
              <ul>
                <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Mein Profil</a>
                  <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
                    <li><a href="">Anzeigen</a></li>
                    <li><a href="">Bearbeiten</a></li>
                    <li><a href="">Foto hochladen</a></li>
                  </ul>
                </li>
                <li><a href="">WIW</a></li>
.
.
.
.
.
</div>

Mein Problem nur ist jetzt, das im IE nichts angezeigt wird. Wenn ich mir aber den Quelltext anzeigen lasse, steht auch alles da, aber der Browser zeigt nichts an. In den anderen Browsern funktioniert alles einwandfrei.

Was kann ich da machen?

Gruß
 
1. Ich hab noch nie jemanden das with-statement nutzen sehen. Und es ist auch kein guter Stil. Vielleicht hat der IE damit Probleme.
2. Es gibt keinen Grund für das If-Statement. document.getElementById wird von jedem relevanten Browser unterstützt.
3. Du brauchst überhaupt kein JavaScript für ein solchen Menü. Lediglich der IE 6 brauch da etwas JS Unterstützung.
4. Du brauchst gar kein getElementById, wenn du einfach im onmouseover und onmouseout Attribut "this" an die Funktion übergibst.

Ich bin am verhungern. Wenn nach dem essen noch niemand geantwortet hat, schreib ich dir Beispielcode.

Edit: Noch was: Schau mal was die Fehlerkonsole im IE dazu sagt.

Edit2: Du beendest den Kommentar nicht wieder vor Ende des Script-Bereiches.
 
Zuletzt bearbeitet:
Hier wie versprochen Code. Ich mache daraus absichtlich einen neuen Post.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Hover Menü</title>
	
	<style type="text/css">
		.submenu {
			display:none;
		}
		
		.menu:hover .submenu {
			display:block;
		}
	</style>
</head>

<body>
	<div id="menu_container">
		<ul>
			<li class="menu">
				<a href="#">Mein Profil</a>
				<ul class="submenu">
					<li><a href="#">Anzeigen</a></li>
					<li><a href="#">Bearbeiten</a></li>
					<li><a href="#">Foto hochladen</a></li>
				</ul>
			</li>
			<li class="menu">
				<a href="#">Foo</a>
				<ul class="submenu">
					<li><a href="#">Bar</a></li>
					<li><a href="#">Baz</a></li>
				</ul>
			</li>
		</ul>
	</div>
	
	<!--[if lte IE 6]>
		<script type="text/javascript">var ie_lt_6=true;</script>
	<![endif]-->
	<script type="text/javascript">
	/* <![CDATA[ */
		if(window.ie_lt_6) {
			var container = document.getElementById('menu_container');
			var items = container.getElementsByTagName('li');
			
			for(var i=0; i<items.length; i++) {
				if(/ menu /.test(' ' + items[0].className + ' ')) {
					items[i].onmouseover = showSub;
					items[i].onmouseout = hideSub;
				}
			}
			
			function showSub() {
				var list = this.getElementsByTagName('ul');
				
				for(var i=0; i<list.length; i++) {
					if(/ submenu /.test(' ' + list[i].className + ' ')) {
						list[i].style.display = 'block';
					}
				}
			}
			
			function hideSub() {
				var list = this.getElementsByTagName('ul');
				
				for(var i=0; i<list.length; i++) {
					if(/ submenu /.test(' ' + list[i].className + ' ')) {
						list[i].style.display = 'none';
					}
				}
			}
		}
	/* ]]> */
	</script>
</body>

</html>

Kurze Erklärung:

Die zwei CSS Regeln am Anfang sind alles, was für moderne Browser nötig ist (ernsthaft)!
Der ganze JavaScript kram ist nur für IE<6 und wird auch nur dort ausgeführt. Im HTML Markup kommt auch kein JavaScript mehr vor, weil die ganzen "onmouseover" etc. das ganze nur auf blähen.

Wenn du dazu Fragen hast, stell sie.
 
Danke vielmals.

Aber eine Frage hab ich noch. Wie schaffe ich es, das die Oberpunkte (in diesem Fall mein Profil und Foo) nebeneinander stehen und wenn ich dann drüber gehe die Unterpinkte als Block nach unten gehen. Will nämlich so ein horizontales Menüfeld aufbauen
 
Dann musst du die Punkte noch mit CSS stylen, exakt so, wie du es mit deiner vorherigen Lösung auch gemacht hättest. Hier mal ein Grundgerüst mit den zwei bereits vorhandenen Regeln.

CSS: 
.submenu {
	display:none;
}

.menu:hover .submenu {
	display:block;
}

.menu {
	display:block;
	padding:0px;
	margin:0px;
	margin-right:2px;
	float:left;
	background:#ccc;
	list-style-type:none;
}

.menu a {
	display:block;
	padding:5px;
}

.submenu {
	position:absolute;
	padding:0px;
	float:left;
	background:#eee;
	list-style-type:none;
	
}


.submenu li {
	position:relative;
	margin:0px;
	margin-bottom:2px;
	
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück