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.470   Beiträge: 427.807   Mitglieder: 28.041   Aktive Mitglieder: 160
                Willkommen an unser neuestes Mitglied, WarrenPleve.

                Online-Benutzer

                Einklappen

                204 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 200.

                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

                • daniel5959
                  Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
                  Hallo,

                  die Stiftung Warentest hat auch Cloud-Dienste getestet - siehe (Reihefolge nach der Bewertung)



                  Den Artikel online lesen (Einzelabruf kostet 2,50 Euro - auch Flatrate pro Monat oder Jahr möglich) unter

                  >> https://www.test.de/Cloud-Die...
                  Gestern, 18:07
                • arnego2
                  Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
                  Von Google würde ich die Finger lassen wenn dir deine Daten lieb sind. Seit Google die AGB umgeschrieben hat gehören deine Daten Google....
                  Gestern, 15:46
                • Localfu
                  Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
                  Also ich kann nur aus eigener Erfahrung sprechen, aber bei Google Drive war ich bis jetzt sehr gut aufgehoben. Google verwendet für EU-Kunden meist Server innerhalb der EU. Wenn du dir sicher sein möchtest, dann verschlüssel vorher die Daten. Gruss Localfu
                  Gestern, 13:31
                • justme
                  Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
                  Hallo, ich kenne mit mit Cloud usw nicht direkt aus.
                  Aber ist das sowas hier ?

                  VG
                  Gestern, 12:14
                • Chaosmaster
                  Homepage mit Datenbank
                  Hallo zusammen, ich bin relativ neu was das Thema angibt und habe eine Frage..
                  Ich habe mich bereits mit WIX und jImdoo auseinader gesetzt. WIX hat FAST alles was ich brauche..
                  Ich möchte eine art Community-Spiel erstellen..


                  Im einzelnen habe ich folgendes vor:
                  ...
                  22.08.2019, 18:54
                • arnego2
                  Antwort auf Homepage mit Datenbank
                  Sich mit den Programmen auseinanderzusetzen bedeutet für mich nur das du mit ihnen umgehen kannst.
                  Programmieren ist eine andere Schiene da musst du Code kennen, ihn schreiben können damit er Funktionen mitunter und mit mithilfe von Databanken ausführen kann.

                  Selbst wenn Microsoft...
                  23.08.2019, 16:31
                • Jaydee
                  Myfanclub
                  Myfanclub Plugin Wordpress

                  Wir arbeiten aktuell an einem Plugin für Wordpress, was es Vereinen und Fanclubs erleichtern soll, Dinge zu automatisieren im Club.
                  Wir promoten gerne das Wordpress Plugin "myfanclub", welches wir aktuell auch selbst in Betrieb haben.
                  ...
                  22.08.2019, 12:59
                • daniel5959
                  Antwort auf Myfanclub
                  Hallo,

                  die Riesengrafik der Pseudo-Produktverpackung mit der Aussage "Das offizielle WordPress Plugin" hatte bei mir ein negatives Bauchgefühl ausgelöst, denn für die Aussage konnte ich keinerlei Beständigung finden. Auch wurde das Plugin scheinbar noch nicht in den deutschen...
                  23.08.2019, 15:58
                • Localfu
                  Antwort auf Homepage mit Datenbank
                  Hi Chaosmaster,
                  ich weiß nicht inwieweit du in Wix Datenbanken erstellen kannst, aber diese beschriebe Funktionen sind rein nur mit Programmierung zu leisten. Wix und Jimdoo sind nicht dafür ausgelegt, um so indivudell Seiten zu erstellen sowie du es hier geschrieben hast. Dafür benötig man...
                  23.08.2019, 13:52
                • arnego2
                  Antwort auf Soziale Netze und ihr Nutzen
                  Neuerdings gibt es eine Erweiterung der Sozialen Netze, ich vermute das es darum geht das die Seite dem Eigner gehört....
                  21.08.2019, 21:38
                Lädt...
                X