✔ Horizontales Menü (ohne JS/htc) ?

soyo · 7. Dezember 2006

Aber du weißt genau wie ich das :hover eigentlich unter IE7 nur auf Links anwendbar ist. Auf Stu Nicholls' CSS-Menüs wird das einfach mit einer htc umgangen und das ist eigentlich auch nix anderes als JavaScript, jedenfalls verhällt sich es ähnlich, Nämlich wenn ich JavaScript deaktiviere funktioniert es nicht mehr.

hela · 7. Dezember 2006

michaelsinterface hat gesagt.:
Der IE7 unterstützt im Gegensatz zu seinen Vorgängerversionen die :hover-Pseudoklasse für alle HTML-Elemente, also z.B. li:hover, um so die Submenüs einzublenden.

Hallo soyo,
du irrst dich. Probier es am besten mal aus: Eric Meyers CSS2-Test-Suite.

Maik · 7. Dezember 2006

Das wäre mir neu, dass Stu Nicholls *.htc-Dateien, sprich Javascript, in seinen CSS-Menüs einsetzt.

Kannst du mir mal bitte das Menü verlinken, in dem das der Fall ist?

Warper · 7. Dezember 2006

Ich habe ein "horizontales" Menü im Einsatz (für mich heißt das, die Hauptpunkte sind horizontal angeordnet und die Flyouts vertikal

) auf Basis eines Tutorials von "A List Apart" (http://www.alistapart.com/articles/horizdropdowns/, das ist vertikal, richtig - hab aber daraus ein horizontales gemacht). Leider nutzt dieses JS, um genau das Problem li:hover im IE zu umgehen. Eigentlich bin ich kein Freund von JS. Deshalb wundert es mich umso mehr, auf einmal ein Menü gefunden zu haben was auch ohne funktioniert. Nicht das ich die Tables hübsch finde, aber es wäre eben ein besseres Workaround als der Einsatz von JS, oder?

Also - wie ist eure Einschätzung? Ist die Wahl meines Menüs vertretbar, oder sollte ich schon auf die non-JS Version (http://www.cssplay.co.uk/menus/final_drop.html) switchen?

Sei es drum, ich habe bei meiner aktuellen Wahl noch das Problem, das immer das unterste <li>Link</li> eines Submenüs im Opera (9) als unklickbare Leiche vorhanden bleibt.

HTML:

HTML:

<ul id="nav">
<li><a href="http://beta.autohochzwei.de/">startseite<span class="hoch">&sup2;</span></a>
</li>

<li><a href="http://beta.autohochzwei.de/inhalt.php">inhalt<span class="hoch">&sup2;</span></a>
	<ul>
		<li><a href="http://beta.autohochzwei.de/inhalt.php">&Uuml;bersicht</a></li>
		<li><a href="#">&nbsp;</a></li>
		<li><a href="http://beta.autohochzwei.de/inhalt.php?kategorie_id=1">Historisches</a></li>
		<li><a href="http://beta.autohochzwei.de/inhalt.php?kategorie_id=2">Technikbeitr&auml;ge</a></li>

		<li><a href="http://beta.autohochzwei.de/inhalt.php?kategorie_id=3">Portraits</a></li>
		<li><a href="#">&nbsp;</a></li>
		<li><a href="http://beta.autohochzwei.de/glossar.php">Glossar</a></li>
	</ul>
</li>
<li><a href="#">media<span class="hoch">&sup2;</span></a>
</li>

<li><a href="http://beta.autohochzwei.de/diskussion/">diskussion<span class="hoch">&sup2;</span></a>
    <ul>
        <li><a href="http://beta.autohochzwei.de/diskussion/">&Uuml;bersicht</a></li>
        <li><a href="#">&nbsp;</a></li>
        <li><a href="http://beta.autohochzwei.de/diskussion/index.php?board=1.0">Diskussionsrunde</a></li>
        <li><a href="http://beta.autohochzwei.de/diskussion/index.php?board=2.0">Vorschläge</a></li>
        <li><a href="http://beta.autohochzwei.de/diskussion/index.php?board=3.0">Off topic</a></li>

    </ul>
</li>
<li><a href="http://beta.autohochzwei.de/kontaktformular.php">kontakt<span class="hoch">&sup2;</span></a>
	<ul>
		<li><a href="http://beta.autohochzwei.de/kontaktformular.php">Kontaktformular</a></li>
		<li><a href="http://beta.autohochzwei.de/impressum.php">Impressum</a></li>
		<li><a href="#">&Uuml;ber uns</a></li>

	</ul>
</li>
</ul>

CSS:

Code:

#menu {
	position: relative;
	top: 0px;
	left: 0px;
	background-color: #DCDCDC;
	height: 20px;
	}

#menu .ecke_links {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 10px;
	height: 20px;
	background: #DCDCDC url("../gfx/menu/rundung_links.jpg") no-repeat;
	}

