menü klappt mit "active" auf aber nicht mit "focus".
kunert0345
- css
0 Beat0 Malcolm Beck´s
hallo,
problem: css menü klappt mit "active" aber sobald ich das mit "focus" versuche damit es offen bleibt klappt es zussamen.
frage: was kann ich tun damit das menü offen bleibt.
anmerkung: ich versuche gezielt auf javascript zu verzichten und es ist mir egal ob der IE-explorer damit problehme hatt.
<html>
<head>
<!-- USED BUGDETECTION PROGRAMMS: HTML= http://validator.w3.org/ ; CSS= http://jigsaw.w3.org/css-validator/validator.html.en ; JavaScript= http://developer.netscape.com/docs/manuals/jsdebug/index.htm -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="rights" content="MW-PRUDUCTION, Zef">
<meta name="author" content="Zef, CO">
<meta name="description" content="...">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<meta http-equiv="expires" content="0">
<meta name="DC.creator" content="Zef">
<meta name="DC.publisher" content="MW-PRODUCTION">
<meta name="DC.language" content="de">
<meta name="DC.rights" content="MW-PRUDUCTION, Zef">
<link rel="shortcut icon" href="data/1.png">
<title>XD</title>
<style type="text/css">
body {
margin:0; padding:0;
background-color:#000000;
font-family:Courier New; text-transform:uppercase;
}
* {
color:#00FF00;
}
div#aa {
font-weight:bold;
float:left; width:15%;
list-style:none;
}
div#aa a {
display:block;
text-decoration:none;
}
div#aa a:hover {
background-color:#404040;
}
div#aa a:focus {
background-color:#00FF00; color:#000000;
}
div#aa li p {
display:none;
}
div#aa li hr {
display:none;
}
div#aa li:active p {
display:block;
margin:0;
border-bottom:solid;
border-width:thin;
border-color:#000000;
background-color:#001400;
}
div#aa li:active hr {
display:block;
margin:0;
border-style:solid;
}
iframe {
width:83%; height:100%;
border-style:solid; border-width:thick;
border-top:none; border-bottom:none; border-right:none;
}
</style>
</head>
<body>
<div id="aa">
<li><a href="home/index.html" target="iframe">home</a>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<hr>
</li>
<li><a href="video/index.html" target="iframe">video</a>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<hr>
</li>
<li><a href="music/index.html" target="iframe">music</a>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<p><a href="">123</a></p>
<hr>
</li>
<li><a href="forum/index.html" target="iframe">forum</a></li>
<li><a href="chat/index.html" target="iframe">chat</a></li>
<li><a href="download/index.html" target="iframe">download</a>
<p><a href="">123</a></p>
<hr>
</li>
</div>
<iframe src="home/index.html" name="iframe">
<p>IFRAME ERROR</p>
</iframe>
</body>
</html>
problem: css menü klappt mit "active" aber sobald ich das mit "focus" versuche damit es offen bleibt klappt es zussamen.
active ist der Zustand während des Mouseclicks.
Meinst du vielleicht hover?
focus funtioniert nicht bei CSS only, weil der Focus, der anderes sichtbar werden lässt, verloren geht, sobald man mit der Tabtaste auf ein anderes Element fokusiert.
Gerade dazu müsstest du aber onfocus quasi display:block, bzw eine Klasse, die dies beschreibt via JS setzen.
mfg Beat
ok, danke
schade das es nicht alein mit css geht.
ich werde mal sehen wie ich die menü führung anders regeln kann (mache trotzdem einen bogen um JS)
hi,
neben dem von Beat erwähntem;
https://forum.selfhtml.org/?t=181929&m=1203936
mfg