Ankündigung

Einklappen
Keine Ankündigung bisher.

Transition hover mit Untermenü

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

  • Transition hover mit Untermenü

    Hallo an alle,

    ich habe bei meiner Seite ein Untermenü. Soweit geht es, aber ich möchte das etwas langsamer ausfahren (sie Beispiel Kontakt) aber nicht wie hier erst mit den Menüpunkten, sondern wenn ich auf den Hauptmenüpunkt komme, also schon beim hover.

    Leider finde ich nicht die richtige Einstellung.
    Das ist meine bisherige CSS, der wie ich denke nicht stimmen kann.
    Kann mir dabei jemand helfen das anzupassen?

    Code:
    nav{
    width:800px;
    height:65px;
    margin: auto;
    z-index:600;
    }
    #navi li{
    float:left;
    display:inline;
    font-family: 'Roboto', sans-serif;
    font-size : 0.9em;
    letter-spacing: 0.1em;
    text-align:center;
    }
    #navi ul{
    width:150px;
    list-style: none;
    position: absolute;
    }
    #navi li ul{
    display:none;
    transition: all  0.5s ease-in;
    }
    #navi li ul li {
    float:left;
    width:150px;
    padding: 0;
    text-align:left;
    background: #262626;
    }
    #navi li a{
    margin: auto;
    padding:20px 19px 15px 19px;
    text-decoration:none;
    display:block;
    color:#f8fad2;
    }
    #navi li ul li a{
    padding:10px 0 10px 20px;
    text-decoration:none;
    display:block;
    }
    #navi li:hover ul{
    display:block;
    }
    #navi  li ul:hover {
    padding-top: 10px;
    }
    #navi li a:hover{
    color: #8F8F8F;
    }
    .current a{
    border-bottom: 1px solid #f8fad2;
    }
    .current a:hover{
    border-bottom: 1px solid #8F8F8F;
    }
    Liebe Grüße
    Andre
    Wir gestalten ihre Webseite

    CO-Webdesigen.de
    CO-Webdesign bei Facebook

  • #2
    AW: Transition hover mit Untermenü

    aber ich möchte das etwas langsamer ausfahren (sie Beispiel Kontakt)
    Soweit klar. Gängige Effekte sind Einfaden und nach unten ausrollen. Mache dich mit CSS transition vertraut, damit kannst Du so etwas realisieren.

    aber nicht wie hier erst mit den Menüpunkten, sondern wenn ich auf den Hauptmenüpunkt komme, also schon beim hover.
    Das verstehe ich leider nicht richtig: Ich nehme an, im Endausbau werden mehrere Menüpunkte ein Untermenü bekommen. Dann sollte dieses doch jeweils nur ausfahren, wenn man den betr. Menüpunkt hovert? Oder möchtest Du alle Untermenüs gleichzeitig sichtbar machen?

    Kommentar


    • #3
      AW: Transition hover mit Untermenü

      Hallo,

      ich weiß, das ist meist schwer zu verstehen, was ich möchte, aber ich versuche es noch einmal.

      Also: Wenn man mit der Mouse auf Kontakt geht, geht ein Menü auf. Soweit so gut.

      Wenn man dann auf den ersten, zweiten, usw. Menüpunkt geht bewegt es sich langsam nach unten.

      Und diese Bewegung möchte ich so haben, dass wenn man auf Kontakt geht das Menü langsam aufgeht, aber keine Ziehharmonika, sondern einfach nur nicht so schnell wie es sonnt ist.

      Ich hoffe das es jetzt verstanden wurden ist. Mit CSS transition habe ich mich schon etwas beschäftigt, finde aber nicht den richtigen Ansatz.

      Liebe Grüße
      Andre
      Wir gestalten ihre Webseite

      CO-Webdesigen.de
      CO-Webdesign bei Facebook

      Kommentar


      • #4
        AW: Transition hover mit Untermenü

        Ist es das, was Du mit "keine Ziehharmonika" meinst:
        http://nettuts.s3.amazonaws.com/699_...vCode/nav.html
        Meinst Du dann einfaden so wie hier:
        http://metinsaylan.com/demos/css3-tr...-dropdown.html
        Zuletzt geändert von Sempervivum; 12.10.2016, 23:08.

        Kommentar


        • #5
          AW: Transition hover mit Untermenü

          Hallo,

          ich weiß nicht nach was ich suchen muss, und du – der erste Link ist genau das richtige, darf zwar nicht transparent sein, aber das lässt sich doch bestimmt einstellen.

          Jetzt weiß ich nur nicht wie man sowas macht, auf meine Navi (siehe Code). Könntest du so lieb sein und mir helfen? Ich danke dir.

          Liebe Grüße
          Andre
          Wir gestalten ihre Webseite

          CO-Webdesigen.de
          CO-Webdesign bei Facebook

          Kommentar


          • #6
            AW: Transition hover mit Untermenü

            Na sowas, ich dachte, das ist das, was Du mit Ziehharmonika meinst und nicht haben willst ;-)
            Über den Bau von Drop-Down-Menüs gibt es so viel im Netz, dass es nicht notwendig ist, es zu erklären. Schau dir z. B. mal dieses an:
            http://www.newmediacampaigns.com/blo...sitions-part-2

            Kommentar


            • #7
              AW: Transition hover mit Untermenü

              Hallo,

              danke für deine Hilfe. Ja es gibt zu diesem Thema viel im Netz, ich habe auch eins, aber ich nutze das sonst selten und meine Einstellungen nutze ich seit Jahren, außerdem sind die Seiten jetzt schon Responsive eingerichtet, da ich nicht alles auf einmal machen will, sondern gleich jede Seite, da habe ich weniger Arbeit. Ich werde mir aber mit Sicherheit das so aufheben und bei der nächsten Gelegenheit ausprobieren. Bei meinem Code lässt sich das, wie ich gesehen habe nicht einfach so einbauen. Ich danke dir für deine Hilfe.

              Liebe Grüße
              Andre
              Wir gestalten ihre Webseite

              CO-Webdesigen.de
              CO-Webdesign bei Facebook

              Kommentar


              • #8
                AW: Transition hover mit Untermenü

                Bei meinem Code lässt sich das, wie ich gesehen habe nicht einfach so einbauen.
                Kann ich so nicht bestätigen: Ich habe deine Seite herunter geladen und konnte mit zwei Änderungen in der CSS-Datei style.start.css problemlos das Herunterfahren realisieren:
                HTML-Code:
                #navi li ul {
                    max-height: 0px;
                    transition: all 2s ease-in;
                    overflow: hidden;
                }
                HTML-Code:
                #navi li:hover ul {
                    max-height: 200px;
                }

                Kommentar

                homepage-forum.de - Hilfe für Webmaster! Statistiken

                Einklappen

                Themen: 56.468   Beiträge: 427.793   Mitglieder: 28.034   Aktive Mitglieder: 182
                Willkommen an unser neuestes Mitglied, GeorgeApala.

                Online-Benutzer

                Einklappen

                225 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 225.

                Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

                Die neuesten Themen

                Einklappen

                SimpleSite

                Die neuesten Beiträge

                Einklappen

                Lädt...
                X