#menu .ecke_rechts {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 10px;
	height: 20px;
	background: #DCDCDC url("../gfx/menu/rundung_rechts.jpg") no-repeat;
	}

#menu ul {
	position: absolute;
	top: 0px;
	left: 30px;
	list-style: none;
	padding: 0;
	margin: 0;
	}

#menu ul li {
	position: relative;
	display: block;
	float: left;
	width: 142px;
	height: 18px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	background-color: #ECECEC;
	border: 1px solid #DCDCDC;
	}

#menu ul li a {
	display: block;
	color: #414141;
	text-decoration: none;
	padding-left: 10px;
	height: 100%;
	}
#menu ul li a:hover {
    background-color: #FFF;
	}

#menu ul li ul {
	position: absolute;
	left: -2px;
	width: 145px;
	top: 19px;
	display: none;
	}

#menu ul li ul li {
	border-top: none;
	font-size: 13px;
	line-height: 18px;
	border-left: 2px solid #DCDCDC;
	border-right: 2px solid #DCDCDC;
	background-color: #FFFFFF;
	font-weight: normal;
	}
#menu ul li ul li a:hover {
	background-color: #ECECEC;
	}

#menu ul li:hover ul, #menu li.over ul {
	display: block;
	} /* The magic */

JS:

Code:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Grüße,
Steffen

Maik · 7. Dezember 2006

Da scheint wohl grundsätzlich etwas nicht zu stimmen, denn a) lautet die ID für das Listenmenü im Script und HTML-Code "nav", im Stylesheet beginnen die ID-Selektoren aber alle mit #menu, und b) werden die Haupt- und Untermenüpunkte in den Browsern total verschoben dargestellt - unabhängig davon, wenn der diskrepante ID-Name korrigiert wird.

soyo · 7. Dezember 2006

Schon allein in dem Menu (Another flyout menu with THREE sub levels) lässt sich folgende CSS-Klasse finden

HTML:

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
  visibility:visible;
  height:235px;
}

Ich hab mir jetzt nicht alles angeschaut, aber er muss doch ne htc genutzt haben, wie funktioniert sonst das li:hover (Browser < IE7)?

Maik · 7. Dezember 2006

Code:

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
  visibility:visible;
  height:235px;
}

... ist für den IE <7

Und nochmal, in Stu Nicholls' CSS-Menüs sind keine "htc"-Workarounds enthalten!

Wenn du es mir noch immer nicht glaubst, dann erkundige dich bitte direkt beim Autor -> Contact Page

soyo · 7. Dezember 2006

Nagut ... überzeugt, aber wozu dann noch das li:hover?

Maik · 7. Dezember 2006

li:hover wird für alle modernen Browser verwendet, da sie es unterstützen, und lediglich für den IE <7 Workarounds eingesetzt.

soyo · 7. Dezember 2006

Okay ... hab das Prinzip jetzt auch soweit verstanden, aber noch 2 kurze Fragen:

1. Gibt es eine Seite, englisch oder deutsch egal, dir mir den Codeschnipsel erklärt. Also es muss nicht genau dieser Code sein, aber für mich ist noch nicht verständlich in welcher Reihenfolge ich Elemte und Pseudoklassen schreiben sollte, um eine Eigenschaft einer bestimmten Klasse zu verändern.

HTML:

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}

2. Wie testet ihr eure Internetseiten? Habt ihr die gängigsten Browser installiert(Spätestens bei dem IE dürfte man da auf Probleme stoßen) oder gibt es da ein brauchbares Tool, so eine Art Emulator. Goggle hatt jedenfalls nix brauchbares ausgespuckt.

euer immer fragender soyo

✔ Horizontales Menü (ohne JS/htc) ?

soyo

Erfahrenes Mitglied

hela

Maik

Warper

Erfahrenes Mitglied

Maik

soyo

Erfahrenes Mitglied

Maik

soyo

Erfahrenes Mitglied

Maik

soyo

Erfahrenes Mitglied

Neue Beiträge