fr@gma: HTML Tabindex Fokus im Internet Explorer

Beitrag lesen

SELF-Forum

HTML Tabindex Fokus im Internet Explorer

fr@gma
– Informationen zu den Bewertungsregeln

Hallo, vielen Dank für Eure Antworten. Habe hier nochmal ein Beispiel erstellt:

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
	ul {
		display: table;
	}
	ul li {
		position: relative;
		display: table-cell;
		width: 100px;
		height: 30px;
		border: 1px solid #CCC;
		outline: none;
	}
	ul li ul {
		display: none;
		height: 100px;
		background-color:#CCC;
	}
	ul li ul li {
		display: block;
	}
	ul li:focus ul, ul li div:focus + ul, ul li ul:hover {
		display: block;
		position: absolute;
		top: 30px;
		left: 0;
	}
	a, div {
		display: block;
		width: 100%;
		height: 100%;
	}
</style>
</head>

<body>
    <ul>
      <li><a href="test01.html">blah</a></li>
      <li tabindex="0">
            <div>blah</div>
            <ul>
                <li><a href="test02.html">blahblah</a></li>
                <li><a href="test03.html">blahblah</a></li>
            </ul>
        </li>
      <li><a href="test04.html">blah</a></li>
    </ul>
</body>
</html>

Tabindex="0" ist wirklich besser.

Habe jetzt nochmal etwas herumprobiert. Erreichen möchte ich ein Untermenü, dass bei Klick (auch ohne Script) sichtbar wird. Funktioniert auch alles wunderbar, außer wie gesagt im InternetExplorer. Der IE setzt den Fokus offenbar auf das Element, welches tatsächlich geklickt wurde (im Beispiel das DIV), deshalb funktioniert das Beispiel nur durch:

ul li div:focus + ul

Leider nutzt mir das herzlich wenig, da ich im DIV-Element noch ein Kindelement verwende. Von diesem Element aus kann ich die verschachtelte Liste aber ja nicht mehr ansprechen. Ich werde es aber trotzdem so verwenden + Javascript für eine komfortablere Nutzung (wollte eben nur, dass die Navigation auch ohne JS nutzbar bleibt).

Beitrag melden
–
Informationen zu den Bewertungsregeln