Aufklappmenüs

Status
Nicht offen für weitere Antworten.

titan4e

Grünschnabel
Geschätzte Forumsgemeinde

Ich habe noch ein Problem mit dem obigen Aufklappmenü, genau genommen mit der Formatierung desselbigen.

Zuerst einmal mein Quelltext:

Code:
 <OL class=MenuLinkList>
       <LI>
           <A href="#" onclick="show('cat1')" target="main">Überschrift 1</A>
                        <div class="link2" id="cat1" style="display:none">
                            <a href="#" target="main"><span class=link2>Seite 1</span></a>
                            <a href="#" target="main"><span class=link2>Seite 2</span></a>
                            <a href="#" target="main"><span class=link2>Seite 3</span></a>
                        </div>
       </LI>
       <LI>
            <A href="#" onclick="show('cat2')" target="main">Überschrift 2</A>
                        <div class=link2 id="cat2" style="display:none">
                            <a href="#" target="main">Seite 1</a>
                            <a href="#" target="main">Seite 2</a>
                            <a href="#" target="main">Seite 3</a>
                        </div>
        </LI>

Hier ein Ausschnitt vom CSS-File:

Code:
.link2 {
FONT-SIZE: 9px; COLOR: #D1E0FC; LINE-HEIGHT: 8px; FONT-FAMILY: Verdana; FONT-WEIGHT: none; TEXT-DECORATION: none; 
}

Muß noch vorwegnehmen, daß ich für die Überschrift und die ganzen Links jeweils eine eigene Farbe und jeweils eine eigene Formatierung haben will, nur bei hover, selected usw. soll die Farbe gleichbleiben. Das ganze ist in einer Tabelle, die die gesamte Formatierung hat, also auch für die Überschriften 1 und 2.

Wie Ihr seht, habe ich die Formatierung (class="link2") im ersten Aufklappmenü beim <DIV> Container und beim Link gesetzt, jetzt stimmt in diesem Menü zwar die Farbe, auch die neue Schriftgröße und der neue, kleinere Zeilenabstand, aber kein hover, selected, usw. Effekt mehr.

Beim zweiten Aufklappmenü habe ich nur im <DIV> Container die Formatierung gesetzt, jetzt stimmt zwar die neue Schriftgröße, der neue Zeilenabstand, hover, selected, usw., aber er übernimmt nicht die Farbe der Formatierung "link2", den Rest aber schon.

Hat wer von Euch vielleicht eine Idee, wie ich die Farbe in das Aufklappmenü 2 bekomme, so das auch der hover, selected, usw. Effekt funktioniert? Ich arbeite schon seit 3 Tagen an diesem Problem, komme aber auf keine Lösung.

Vielen Dank im Voraus.
Erwin
 
Zuletzt bearbeitet:
Hi,

ich weiss jetzt nicht, wie bei dir die Formatierung für den Hover-Effekt lautet, aber mit diesem Quellcode werden die Links bei mir wie gewünscht formatiert:

Code:
<ol class="MenuLinkList">
       <li>
           <a href="#" onclick="show('cat1')" target="main">Überschrift 1</a>
                        <div class="link2" id="cat1" style="display:none">
                            <a href="#" target="main">Seite 1</a>
                            <a href="#" target="main">Seite 2</a>
                            <a href="#" target="main">Seite 3</a>
                        </div>
       </li>
       <li>
            <a href="#" onclick="show('cat2')" target="main">Überschrift 2</a>
                        <div class="link2" id="cat2" style="display:none">
                            <a href="#" target="main">Seite 1</a>
                            <a href="#" target="main">Seite 2</a>
                            <a href="#" target="main">Seite 3</a>
                        </div>
        </li>
</ol>
Code:
.link2 a:link, .link2 a:visited {
text-decoration:none;
color:#d1e0fc;
}
.link2 a:hover {
color:#000; /* Schriftfarbe ist von mir frei gewählt */
}
 
Hi,

Super. Danke für die Hilfe Maik. Jetzt funktioniert es.

Ich habe nur noch ein kleines Problem. Vielleicht habt Ihr da auch eine Lösung für mich.

Code:
<OL class=MenuLinkList>
       <LI>
           <A href="#" onclick="show('cat1')" target="main">Überschrift 1</A>
                        <div class="link2" id="cat1" style="display:none">
                            <a href="Seite1.html#Absatz1" target="main"><span class=link2>Absatz 1</span></a>
                            <a href="Seite1.html#Absatz2" target="main"><span class=link2>Absatz 2</span></a>
                            <a href="Seite1.html#Absatz3" target="main"><span class=link2>Absatz 3</span></a>
                        </div>
       </LI>
       <LI>
            <A href="#" onclick="show('cat2')" target="main">Überschrift 2</A>
                        <div class=link2 id="cat2" style="display:none">
                            <a href="Seite1.html" target="main">Seite 1</a>
                            <a href="Seite2.html" target="main">Seite 2</a>
                            <a href="Seite3.html" target="main">Seite 3</a>
                        </div>
        </LI>

Es geht um "active":

Beim 2. Block (grün markiert) wird das "active" richtig ausgeführt. Zuerst die Überschrift und danach, wenn das Aufklappmenü geöffnet ist, die entsprechende Zeile im Menü. Je nachdem, welche Seite angeklickt wird.

Beim 1. Block navigiere ich allerdings innerhalb einer Seite. Die Überschrift markiert er mit "active" noch richtig. Beim Menüblock (rot markiert) funktioniert das allerdings nicht, da er dort nichts markiert, wenn man sich dort befindet, aber die Markierung der Überschrift verschwindet, was noch stimmen würde. Und wenn man auf die Überschrift zurückgeht, wird es wieder richtig markiert.

Habt Ihr dafür vielleicht noch eine Idee, oder funktioniert das vielleicht innerhalb einer Seite nicht?

Erwin
 
Zuletzt bearbeitet:
Falls du von der :active-Pseudoklasse sprichst, sei dir gesagt, dass sie nur bei gedrückter Maustaste funktioniert.

Ansonsten solltest du hier mal die Regel zeigen, mit der du den active-Zustand definierst, denn hellsehen kann hier niemand.

Möglicherweise kollidiert deine Regel mit dem eingebundenen span-Element, das ebenfalls die Klasse link2 besitzt.

Deshalb hatte ich das Element auch in meinem vorherigen Post aus den Links entfernt.
 
Hi,

Ich spreche von dieser ":active" Pseudoklasse, da ich die Links markieren möchte, wenn sie aktiv sind, damit der Benutzer der Homepage weiß, was er gerade geöffnet hat. Ist auch notwendig, da ein Aufklappmenü (auf meiner echten HP und nicht in diesem Beispiel) ca. 30 - 40 Links in einem Untermenü haben wird. Da kann ein Benutzer schon einmal den Überblick verlieren. Und ich spreche nicht von den besuchten Seiten, sondern, wenn er eine Seite nach der anderen im Menü öffnet, damit er weiß, welchen Link er gerade besucht hat und welcher der nächstfolgende ist.

Es funktioniert ja. Nur mit dem Beispiel, wo man sich innerhalb einer Seite bewegt, dort funktioniert es nicht.

Im obigen Beispiel kann man sagen, der untere Block funktioniert, der obere nicht. Im obigen Beispiel sind beide Blöcke ident, bis auf die Navigation (Links). Einmal öffne ich verschiedene Seiten mit *.html und einmal wird innerhalb einer Seite mit *.html#text navigiert.

Vielleicht ist das innerhalb einer Seite auch gar nicht möglich?

PS.: Ich habe <span> und </span> natürlich entfernt. Die beiden Blöcke sind komplett ident. Es kolidiert mit "Datei.html#link". Wen man "#link" entfernt, damit nur "Datei.html" stehen bleibt, funktioniert es bestens. Ich habe es ausprobiert.

Erwin
 
Zuletzt bearbeitet:
Hab den Grund in meinen letzten Post reineditiert, weshalb es im ersten Menüblock nicht funktioniert.

Wenn ich das span-Element aus den Links entferne bzw. die gleichlautende Klassendeklaration rausnehme, greift auch hier die :active-Pseudoklasse:

Code:
.link2 a:link, .link2 a:visited {
text-decoration:none;
color:#d1e0fc;
}
.link2 a:hover {
color:#000;
}
.link2 a:active {
color:#ff0000;
}
 
Hallo Maik,

Wir reden uns scheinbar auseinander.

Ich arbeite innerhalb einer Seite mit Anker ( <a name="name1">Name</a> ) und navigiere beim ersten Aufklappmenü jeweils innerhalb der einen Seite zu den jeweiligen Ankern. Um dort hinzukommen rufe ich immer die selbe Seite auf und dazu den jeweiligen Ankernamen (Seite1.html#name1, Seite1.html#name2 usw.).

Sobald ich die Ankernamen aus dem Aufklappmenü rausnehme, funktioniert das Pseudoformat ":active" genau gleich, wie beim anderen Aufklappmenü, wo ich irgendwelche Seiten aufrufe.

Erwin
 
Zuletzt bearbeitet:
Und nochmal, es spielt keine Rolle, dass du innerhalb des Dokuments mit Ankern navigierst, sondern dass du in den Links ein span-Element mit der gleichlautenden Klasse link2 eingebettet hast, weshalb hier .link2 a:active nicht greift.

Wenn ich diesen Code

Code:
<a href="#" onclick="show('cat1')" target="main">Überschrift 1</a>
   <div class="link2" id="cat1" style="display:none">
        <a href="#anker1" target="main"><span class="link2">Seite 1</span></a>
        <a href="#anker2" target="main"><span class="link2">Seite 2</span></a>
        <a href="#anker3" target="main"><span class="link2">Seite 3</span></a>
   </div>
gegen diesen

Code:
<a href="#" onclick="show('cat1')" target="main">Überschrift 1</a>
   <div class="link2" id="cat1" style="display:none">
        <a href="#anker1" target="main">Seite 1</a>
        <a href="#anker2" target="main">Seite 2</a>
        <a href="#anker3" target="main">Seite 3</a>
   </div>
austausche, funktioniert auch hier die :active-Pseudoklasse.
 
Hallo liebe Forumsgemeinde,

Ich habe bei meinem Aufklappmenü einige Probleme und hoffe, daß ihr mir vielleicht helfen könnt. Maik hat mir (siehe oben) schon Lösungsvorschläge gemacht, die leider nicht daß gewünschte Ergebnis gebracht haben.

Zuerst einmal der Quellcode des Menüs:

Code:
<HTML>
<HEAD>
<TITLE>&Ouml;sterreich im Weltraum</TITLE>
<SCRIPT language=JavaScript>
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</SCRIPT>
<script type="text/javascript">
<!--
function show(divid) {
document.getElementById("cat1").style.display="none";
document.getElementById("cat2").style.display="none";
document.getElementById("cat3").style.display="none";
document.getElementById("cat4").style.display="none";
document.getElementById("cat5").style.display="none";
document.getElementById("cat6").style.display="none";
document.getElementById("cat7").style.display="none";
document.getElementById("cat8").style.display="none";
document.getElementById("cat9").style.display="none";
document.getElementById("cat10").style.display="none";
document.getElementById(divid).style.display="inline";
}
//-->
</script>
</HEAD>
<BODY bgcolor=#000000 text=#FFFFFF vLink=#FFFFFF aLink=#00FF00 link=#D1E0FC>
<LINK href="menue.css" type=text/css rel=stylesheet>
      <TABLE id=content>
        <TBODY>
        <TR>
         <TD class=MainMenu id=leftbar>
           <UL>
             <OL class=MenuLinkList>
                <LI>
                   <A href="weltraumpioniere.html" onclick="show('cat1')" target="main">Weltraumpioniere</A>
                        <div class="link2" id="cat1" style="display:none; left=50px">
                            <a href="weltraumpioniere.html#haas" target="main">&nbsp;&nbsp;&nbsp; Conrad Haas</a>
                            <a href="weltraumpioniere.html#kepler" target="main">&nbsp;&nbsp;&nbsp; Johannes Kepler</a>
                            <a href="weltraumpioniere.html#pirquet" target="main">&nbsp;&nbsp;&nbsp; Guido von Pirquet</a>
                            <a href="weltraumpioniere.html#hoefft" target="main">&nbsp;&nbsp;&nbsp; Franz von Hoefft</a>
                            <a href="weltraumpioniere.html#ulinski" target="main">&nbsp;&nbsp;&nbsp; Franz Abdon Ulinski</a>
                            <a href="weltraumpioniere.html#potocnik" target="main">&nbsp;&nbsp;&nbsp; Herman Potocnik</a>
                            <a href="weltraumpioniere.html#oberth" target="main">&nbsp;&nbsp;&nbsp; Hermann Oberth</a>
                            <a href="weltraumpioniere.html#valier" target="main">&nbsp;&nbsp;&nbsp; Max Valier</a>
                            <a href="weltraumpioniere.html#schmiedl" target="main">&nbsp;&nbsp;&nbsp; Friedrich Schmiedl</a>
                            <a href="weltraumpioniere.html#saenger" target="main">&nbsp;&nbsp;&nbsp; Eugen S&auml;nger</a>
                        </div>
                </LI>
                <LI>
                   <A href="internationale-gremien.html" onclick="show('cat2')" target="main">Internationale Gremien</A>
                        <div class="link2" id="cat2" style="display:none"></div>
                </LI>
                <LI>
                   <A href="missionen.html" onclick="show('cat3')" target="main">Weltraummissionen</A>
                        <div class="link2" id="cat3" style="display:none">
                            <a href="missionen-Dateien/spacelab.html" target="main">&nbsp;&nbsp;&nbsp; Spacelab</a>
                            <a href="missionen-Dateien/venera13.html" target="main">&nbsp;&nbsp;&nbsp; Venera 13 & 14</a>
                            <a href="missionen-Dateien/austromir.html" target="main">&nbsp;&nbsp;&nbsp; Austromir91</a>
                            <a href="missionen-Dateien/tugsat.html" target="main">&nbsp;&nbsp;&nbsp; Tugsat-1</a>
   </div>
                </LI>
                <LI>
                   <A href="bodenausruestung.html" onclick="show('cat4')" target="main">Bodenausrüstung</A>
                        <div class="link2" id="cat4" style="display:none"></div>
                </LI>
                <LI>
                   <A href="anwendungen.html" onclick="show('cat5')" target="main">Anwendungen und Dienstleistungen</A>
                        <div class="link2" id="cat5" style="display:none"></div>
                </LI>
                <LI>
                   <A href="transfer.html" onclick="show('cat6')" target="main">Transfer von Weltraumtechnologie</A>
                        <div class="link2" id="cat6" style="display:none"></div>
                </LI>
                <LI>
                   <A href="firmen.html" onclick="show('cat7')" target="main">&Ouml;sterreichische Firmen</A>
                        <div class="link2" id="cat7" style="display:none"></div>
                </LI>
                <LI>
                   <A href="astronauten.html" onclick="show('cat8')" target="main">Astronauten</A>
                        <div class="link2" id="cat8" style="display:none"></div>
                </LI>
                <LI>
                   <A href="personen.html" onclick="show('cat9')" target="main">Wichtige Personen</A>
                        <div class="link2" id="cat9" style="display:none"></div>
                </LI>
                <LI>
                   <A href="links.html" onclick="show('cat10')" target="main">Links</A>
                        <div class="link2" id="cat10" style="display:none"></div>
                </LI>
             </OL>
            </UL>
          </TD>
         </TR>
         </TBODY>
        </TABLE>
</BODY>
</HTML>

Dazu die Datei menue.css:

Code:
BODY TD {
FONT-SIZE: 9pt; COLOR: #4F61A6; FONT-FAMILY: Arial, sans-serif
}
#content {
BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; WIDTH: 100%; BACKGROUND-COLOR: #FFFFFF
}
.MainMenu OL.MenuLinkList A {
COLOR: #EEEEEE; BACKGROUND-COLOR: #4F61A6; TEXT-DECORATION: none
}
.MainMenu OL.MenuLinkList A:hover {
COLOR: #FF0000; BACKGROUND-COLOR: #4F61A6; TEXT-DECORATION: underline
}
.MainMenu OL.MenuLinkList A:active {
COLOR: #FF0000; BACKGROUND-COLOR: #4F61A6; TEXT-DECORATION: none 
}
.MainMenu {
}
.MainMenu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.MainMenu OL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 1px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.MainMenu OL LI {
FONT-SIZE: 0.9em
}
.MainMenu UL LI P {
BORDER-RIGHT: #3f3849 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #3f3849 1px solid; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 0.9em; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px; BORDER-LEFT: #3f3849 1px solid; COLOR: #ffffff; PADDING-TOP: 0px; BORDER-BOTTOM: #3f3849 1px solid; BACKGROUND-REPEAT: no-repeat; WHITE-SPACE: nowrap; HEIGHT: 15px; BACKGROUND-COLOR: #eaa500
}
.MainMenu OL {
BORDER-RIGHT: #3f3849 1px solid; BORDER-TOP: #3f3849 1px solid; MARGIN-BOTTOM: 0px; BORDER-LEFT: #3f3849 1px solid; BORDER-BOTTOM: #3f3849 1px solid; BACKGROUND-COLOR: #4F61A6
}
.MainMenu OL.MenuLinkList {
BORDER-BOTTOM-WIDTH: 0px
}
.MainMenu OL.MenuLinkList LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #3f3849 1px solid
}
.MainMenu OL.MenuLinkList A {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-WEIGHT: bold; PADDING-BOTTOM: 4px; PADDING-TOP: 0px
}
.MainMenu OL.MenuLinkList A {
DISPLAY: block
}
.link2 {
FONT-SIZE: 9px; COLOR: #D1E0FC; LINE-HEIGHT: 8px; FONT-FAMILY: Verdana; FONT-WEIGHT: none; TEXT-DECORATION: none; 
}
.link2 a:link {
TEXT-DECORATION: none; COLOR: #D1E0FC;
}
.link2 a:visited {
TEXT-DECORATION: none; COLOR: #D1E0FC;
}
.link2 a:hover {
COLOR: #FF0000; TEXT-DECORATION: underline;
}
.link2 a:active {
COLOR: #FF0000; TEXT-DECORATION: none;
}

Jetzt hätte ich folgende Fragen an Euch:

1.) Was muß ich ändern, damit die Sübmenüs von "Weltraumpioniere" und "Weltraummissionen" sofort die Farbe #D1E0FC haben und nicht zuerst weiß, wie der Rest vom Menü.

2.) Warum funktioniert beim Submenü "Weltraummissionen" die Pseudofunktion "active" und beim Submenü "Weltraumpioniere" nicht, da dort die Schrift nicht rot bleibt. Beim Submenü "Weltraummissionen" bleibt die Schrift beim Anklicken rot.

3.) Kann man die <DIV> Container der Submenüs so ändern, daß die unterstrichene Linie der Pseudofunktion "hover" nur unter der Schrift zu sehen ist.

Anmerken möchte ich noch, daß ich den IE 6.0 verwende. Vielleicht hat ja jemand von Euch einen Tip für mich. Danke.

Herzliche Grüße,
Erwin
 
Hallo Erwin,

hast du die Seite irgendwo online?

Da ich mir gern das menü mal anschauen würde, und die Funktion.

Grüße

Jamest
 
Status
Nicht offen für weitere Antworten.
Zurück