Ankündigung

Einklappen
Keine Ankündigung bisher.

Aufklappbares Menü

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Aufklappbares Menü

    Hallo,

    ich bin absoluter Anfänger und probiere grad bisschen mit den Möglichkeiten von HTML/CSS rum (wenn möglich ohne PHP/JS, das kommt später).

    1. ich möchte ein aufklappbares Menü erstellen. (Anleitung habe ich von hier) Bis zur 2. Ebene funktioniert es, aber wenn ich einen noch tieferen Punkt öffnen möchte (A11) wird der Punkt nur ganz kurz angezeigt, aber das komplette Menü schließt sich kurz darauf:

    Code:
    <nav>
        <ul>
            <li id="A">
                <a href="#A">A</a>
                <ul>
                    <li id="A1">
                        <a href="#A1">A1</a>
                        <ul>
                            <li>A11</li>
                        </ul>
                    </li>
                </ul>
            </li>
            
        </ul>
    </nav>
    Code:
    nav ul li ul{
        max-height: 0px;
        overflow: hidden;
        
        transition: max-height 0.3s ease-out;
    }
    nav ul li:target > ul {
        max-height: 200px;
    }
    2.
    Wie erstelle ich ein Menü, das "über" dem Hauptfeld liegt (bzw. wonach muss ich googeln)? Bsp. das Menü, das hier über einen hover-Effekt angezeigt wird.


  • #2
    Hallöchen,

    1. rührt daher, dass nur ein Element fokussiert und somit via :target angesprochen werden kann. Wenn sich der Fokus ändert, greifen auch die Regeln für die vorher fokussierten Elemente nicht mehr.

    2. nennt sich Dropdown-Menü und funktioniert fast ähnlich.

    Viele Grüße,
    lotti

    Kommentar


    • #3
      Es gibt hierbei zwei unterschiede:

      1. Dropdown muss angeklickt werden, damit das Menü heraus fährt, bleibt dann aber auch stehen bis man wieder klickt; Siehe auch hier: http://getbootstrap.com/components/#dropdowns

      2. Pulldown muss nur mit der Maus darüber gefahren werden, welches beim herausfahren auch wieder verschwindet; Hier kannst du das nehmen: http://users.tpg.com.au/j_birch/plug...sh/examples/#a

      Führen zwar beide schon etwas weiter, aber das Pure CSS startet immer mit Hover Menüs, was du dort ein wenig nachschauen kannst, besonders bei 2.
      Homepage: www.jplace.de

      Github: JohnnyDevNull

      Kommentar


      • #4
        Zitat von JPlace Beitrag anzeigen
        1. Dropdown muss angeklickt werden
        2. Pulldown muss nur mit der Maus darüber gefahren werden
        Wie kommst du darauf?

        Kommentar


        • #5
          Zitat von lottikarotti Beitrag anzeigen
          Wie kommst du darauf?
          Habe ich mal irgendwo in der Vergangenheit gelernt, wenn nicht sogar noch in der Schule... mittlerweile sagen aber größtenteils alle Dropdown zu jeglicher Art Menü, die mittels Hover, Klick oder Tastendruck geöffnet werden.
          Homepage: www.jplace.de

          Github: JohnnyDevNull

          Kommentar


          • #6
            Zitat von JPlace Beitrag anzeigen
            Habe ich mal irgendwo in der Vergangenheit gelernt, wenn nicht sogar noch in der Schule... mittlerweile sagen aber größtenteils alle Dropdown zu jeglicher Art Menü, die mittels Hover, Klick oder Tastendruck geöffnet werden.
            Ok. Es gibt imho auch keinen Grund dies nicht zu tun.

            Kommentar


            • #7
              Pulldown und Dropdown beschreiben einfach nur das Verhalten eines Menüs, nicht aber bei welcher Aktion oder Event das Verhalten angestoßen wird.

              Was die dritte Ebene angeht, so würde ich mal auf :target ganz verzichten.
              Code:
              UL LI:hover > UL { display:inline-block; }
              zeigt bspw. unabhängig der Ebene für jedes UL als Childnode eines LI, dieses als inline-block an.
              Competence-Center -> Enjoy the Informatrix
              PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

              Kommentar


              • #8
                Zitat von Arne Drews Beitrag anzeigen
                Pulldown und Dropdown beschreiben einfach nur das Verhalten eines Menüs, nicht aber bei welcher Aktion oder Event das Verhalten angestoßen wird.
                Sehe ich auch so.

                Kommentar


                • #9
                  Hallo,

                  danke für die Antworten, mit dem Begriff Dropdown habe ich das passende gefunden.

                  Momentan habe ich nur noch das Problem, verschiedene Teile unabhängig voneinander einzubinden.
                  Ich habe beispielsweise ein TopMenu, in dem ich ul.width = 1000px setze und ein ein SideMenu, in welchem ul.width nur 200px betragen soll.

                  Binde ich beide Dateien separat über include ein, sieht alles aus, wie es soll, sobald aber beide eingebunden werden, scheinen sich die Deklarationen gegenseitig zu behindern. Meine Idee wäre jetzt, in jeder separaten Datei einen Div drum herum zu machen und im CSS immer die ID des Divs davor zusetzen.
                  Geht das nicht einfacher?
                  Im Desktop-Bereich (C#/WPF) kann ich verschiedene UserControls einbinden, die als separate Objekte behandelt werden, auch wenn zufällig intern irgendwelche Deklarationen gleich sind.

                  Kommentar


                  • #10
                    sobald aber beide eingebunden werden, scheinen sich die Deklarationen gegenseitig zu behindern.
                    Das kannst Du sicher genauer beschreiben, jedenfalls kann ich mir darunter jetzt nix vorstellen.
                    Vielleicht mit kurzen Fiddle oder Screenshot?
                    Competence-Center -> Enjoy the Informatrix
                    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                    Kommentar


                    • #11
                      Ok, ich probiere mein Problem mal mit Bild zu erklären.

                      Links der gelbe Bereich ist ein div, wo ungefähr die Sidebar hin soll. Oben, wo noch n bisschen grün durchschimmert, ist ein div, wo ungefähr das HeadMenu hin soll.
                      Beide Menüs bestehen aus Listen, links sind die Menüpunkte untereinander, oben nebeneinander. (Der grüne Button oben ist kein Teil der Liste).

                      Der Bereich mit dem rechten roten Rand, der hinter dem geschwärzten Bild verläuft, sollte eigentlich über dem Bild sein, allerdings wird hier die Definition der Sidebar-Liste übernommen, wodurch das Menü eben nicht mehr horizontal verläuft, sondern vertikal.

                      Ebenso übernimmt die Sidebar die Textformattierung des HeaderMenus, was auch nicht sein sollte.

                      Die Implementierung sieht so aus:

                      index.php:
                      Code:
                       
                      <div id="navTop"><?php include 'headerMenu.php';?></div>
                      
                      <div id="navLeft"><?php include 'sidebar.php'?>;</div>
                      headerMenu.php: (sidebar.php beinhaltet nur andere Menüpunkte, ist ansonsten aber identisch)
                      Code:
                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                      <html>
                      <head>
                      <link rel="stylesheet" href="headerMenu.css">
                      </head>
                      <body>
                          <nav>
                      <ul class="navTop">
                      	<li><a href="#">Eins</a></li>
                      	<li><a href="#">Zwei</a></li>
                      	<li><a href="#">Drei</a></li>
                      	<li><a href="#">Vier</a></li>
                      	<li><a href="#">Fünf</a></li>
                      	<li><a href="#">Sechs</a></li>
                      </ul>
                      
                      <div id="login">Login</div>
                      <div id="pic"/>
                      </nav>
                      
                      
                      </body>
                      </html>


                      headerMenu.css:
                      Code:
                      *{
                          padding:0px;
                          margin:0px;
                          font-size: 12px;
                          font-family: sans-serif;    
                      }
                      
                      #body{
                          margin:10px;
                          width:960px;
                          height:150px;
                          background-color: rgb(230,230,230);
                      }
                      
                      a{
                          text-decoration: none;
                          color:black;    
                      }
                      a:hover{
                          text-decoration: underline;
                      }
                      
                      ul{
                         list-style: none; 
                         background-color:blue;
                      }
                      
                      .navTop li{
                          border: 1px solid white;
                          background-color: rgb(230,230,230);
                          float:left;
                          padding:0.9em;
                          margin:0em;
                      }
                      
                      #login{
                          float:right;   
                          padding:0.5em;
                          margin:0.7em 0em 0em 0em;    
                          
                          background-color: green;
                          color:white;   
                      }
                      #pic{
                          width:960px;
                          height:154px;
                          background-image: url(pic.png);
                          position:relative;
                          top:40px;
                      }
                      sidebar.css:
                      Code:
                      *{
                          font-family: sans-serif;
                          font-size: 12px;
                          font-weight: bold;
                          color:green;
                      }
                      
                      a{
                          text-decoration: none;
                      }
                      a:hover{
                          text-decoration: underline;
                      }
                      
                      ul{
                          list-style: none;    
                          float:left;
                          width:200px;
                          background-color: red;
                      }
                      
                      ul li{
                          background:rgb(230,230,230);
                          border:2px solid white;
                          width:12em;
                          
                          padding:0.5em 1em 0.5em 1em;
                      }
                      
                      #lower{
                          position:absolute;
                          top:300px;
                      }
                      Angehängte Dateien

                      Kommentar

                      Lädt...
                      X