22.11.2009, 18:26
|
|||
|
|||
accordion effekt Problem
Moin,
ich würde gerne folgenden code so abändern, dass beim Verlassen der zuletzt offene div auch offen bleibt und eben nur Veränderungen durch hovern eines anderen divs vorgenommen werden. Im Moment wird die height:15px ja auf alle divs angewandt. Grüße Jan Code:
...
#accordion {
width: 100%;
margin: 0 auto;
overflow:visible;
}
#accordion div {
padding:5px;
height:15px;
overflow: hidden;
border-bottom: 1px #ccc solid;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
}
#accordion:hover div {
height: 15px;
}
#accordion:hover div:hover {
height: 200px;
overflow: visible;
}
...
<div id="accordion">
<div>bla 1</div>
<div>bla 2</div>
<div>bla 3</div>
<div>bla 4</div>
</div>
Geändert von bavariaaa (22.11.2009 um 19:02 Uhr) 
|
| Sponsored Links |
|
22.11.2009, 18:32
|
|||
|
|||
|
Mahlzeit.
Zitat:
Unter welchen Umständen? Auch oder nur bei Seitenwechsel? Welche Spans? Wie sollen die durch Nutzereingabe offen sein//geöffnet/sichtbar werden? Bitte vollständigen, lauffähigen Code angeben, keine Schnipsel  , siehe meine Sig.Online-Beispiel ( bei funpic etwa) ist noch lieber gesehen....
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
| Sponsored Links |
|
22.11.2009, 18:52
|
|||
|
|||
|
Ich meinte natürlich <div>s ;D und habe zur Verdeutlichung beide states mal als Bild festgehalten.
Maus ausserhalb des <div id="accordion">:  Maus hovered den div mit Inhalt "ich höre gerade...":  Das Problem ist einfach dass wenn ich <div id="accordion"> verlasse alle divs natürlich wieder die height:15px annehmen, was sie aber nicht sollen. Der letzte offene <div> soll offen bleiben. Geändert von bavariaaa (22.11.2009 um 18:54 Uhr)
|
|
22.11.2009, 20:37
|
|||
|
|||
|
Das läßt sich -vielleicht- mit den Status :active bzw. :focus verwirklichen, setzt jedoch in beiden Fällen die Nutzereingabe "klickmich" voraus.
Falls ein anderer Fokus gesetzt wird (neuer Klick irgendwohin) rutscht das Div wieder zusammen. Mit css alleine ( gehen wir mal nicht von CSS3 :target aus...) wird das schwierig bis unmöglich Hierfür würde ich Javascript verwenden. Ich denke,  das ist was für Dich:Tutorial: Toggle-Boxen mit jQuery | Javascript, jQuery, Navigation, Tutorials | Dr. Web Magazin
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
22.11.2009, 21:02
|
|||
|
|||
|
Du kannst :target bereits verwenden - für die guten Browser. Suchmal im Forum danach, da war gerade letzte Woche ein Thread (Suchwort: :target)
Das kann man mit :fokus verbinden und hülft den Nutzern mit moderneren Browser deutlich weiter, weil es JS quasi in der Funktionalität (aufklapp, einklapp) ersetzt.Der Rest bekommt dann eben nur solange was zu sehen, wie er nirgendwo anders hinklickt.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
23.11.2009, 09:53
|
|||
|
|||
|
Es gibt eine skriptfreie CSS-Lösung via :target, die den Anspruch erhebt, auch in IE 6 zu funktionieren:
Artikel: Create the accordion effect using CSS3 Demo: Demo CSS-Accordion Nachteil an :target ist der Zurück-Button des Browsers, da sich das 'Zurück' erstmal auf den jeweils vorher angesprungenen Anker bezieht. Man muss also ggf. zig-Mal auf den Button klicken, um an den Ausgangspunkt zurück zu kehren.
|
|
23.11.2009, 18:11
|
|||
|
|||
|
Vielen Dank an euch.
Das funktioniert super  Und das Problem mit den Ankern und der Back-Taste löst sich von selbst, da das Accordion ausschließlich auf der "Startseite" zu sehen ist und von da aus im Normalfall kein Back genutzt wird. Grüße Jan
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Problem bei CSS Grundlayout | DasSauerkraut | CSS | 0 | 10.08.2009 21:35 |
| Rollover effekt problem | star | CSS | 0 | 16.07.2008 11:00 |
| Problem bezüglich der z-index-Positionierung | Black Fladder | CSS | 14 | 04.10.2004 20:11 |
| Problem mit Zellenhöhe (100% und unbekannte Höhe) | empty | CSS | 15 | 08.09.2004 23:20 |
| Problem mit Background-Color im FireFox | to.ni | CSS | 2 | 31.08.2004 11:13 |
Linear-Darstellung
