• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bei Klick auf Symbol Liste ausklappen

C

Chris2610

Neues Mitglied
Hallo,
ich bin ja eher der HTML-Anfänger und stehe vor folgendem Problem.

Ich möchte hier für eine Seite eine Art ausklappbare Liste erstellen. Wenn ich auf einen Pfeil vor einem Überbegriff klicke, möchte ich, dass sich zu dem Überbegriff eine Liste mit Links öffnet. Im Netz und Foren habe ich viele Javascript-Lösungen gefunden, die aber so funktionierten, dass man auf das Wort klicken musste, damit sich die Liste öffnet.
Ein Weiteres Manko an diesen Lösungen war Javascript. Geht das, was ich vorhabe nicht auch "nur" mit purem HTML?

Eventuell habe ich auch einfach nur falsch gesucht, aber leider finde ich nichts passendes :-(

Um mein Problem zu erläutern, habe ich ein Bild angehängt, dass meinen Wunsch evtl. besser erklärt...

Vielen Dank schonmal für eventuelle Hilfe
 

Anhänge

  • Beschreibung_Problem.JPG
    Beschreibung_Problem.JPG
    8,5 KB · Aufrufe: 9
Werbung:
Guten Morgen XraySolo,

vielen Dank für deine Hinweise. Habe die Seiten nun mal durchgelesen und mit meinen bescheidenen Kenntnissen etwas "rumgespielt". Leider ohne den großen Erfolg. Mir fehlt leider das Wissen, wie ich das über mein tolles "Dreieck" vor dem Überbegriff lösen kann, noch wie ich das machen muss, damit sich die Liste öffnet und schließt :-/

So, hier sieht man jetzt mal meinen zusammengebastelten "Herumprobiercode". Und wie man sieht, habe ich nicht den größten Durchblick. Den Code den ich hier zum Aufklappen verwende habe ich ebenfalls gefunden und mir zusammengebastelt, aber leider funktioniert der nicht, denn das Wort "Text" steht schon von vorneherein da...

HTML: 
<style type="text/css">
<!-- 
 a:link{color:#0000FF;}
 a:visited{color:#660000;}
 a:hover{color:##660000;}
 a:active{color:##660000;}
 p{color:#660000;}
 li{color:#660000;}
 
div.spoiler a:active, div.spoiler a:focus { /* Neu für IE6 */
  border:none;
  }
 
div.spoiler a:active span, div.spoiler a:focus span {
  display: block;
  /*border: none;*/ /* auskommentiert = deaktiviert */
  /*background:none;*/ /* auskommentiert = deaktiviert */
}
  
--></style>
</head>

<body>
    <a href="Seite1.html">Link zu Seite 1</a>
    <p>1. Diese Zeile ist zu sehen</p>
    <p style="display:none">2. Diese Zeile ist nicht zusehen</p>
    <p>3. Diese Zeile ist wieder zusehen</p>
    
    <li>Überbegriff
        <ul>
            <li><div class="spoiler">
                    <a href="#">Aufklappen<span>TEXT</span></a>
                </div>
            </li>
            <li><a href="Seite1.html" > Seite1</a></li>
            <li><a href="Seite2.html" > Seite2</a></li>
        </ul>
    </li>    
</body>
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
ich kann dir hier keine volle lösung präsentieren, da das sehr lang würde, aber vielleicht hilft dir die kurzform:

- eine liste und eine unterliste (ausklappeffekt) erstellen.
- die übergeordnete liste bleibt, wie sie ist
- die untergeordnete liste ("klapp") mit display:none; unsichtbar
- dass sie sichtbar werden kann, musst du die pseudoklasse :active verwenden
- reinschreiben, wie sich das element verhalten soll, wenn es :active ist

kein hexenwerk, man muss sich das nur bildlich vorstellen können. CSS definiert jeden "schritt" in einem eigenen befehl. heißt also, du brauchst mindestens zwei befehle, um den ausklappeffekt zu realisieren.

standardmäßig soll eingeklappr bleiben, also display:none; wenn aber draufgeklickt wird, soll angezeigt werden.

Code: 
.klapp { display:none; }
.klapp:active { /* weitere style-informationen */ }

"klapp" heißt die nur aus dem sinn 'raus, kannst sie nach belieben umbenennen.

Nils aka XraYSoLo
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben