nicht angemeldet
CSS Klappmenü
Hi, ich hab von dieser Seite das Beispiel des CSS basierten Klappmenü übernommen. Leider hab ich folgendes Problem ich möchte einen Unterlink einen weiteren Unterlink zufügen. Dieser sollte dann rechts daneben angezeigt werden, wenn die Maus über den ersten Unterlink fährt wird mir zwar schon der Unterunterlink angezeigt, aber leider noch nicht an der richtigen Position und bei alles Unterlinks der 1. Ebene. Ich hoffe Ihr habt es verstanden was ich bezwecken möchte.
Der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<title>Geteilte Navigationsleisten</title>
<style type="text/css">
body, p a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: #FFFFFF; background-color: #ffffe0;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.52em; left: 0em;
display: none; /* Unternavigation ausblenden */
}
ul#Navigation ul li ul { position: absolute; z-index: 200;
display: block;
border-color: #ccc #888 #555 #bbb; width: 100%; }
ul#Navigation ul li ul li { position: relativ; top: 0; left: 100%; text-align:left;
display: none; border-width: 1px; border-style: solid;
border-color: #ccc #888 #555 #bbb; text-indent: 3px; }
ul#Navigation ul ul ul li:hover ul
{
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation ul ul ul li:hover ul
{
display: none; /* Unternavigation in modernen Browsern einblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 8.0em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.06em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #FFFFFF; background-color: #5E68AF;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #483D8B;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation ul:hover li
{
display: block; /* Unternavigation in modernen Browsern einblenden */
}
</style>
</head>
<body>
<div id="Rahmen"><ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 4</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><a href="#Beispiel">Seite 4b</a><ul >
<li><a href="#Beispiel">Seite 4d</a></li>
<li><a href="#Beispiel">Seite 4e</a></li>
</ul></li>
<li><a href="#Beispiel">Seite 4c</a><ul >
<li><a href="#Beispiel">Seite 4f</a></li>
<li><a href="#Beispiel">Seite 4g</a></li>
</ul></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 5</a></li>
</ul><div></div></div>
</body>
</html>
-
Hat keiner einen Tipp für mich...würde mich echt freuen
-
-
Hi,
Der Code:
besser wäre ein Link auf Deine Seite.
Der Code zeigt jedoch einige Fehler auf sowie, dass Du wohl eher mit try&error an die Sache gehst, als mit ausreichender Sachkenntnis.<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {dieses Script für IEs < 7 muss natürlich auch erweitert werden, wenn Du diese Browser nicht ausschließen willst.
body, p a {
Du weißt, warum hier a mit eingeschmuggelt wurde? ;-)
ul#Navigation ul li ul { position: absolute; z-index: 200;
display: block;
border-color: #ccc #888 #555 #bbb; width: 100%; }Ist der z.index wirklich nötig? display:block ist aufgrund der absoluten Positionierung überflüssig. width:100% solltest Du überdenken.
ul#Navigation ul li ul li { position: relativ; top: 0; left: 100%; text-align:left;
"relativ" ist falsch, aber ohnehin unnötig, da relative ohnehon schon für alle ul#Navigation li angegeben ist. Die Verschiebung eines relativ positionierten Elements möchtest Du sicherlich auch nicht haben.
ul#Navigation ul ul ul li:hover ul
{
display: block; /* Unternavigation in modernen Browsern einblenden */
}ul#Navigation ul ul ul li:hover ul
{
display: none; /* Unternavigation in modernen Browsern einblenden */
}ja was denn jetzt?
ul#Navigation a, ul#Navigation span {
display: block;
width: 8.0em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.06em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #FFFFFF; background-color: #5E68AF;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}Und was soll das? width:8em für nicht-IEs und 6.4em für den IE6 im standardkompatiblen Modus?
Ich würde Dir empfehlen, auf die zusätzliche Navigationsebene auch aus Usabilitygründen (ein solches Menü ist überladen und die Nutzung überfordert manche nicht versierte oder feinmotorisch benachteiligte Nutzer) ganz zu verzichten und die zusätzlichen Links in die Seiteninhalte zu integrieren.
freundliche Grüße
Ingo