Anzeige

collapse/expand mit Sonderwünschen^^

collapse/expand mit Sonderwünschen^^ | PSD-Tutorials.de

Erstellt von ill66, 05.11.2009.

  1. ill66

    ill66 Nicht mehr ganz neu hier

    Dabei seit:
    21.01.2005
    Beiträge:
    162
    Geschlecht:
    weiblich
    Ort:
    nähe Bremen
    Software:
    Gimp, Inkscape, Scribus, Quanta+, KompoZer
    collapse/expand mit Sonderwünschen^^
    [gelöst] collapse/expand mit Sonderwünschen^^

    Puuh, mein Schädel brummt.
    Die letzten Stunden hab ich damit verbracht, einen Weg zu suchen, ein/ausklappbare Elemente für meinen Blog hinzubekommen - genaugenommen Listen-Punkte einer Sub-Liste.

    google gibt mir ja auch reichlich Scripte dafür, aber da ich genau Vorstellungen hab, wie das am Ende aussehen und sich verhalten soll, gab es immer einen Haken...

    Folgende Anforderungen sollen erfüllt werden:

    - keine externen JS-Files
    - beim Klick auf ein übergeordnete Item sollen nur dessen Unterpunkte ein/ausklappen, nicht aber die von anderen übergeordneten Items in dem selben DIV
    - eine kleine Grafik, die jeweils bei Klick umschaltet (bei zugeklappter Liste ein Dreieck, das nach rechts zeigt, bei ausgeklappter eins, das nach unten zeigt)
    (- je schlanker der Code, desto besser ;) )

    Ja, ich glaub, das wars schon^^

    Also das ganze wäre dann so strukturiert:
    Code (Text):
    1. *Kateg. 1
    2.    - Subkat. a
    3.    - Subkat. b
    4.    - Subkat. c
    5. *Kateg. 2
    6. *Kateg. 3
    7.    - Subkat a
    usw.

    Ich hab von JS quasi keine Kenntnisse, HTML und CSS ist stabil.

    Kann jemand helfen?
     
    Zuletzt bearbeitet: 06.11.2009
    #1      
  2. mrbuff76

    mrbuff76 Nicht mehr ganz neu hier

    Dabei seit:
    18.11.2008
    Beiträge:
    82
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    CS5.5
    Kameratyp:
    Canon EOS 350D
    collapse/expand mit Sonderwünschen^^
    AW: collapse/expand mit Sonderwünschen^^

    Hm, da wirst du wohl um JS nicht drumherum kommen...
     
    #2      
  3. ill66

    ill66 Nicht mehr ganz neu hier

    Dabei seit:
    21.01.2005
    Beiträge:
    162
    Geschlecht:
    weiblich
    Ort:
    nähe Bremen
    Software:
    Gimp, Inkscape, Scribus, Quanta+, KompoZer
    collapse/expand mit Sonderwünschen^^
    AW: collapse/expand mit Sonderwünschen^^

    Oh, da liegt wohl ein Missverständnis vor^^
    Ich weiß, dass ich dafür JS brauch, was auch in Ordnung ist, ich hab nur angemerkt, dass ich davon nicht viel Ahnung hab, damit mögliche Helfer es mir niedrigschwellig erklären ;)
    und das JS sollte halt nicht in einer externen Datei gelagert werden, sondern intern.
     
    #3      
  4. ChrisvA

    ChrisvA Aktives Mitglied

    Dabei seit:
    06.06.2009
    Beiträge:
    265
    Geschlecht:
    männlich
    Software:
    Photoshop CS4, Nodepad++, Eclipse, Gimp,...
    Kameratyp:
    Lumix DMC-TZ3
    collapse/expand mit Sonderwünschen^^
    AW: collapse/expand mit Sonderwünschen^^

    Wenn du nicht so viel Javaskript haben möchtest, baue das ganze erst einmal so auf, dass du nur durch ändern der Eigenschaft visible ein Menüpunkt entweder offen ist, oder zu. Packe also die ganzen Subkategorien eines Menüpunktes in eine Div-Box zusammen.
    Dann kannst du das ganze auf eine kleine Javaskriptfunktion reduzieren, die dann nur noch den visible-Parameter ändert und das Bild mit dem Plus/Minus austauscht.
    Ob man das Javaskript intern hat oder einbindet, macht eigentlich keinen Unterschied. Ein Vorteil der Einbindung ist, dass man dadurch nicht an den Anfang jeder HTML-Datei das ganze Skript hängen muss, sondern eben nur eine Zeile in der steht, wo das JS-für den Browser zu finden ist.
    Was hast du eigentlich gegen ein eingebundenes JS?
     
    Zuletzt bearbeitet: 05.11.2009
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    collapse/expand mit Sonderwünschen^^
    AW: collapse/expand mit Sonderwünschen^^

    ist nicht unbedingt nötig. Die Unterpunkte sind ja auch nur Kinder einer Liste (zB einer <ul>) die man genauso wie ein div ein und ausblenden kann.
     
    #5      
  6. ill66

    ill66 Nicht mehr ganz neu hier

    Dabei seit:
    21.01.2005
    Beiträge:
    162
    Geschlecht:
    weiblich
    Ort:
    nähe Bremen
    Software:
    Gimp, Inkscape, Scribus, Quanta+, KompoZer
    collapse/expand mit Sonderwünschen^^
    AW: collapse/expand mit Sonderwünschen^^

    Also so wie ichs bisher gebastelt hab, hab ich einen wrapper-DIV und darin dann für jede Haupt-Kategorie eine UL mit jeweils einer verschachtelten UL für die Sub-Kategorien (dürfte ja aber kein Unterschied zu deiner DIV-Variante sein, da ebenfalls Blocklevel-Elemente, oder?)

    Nein, ich kann das leider nicht^^° Du denn vlt?

    Ja, die Vorteile mit dem von extern Einbinden kenn ich ja aus dem CSS.
    Ich hab auch ein Script gefunden, das scheint eigentlich auf meine Bedürfnisse zu passen, nur beinhaltet es halt eine externe JS, wo ich durch meine Unkenntnis nicht richtig wüsste, wie ich die korrekt zu einer internen ummodeln kann.

    Mein Blog liegt halt bei google/blogspot und da könnte ich externe Text-/Script-Dateien nur einbinden, wenn ich sie auf nem anderen Webspace lagere. Und da ich diesen Blog gerne etwas anonymer halten würde, könnte ich nicht meinen Pad-Space dazu benutzen und mit Free-Space ist das ja immer so eine Sache mit Verfügbarkeit und so.
    Drum.^^
     
    #6      
  7. ill66

    ill66 Nicht mehr ganz neu hier

    Dabei seit:
    21.01.2005
    Beiträge:
    162
    Geschlecht:
    weiblich
    Ort:
    nähe Bremen
    Software:
    Gimp, Inkscape, Scribus, Quanta+, KompoZer
    collapse/expand mit Sonderwünschen^^
    AW: collapse/expand mit Sonderwünschen^^

    OK, ich hab in einem Blog jetzt einen Link bekommen, wo genau das gezeigt wird, was ich haben will (die 2. Version, mit den mehreren Haupt-Topics).

    Aber ich blick einfach nicht, was es mit diesem [ANCHORID] und [DIVID] auf sich hat! Verdammt! Und müsste nicht eigentlich diese mid-class irgendwo definiert werden?? :motz:

    edit:
    Puuh. Ich weiß nicht genau wie, aber ich habs geschafft durch intensive Quelltext-Schau und Experimentationen^^°
     
    Zuletzt bearbeitet: 06.11.2009
    #7      
  8. McLoude

    McLoude Highlander

    1
    Dabei seit:
    04.11.2009
    Beiträge:
    55
    Geschlecht:
    männlich
    Ort:
    Cottbus
    Software:
    Photoshop CS3, Illustrator CS3, InDesign CS3, manchmal auch Premiere/Encore und Eclipse fürs Coding
    collapse/expand mit Sonderwünschen^^
    AW: collapse/expand mit Sonderwünschen^^

    Also, ich habe in einem Admin mal ne Lösung gebaut (habe ich auch damals nur irgendwo mal gelesen) die allein mit CSS funktionierte.

    Hier mal Teile des Codes in der HTML-Seite:

    HTML:
    1.  
    2. <ul id="menue">
    3.   <li><a href="#" onClick="javascript:zeigen('submenue1')">Dein Hauptpunkt1</a>
    4.     <ul id="submenue1" class="submenue">
    5.       <li><a href="#">Dein Unterpunkt</a></li>
    6.     </ul>
    7.   </li>
    8. <li><a href="#" onClick="javascript:zeigen('submenue2')">Dein Hauptpunkt2</a>
    9.     <ul id="submenue2" class="submenue">
    10.       <li><a href="#">Dein Unterpunkt</a></li>
    11.     </ul>
    12.   </li>
    13. </ul>
    14.  
    In der CSS-Datei, da sind meine Angaben noch drin:
    Code (Text):
    1.  
    2. ul#menue li a + ul.submenue
    3. {
    4.  display: none;
    5. }
    6. ul#menue li a:focus + ul.submenue
    7. {
    8.  display: block;
    9. }
    10. ul, li
    11. {
    12.      margin: 0;
    13.      padding: 0;
    14.      list-style-type: none;
    15. }
    16. ul#menue {
    17.      width: 100%;
    18.      margin: 0 0 0 0;
    19.      font-family: Verdana, Arial, Helvetica, sans-serif;
    20.      font-size: 11px;
    21.      font-weight: bold ;
    22.      
    23. }
    24. ul#menue li a
    25. {
    26.      margin: 2px 8px 2px;
    27.      height: 20px;
    28.      line-height: 25px;
    29.      text-align: left;
    30.      display: block;
    31.      text-decoration: none;
    32.      color: #666666
    33.      
    34. }
    35. ul#menue li a + ul.submenue
    36. {
    37.      display: none;
    38. }
    39.  
    40. ul#menue li a:focus + ul.submenue
    41. {
    42.      display: block;
    43. }
    44. ul.submenue
    45. {
    46.      margin: 0px 0px;
    47.      font-weight:normal ;
    48. }
    49.  
    Und dann halt leider nochmal ein JavaScript, da der IE6 (bei den neuen weiß ich nicht) diese CSS-Eigenschaften nicht versteht, den packste in den Headbereich:
    Code (Text):
    1.  
    2. <script language="JavaScript" type="text/javascript">
    3. window.onload=zeigen;
    4.  
    5. function zeigen(id)
    6. {
    7.  for (var i = 1; i<=100; i++)
    8.  {
    9.     if (document.getElementById("submenue"+i))
    10.     {
    11.         document.getElementById("submenue"+i).style.display="none";
    12.     }
    13.  }
    14.  if (document.getElementById(id))
    15.  {
    16.      document.getElementById(id).style.display="block";
    17.  }
    18.  
    19. }
    20. </script>
    21.  
    Also bei mir funzt das bestens. Da ist halt nur jetzt kein Plus-Minus bei. Ich will es nur mal geposted haben, dass es auch (fast) ohne JS geht ;-)
     
    #8      
Seobility SEO Tool
x
×
×