Ergebnis 1 bis 5 von 5

Thema: Hilfe zu "Accordion Menü"

  1. #1
    HTML Newbie
    Registriert seit
    27.02.2014
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hilfe zu "Accordion Menü"

    Hallo,

    ich habe an sich nur ein kleines Problem, jedoch komme ich ums Verrecken auf keine Lösung:
    Ich habe ein simples Accordion Menü erstellt, funktioniert auch soweit, wie gewünscht. Jedoch! Wenn ich auf einen Button klicke, bei dem Unterpunkte aufgleiten sollen, "scrollt" es immer bis zu dem Punkt runter wo sich der Button befindet. Ich möchte aber, dass alleine die Unterpunkte aufgleiten, ohne dass es herunterscrollt. Der "Standpunkt", an dem die Seite war, soll also bleiben.
    Hier mal der simple Aufbau (ich hab Dinge über und unter das Menü gesetzt, um es zu veranschaulichen):
    HTML-Code:
    <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="test.css" type="text/css" />    
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
    </head>
        <body>    
            <div id="website">
                    <div id="teaser">
                        <img src="" alt="bild" id="teaser" height="200px"/>
                    </div>
                    <div id="inhalt">
                        <div id="wrapper">
                            <div id="nav">
                                <ul>
                                    <li id = "home">
                                        <span id="onsite">Home</span>
                                    </li>                                
                                    <li id = "angebot">
                                        <a href="#angebot">Angebotsformen</a>
                                        <ul>
                                            <li><a href="kleinkinderbetreuung.html">Kleinkinderbetreuung</a></li>
                                            <li><a href="kitabetreuer.html">Kitabetreuer</a></li>
                                            <li><a href="anmelden.html">Anmelden</a></li>                            
                                        </ul>
                                    </li>                                
                                    <li id = "leistungen">
                                        <a href="#leistungen">Spiel & Spaß</a>
                                        <ul>
                                            <li><a href="konzeption.html">Konzeption</a></li>
                                            <li><a href="tagesablauf.html">So sieht ein Tag aus</a></li>
                                            <li><a href="projekte.html">Projekte</a></li>
                                        </ul>
                                    </li>                                            
                                </ul>
                            </div>
                        </div>    
                        <div id="main">
                            <span class="willkommen"><span style="font-weight:bold;font-size:23px;"><br /><br />Überschrift</span><br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br /></span>
                        </div>
                    </div>    
                </div>        
        </body>
    </html>
    ...und das zugehörige CSS...

    Code:
    #nav {
        width: 200px;
    }
    #nav ul {
        padding: 0px;
        margin: 0px;  
    }
    
    #nav ul li {
        list-style: none;
       background:                    #96cf34 !important;
        margin-bottom:4px;
        margin-top:4px;
    }
    #nav ul li a {
        text-decoration: none;
        display: block;
        color: #333;
        padding:                    8px 10px;
        font-size:                    17px;
        font-weight:bold;
    }
    
    
    #nav ul li:target > a {
        color: gray;
        background:                    #dbff80 !important;
    }
    #nav ul li:target > ul {
        max-height: 200px;
    }
    #nav ul li ul{
        display: block;
        position: relative;
        padding: 0px;
        border: none;
        box-shadow: none;
        max-height: 0px;
        overflow: hidden;
        
        -webkit-transition: max-height 0.3s ease-out;
        -moz-transition: max-height 0.3s ease-out;
        -o-transition: max-height 0.3s ease-out;
        -ms-transition: max-height 0.3s ease-out;
        transition: max-height 0.3s ease-out;
    }
    #nav ul li ul li{
        float: none;
        display: block;
        border: none;
    }
    #nav ul li ul li a {
        padding-left: 10px;
        
    }
    #nav ul li ul li a:hover{
    color:white;
        background:                    #96cf34 !important;
        
    }
    #nav ul li a:hover{
    color:white;
        background:                    #96cf34 !important;
    
    }
    #onsite {
    
        width:180px;
        background:                    #dbff80 !important;
        display:                    block;
        padding:                    8px 10px;
        color:                        gray;
        text-decoration:            none;
    
        font-size:                    17px;
        font-weight:                bold;    
    }
    Vielen Dank, schonmal im Vorraus
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Hilfe zu "Accordion Menü"


  3. #3
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    571
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Hilfe zu "Accordion Menü"

    Hallo,

    eine Verständnisfrage: Suchst du ein Akkordeon rein auf CSS-Basis darf auch JavaScript / jQuery im Spiel sein?

    Gruss

    MrMurphy

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    27.02.2014
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hilfe zu "Accordion Menü"

    Zitat Zitat von MrMurphy Beitrag anzeigen
    eine Verständnisfrage: Suchst du ein Akkordeon rein auf CSS-Basis darf auch JavaScript / jQuery im Spiel sein?
    Naja Vorzugsweise mit CSS und Javascript. Wenns unbedingt mit jQuery sein muss, dann meinetwegen auch.

    Das Komische ist, wenn ich mein Menu blanko (also ohne Textinhalt in meiner Website) teste, funktioniert alles einwandfrei. Alleine wenn ich Text unter dem "Accordion Menü" habe oder daneben, fängt es an, dorthin zu scrollen. Warum????
    Geändert von elmaex (17.04.2014 um 14:01 Uhr)

  5. #5
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    571
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Hilfe zu "Accordion Menü"

    Hallo,

    erst mal eine Seite mit deinen Angaben:

    http://foreninfo.bplaced.net/seiten_...accordeon.html

    Ich habe selbst eine reine css-Lösung gesucht. Und bin dann auf folgende gestoßen. Der Quelltext beinhaltet alle Angaben, alle css-Angaben befinden sich im head-Bereich:

    http://foreninfo.bplaced.net/seiten_...accordeon.html

    Ich habe das css so unterteilt, das die Angaben zum Layout und zur Funktion unterteilt sind.

    Der Öffnungseffekt funktioniert nur, wenn die Höhe das aufzuklappenden Bereichs fest vorgegeben ist. Wenn Einträge hinzugefügt werden muss also auch das css angepasst werden. Deshalb habe ich auch eine Version erstellt, deren Öffnungsbereich sich dem jeweiligen Inhalt anpasst:

    http://foreninfo.bplaced.net/seiten_...accordeon.html

    Das Layout habe ich so belassen, wie ich es im Internet gefunden haben. Die Farben, Größen, Abstände u.s.w. können natürlich beliebig angepasst werden. Zum Test habe ich mal eine Datei ohne Layout erstellt. Im css befinden sich also nur die Angaben, die zur Funktion benötigt werden. Zum Aufklappen muss auf den Text "Menu1" geklickt werden:

    http://foreninfo.bplaced.net/seiten_...accordeon.html

    Und dann noch mal ein Beispiel mit mehreren aufklappbaren Bereichen und Text dazwischen.

    http://foreninfo.bplaced.net/seiten_...accordeon.html

    Mir gefällt zum einen, das man frei bestimmen kann, ob die einzelnen Bereiche geöffnet oder geschlossen sind. Es wird also nicht zwangsweise ein Bereich geschlossen, wenn ein anderer geöffnet wird.

    Un zum andern bleibt der Bereich, auf den geklickt werden muss, um Bereiche zu öffnen oder zu schließen, an seiner Position am Bildschirm. Der Besucher muss also nicht suchen oder gar scrollen um direkt weiterlesen zu können.

    Getestet habe ich das unter IE11, die aktuellen FF, Chrome und Opera. Außerdem auf einem Samsung Smartphone.

    Etwas rumgezickt hat die Aufklappfunktion und Optik unter dem Safari, wobei ich unter Windows nur eine relativ alte Version habe. Das Problem ist, das die Auf- und Zuklappfunktion nach dem Klicken erst aktiv wird, wenn der Mauszeiger außerhalb des klickbaren Bereichs gezogen wird. Es wäre schön wenn jemand berichten würde, wie das beim aktuellen Safari besser funktioniert. Und auch auf ipad und iphone.

    Gruss

    MrMurphy

Ähnliche Themen

  1. Dürrenmatts "Der Besuch der alten Dame" und Sophokles' "Ödipus Tyrannos"
    Von Unregistriert im Forum Off Topic und Quasselbox
    Antworten: 3
    Letzter Beitrag: 21.01.2010, 22:22
  2. menü "rutsch runter"?!
    Von freakincage2008 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 15.05.2008, 13:37
  3. Problem mit bild/menü im "header"
    Von quib im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 27.12.2007, 17:49
  4. Java Menü - "Steuerelement aktivieren"
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 16.09.2007, 19:44
  5. Vertikales Java Menü "verankern"
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 14.08.2004, 13:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •