Anzeige

"aufklapp menü"

"aufklapp menü" | PSD-Tutorials.de

Erstellt von bifi, 28.10.2008.

  1. bifi

    bifi Aktives Mitglied

    Dabei seit:
    29.10.2004
    Beiträge:
    1.144
    Geschlecht:
    männlich
    Ort:
    Mainz
    Software:
    C4D / PS
    Kameratyp:
    Canon EOS 400D
    "aufklapp menü"
    hi

    hat jemand von euch eine Idee, wie man eine art menü realisieren könnte das ähnlich dme Format einer XMl datei funktioniert ?
    Was ich meine sind diese + & - Buttons die einen Bereich auf und zu klappen.
    (so wie hier früher auf der Seite im Menü rechts und links)

    Code (Text):
    1.  
    2. +
    3. -
    4.    >
    5.    >
    6.    >
    7. +
    8.  
    wenn man also auf ein plus klickt öffnet sich ein bereich wo wieterer content eingefügt werden kann.
    ich will das ganze nicht für ein Menü verwenden, sondern zu besseren darstellung einer durch ein php script erstellen (sehr langen) liste, die ich nach inhalt gerne trennen und in einzelne Klappmenüs unterteilen würde.

    hoffe ihr könnt mir helfen,
    Gruß Bifi
     
    #1      
  2. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    "aufklapp menü"
    AW: "aufklapp menü"

    Javascript oder CSS? CSS ist mir direkt keines bekannt, welches das aufklappen ermöglichen würde und dies dann beibehalten wird ohne die Seite neu laden zu müssen.
     
    #2      
  3. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    "aufklapp menü"
    AW: "aufklapp menü"

    Code (Text):
    1. <div id="Accordion1" class="Accordion" tabindex="0">
    2.         <div class="AccordionPanel">
    3.                 <div class="AccordionPanelTab">Bezeichnung 1</div>
    4.                 <div class="AccordionPanelContent">Inhalt 1</div>
    5.         </div>
    6.         <div class="AccordionPanel">
    7.                 <div class="AccordionPanelTab">Bezeichnung 2</div>
    8.                 <div class="AccordionPanelContent">Inhalt 2</div>
    9.         </div>
    10. </div>
    im Dreamweaver CS3 gibt es dafür Spry-Akkordeon
    mit CSS und einem JS
     
    #3      
  4. bifi

    bifi Aktives Mitglied

    Dabei seit:
    29.10.2004
    Beiträge:
    1.144
    Geschlecht:
    männlich
    Ort:
    Mainz
    Software:
    C4D / PS
    Kameratyp:
    Canon EOS 400D
    "aufklapp menü"
    AW: "aufklapp menü"

    kann ich dieses script so direkt in ein html file einbinden oder fehlt da noch was (besagtes javascript ?)

    kann man das auch grafisch anpassen ?
     
    #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
    "aufklapp menü"
    AW: "aufklapp menü"

    mit javascript!
    auf das Pluszeichen legst du einen onclick="oeffne('dieID')"
    im head sowas wie:
    Code (Text):
    1.  
    2.   function oeffne(ID){
    3.   document.getElementById(ID).style.display = "block";
    4. }
    5.  
    in den Div id="dieID" legst du dann deine liste mit den Punkten. als erstes aber das Minuszeichen etwa
    Code (Text):
    1. <p onclick="schliesse('dieID')">-</p>
    2. !-- hier dann deine listenpunkte -->
    3. ...
    4.  
    als functionsbeschreibung im head:
    Code (Text):
    1.  
    2.   function schliesse(ID){
    3.   document.getElementById(ID).style.display = "none";
    4. }
    5.  
    im Startzustand müssen die Container mit den Sammlungen natürlich per display:none;ausgeblendet sein.

    so ungefähr könnte es funktionieren
    (tippfehler nicht ausgeschlossen)
     
    Zuletzt bearbeitet: 28.10.2008
    #5      
  6. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    "aufklapp menü"
    AW: "aufklapp menü"

    Ist ja super - und was wenn der Suchende kein Dreamwaver hat?
    Wenn schon, dann teile wenigstens noch den Rest mit und nicht so eine halblebige Antwort!! :mad:
     
    #6      
  7. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    "aufklapp menü"
    AW: "aufklapp menü"

    was weiß denn ich, welche Software die Leute hier haben.
    Jedenfalls gibt es in Dreamweaver CS3 diese Funktion
    und nur darauf habe ich hingewiesen, oder soll ich hier den
    gesamten Source-Code posten ?

    vielleicht sollte jeder mal hinschreiben, welche Software er hat,
    dann könnte man besser reagieren auf Fragen und Wünsche.
     
    #7      
  8. 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
    "aufklapp menü"
    AW: "aufklapp menü"

    erstmal wird die Seite ja per php generiert, ausser einem Texteditor(mit ein paar extras) braucht man dafür keine 'Software'.

    edit:
    ich hab das aus #5 mal zusammengeschrieben: http://twoiback.de/PSD/auf-zu/
     
    Zuletzt bearbeitet: 28.10.2008
    #8      
  9. bifi

    bifi Aktives Mitglied

    Dabei seit:
    29.10.2004
    Beiträge:
    1.144
    Geschlecht:
    männlich
    Ort:
    Mainz
    Software:
    C4D / PS
    Kameratyp:
    Canon EOS 400D
    "aufklapp menü"
    AW: "aufklapp menü"

    sehr schön !
    und das plus bzw Minus kann man ja noch als bild einfügen damit man nicht den Textcursor hat wenn man drüber ist.

    andere frage: kann man auch das plus mit dem minus beim öffnen ersetzen ?

    also dass da dann nichtmehr das + und darunter ein - ist, sondern statt dem + halt ein -
    die funktionalität soll natürlic herhalten bleiben, sprich per klick aufs plus auf, per klick aufs minus zu
     
    #9      
x
×
×
teststefan