Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS DropdownMenu Problehme mit dem focus Attribut

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

  • CSS DropdownMenu Problehme mit dem focus Attribut

    Guten Morgen,

    Seit langen sitze ich mal wieder an einem neuen Webdesign.
    Ich möchte auch nicht lang Schwafeln und komme gleich zum Punkt.

    Und zwar habe ich mir ein DropdownMenu mit Css gebastelt,
    dieses öffnet und schließt sich auch so wie es soll.

    Nun habe ich in diesem Dropdown ein Formular für nen Login,
    doch leider bekomme ich es nicht hin das sobald ein input:focus in
    der CSS datei eintrage ist das das solang dieses input den focus hat das
    DropdownMenu geöffnet bleibt.

    Das Einzigste was passiert sobald man aus diesem dropdown mit der
    Maus kommt sich dieses Dropdown sich schließt und nur der input seinen
    focus behällt ich also blind weiter schreiben könnte.

    Vileicht hab ihr ja eine Idee wie ich dies umsetzen könnte.

    P.s Falls ich euch meinen Code noch mit zu posten soll einfach bescheid sagen.

    Gruß Waldi


  • #2
    Hallo

    Am sinnvollsten wäre ein Link zu der Seite. Beim Zeigen des Quelltextes lassen Fragesteller gerne wichtige Teile weg, so dass erst mühsam mehrmals nachgefragt werden muss.

    Insgesamt sind Drop-Down-Menüs veraltet. Zum einen sind sie meist nicht barrierefrei. Es hat sich zusätzlich gezeigt, dass versteckte Inhalte von vielen Besuchern nicht erkannt werden.

    Zum anderen können sie häufig nicht mit Touchscreen-Displays bedient werden und damit können die Besucher die verlinkten Seiten überhaupt nicht erreichen.

    Gruss

    MrMurphy

    Kommentar


    • #3
      Hi danke danke für die Antwort.

      Da ich im Moment keinen Webspace habe und ich mir auch nicht deswegen einen Kostenlosen Registrieren möchte muss es Leider hier per Code gehen.
      P.s Keine Angst der Code ist Komplett.

      index.html
      HTML-Code:
      <!DOCTYPE html>
      <html lang="de">
          <head>
              <title>{title}</title>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link rel="stylesheet" type="text/css" href="templates/default/css/index.css" />
          </head>
          <body>
              <div id="menu-wrapper">
                  <ul class="nav">
                      <li>
                          <a href="#">Anmelden/Registrieren</a>
                          <div>
                              <div class="nav-column" id="first">
                                  <ul>
                                      <li>
                                          <form method="POST" name="login">
                                              <fieldset>
                                                  <legend>Anmelden</legend>
                                                  <li><label for="mail">E-Mail</label></li>
                                                  <li><input id="mail" type="text" name="mail" /></li>
                                                  <li><label for="password">Password</label></li>
                                                  <li><input id="password" type="password" name="password" /></li>
                                                  <li><input type="checkbox" name="savelog" /> Angemeldet Bleiben</li>
                                                  <li><input type="submit" name="submit" value="Anmelden" /></li>
                                              </fieldset>
                                          </form>
                                      </li>
                                  </ul>
                              </div>
                          </div>
                      </li>
                  </ul>
              </div>
          </body>
      </html>
      index.css
      PHP-Code:

      /* Reset */
      bodyhtml{
          
      margin0;
          
      padding0;
          
      background-color#f2f2f2;
      }

          .
      nav,
          .
      nav a,
          .
      nav ul,
          .
      nav li,
          .
      nav div,
          .
      nav form,
          .
      nav input {
          
      margin0;
          
      padding0;
          
      bordernone;
          
      outlinenone;
      }

      .
      nav a text-decorationnone; }

      .
      nav li { list-stylenone; }

      /* Menu Container */
          
      .nav {
          
      displayinline-block;
          
      positionfixed;
          
      cursor: default;
          
      z-index500;
           
      width100%;
           
      min-width1080px;
           
      /* Gradiant Farbverlauf */
           
      background#45484d;
           
      background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%);
           
      background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%);
           
      backgroundlinear-gradient(to bottom,  #45484d 0%,#000000 100%);
           
      filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='#45484d'endColorstr='#000000',GradientType=);    
           
      border-bottom1px solid rgba(125,185,232,255);
           
      box-shadow0.125em 0.125em 0.25em -0.125em rgba(125,185,232,255);
      }

      /* Menu List */
         
      .nav li {
          
      displayblock;
          
      floatright;
      }

      /* Menu Links */
         
      .nav li {
          
      positionrelative;
          
      displayblock;
          
      z-index510;
          
      height48px;
          
      padding0 20px;
          
      line-height48px;
          
      font-familyHelveticaArialsans-serif;
          
      font-weightbold;
          
      font-size13px;
          
      color#fcfcfc;
          
      text-shadow0 0 1px rgba(0,0,0,.35);
          
      background#45484d;
          
      background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%);
          
      background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%);
          
      backgroundlinear-gradient(to bottom,  #45484d 0%,#000000 100%);
          
      filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='#45484d'endColorstr='#000000',GradientType=);

          
      border-left1px solid #4b4441;
          
      border-right1px solid #312a27;

          
      -webkit-transitionall .3s ease;
          -
      moz-transitionall .3s ease;
          -
      o-transitionall .3s ease;
          -
      ms-transitionall .3s ease;
          
      transitionall .3s ease;
      }

      .
      nav li:hover {
          -
      background#4b4441;
          
      background: -moz-linear-gradient(top,  rgba(30,87,153,10%, rgba(125,185,232,0100%);
          
      background: -webkit-linear-gradient(top,  rgba(30,87,153,10%,rgba(125,185,232,0100%);
          
      backgroundlinear-gradient(to bottom,  rgba(30,87,153,10%,rgba(125,185,232,0100%);
          
      filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='#1e5799'endColorstr='#007db9e8',GradientType=);

      }

      .
      nav li:first-child {
          
      border-radius3px 0 0 3px;
          
      border-leftnone;
      }

      /* Menu Dropdown */
      .nav li div {
          
      positionabsolute;
          
      displayblock;
          
      width100%;
          
      top48px;
          
      left0;

          
      opacity0;
          
      visibilityhidden;
          
      overflowhidden;

          
      backgroundblack;
          
      color#fff;
          
      border-radius0 0 3px 3px;

          -
      webkit-transitionall .3s ease .15s;
          -
      moz-transitionall .3s ease .15s;
          -
      o-transitionall .3s ease .15s;
          -
      ms-transitionall .3s ease .15s;
          
      transitionall .3s ease .15s;

          
      border-topnone;
          
      border-bottom1px solid rgba(125,185,232,255);
          
      box-shadow0.125em 0.125em 0.25em -0.125em rgba(125,185,232,255);
      }

      /* Mein Ansatz Für den Focus */
         
      .nav li:hover div,
         .
      nav li div input:focus{
         
      opacity1;
         
      visibilityvisible;
         
      overflowvisible;
      }

         
      /* Menu Content Styles */
      .nav .nav-column {
          
      floatleft;
          
      padding-left1%;
          
      padding-right1%;
          
      padding-bottom1%;
          
      border0px solid red;
      }

      .
      nav .nav-column h3 {
          
      margin20px 0 1px 0;
          
      line-height18px;

          
      font-familyHelveticaArialsans-serif;
          
      font-weightbold;
          
      font-size14px;
          
      color#fff;
          
      text-transformuppercase;
      }

      .
      nav .nav-column h3.orange color#ff722b; }

      .nav .nav-column li a {
          
      displayblock;
          
      font-weightbold;
          
      font-familyHelveticaArialsans-serif;
          
      font-size13px;
          
      colorlightslategray;
      }

      .
      nav .nav-column li a:hover {
          
      colororange;
          -
      webkit-box-shadow0px 0px 0px 1px lightgrey;
          -
      moz-box-shadow0px 0px 0px 1px lightgrey;
          
      box-shadow0px 0px 0px 1px lightgrey;
          
      border-radius5px;

          -
      webkit-transitionall .3s ease .15s;
          -
      moz-transitionall .3s ease .15s;
          -
      o-transitionall .3s ease .15s;
          -
      ms-transitionall .3s ease .15s;
          
      transitionall .3s ease .15s;

      In der style.css ist auch Folgendes Kommentar: /* Mein Ansatz Für den Focus */
      Dies ist der Abschnitt mit dem ich nicht Wirklich weiter komme.

      Gruß Waldi

      Kommentar


      • #4
        Nimm doch z.B: JS fiddle um das problem zu zeigen. Du brauchst doch dafür keinen extra webspace!

        Kommentar


        • #5
          Wenn Du Zeit hast, warte auf CSS4, wenn nicht, musst Du per JS eingreifen...

          Kommentar


          • #6
            Ein Anmeldeformular ist zudem keine ungeordnete Liste.

            Kommentar


            • #7
              Wenn du nur mit CSS arbeiten willst, fällt mir spontan nur die Möglichkeit mit :target ein: Dropdown mit :target

              Kommentar


              • #8
                Zitat von lottikarotti Beitrag anzeigen
                Wenn du nur mit CSS arbeiten willst, fällt mir spontan nur die Möglichkeit mit :target ein: Dropdown mit :target
                Daran hatte ich auch schon gedacht, bekomme es aber mit :hover nicht in den Griff.

                Kommentar


                • #9
                  Ich sehe da nur die Möglichkeit mit invalidem HTML zu arbeiten und einen Link um die Inputs herum zu platzieren, um :target zu triggern und das Dropdown damit zu fixieren: Fix Dropdown on input-click

                  Chrome behält den Fokus auf dem Textfeld sogar bei, auch wenn das nicht so aussieht. Man kann also direkt lostippen. Ist aber scheiße. Dann lieber JavaScript.

                  PS: don't use this!

                  Kommentar


                  • #10
                    Vielen für die eure Antworten.

                    Nun muss ich aber nochmal echt blöd Fragen.

                    In wie weit kann ich in CSS auf .nav > li:hover > a Verschachtelungen zugreifen?

                    Denn normaler weiße müsste ich doch bei einem CSS :focus einen zuvor festgelegten Container zugreifen können oder sehe ich das gerade Falsch?

                    Ich frage weil ich ungern mit JavaScript arbeiten möchte bevor ich nicht so eine Möglichkeit Gefunden habe um es Hand zu haben.
                    Desweiteren möchte ich auch keine onClick Events noch sonstiges nutzen.

                    Es geht hier nicht um ein Projekt was ich umsetzen möchte.
                    Ich möchte Lediglich damit zeigen das man Sachen auch ohne JavaScript oder sonstiges lösen kann.

                    Kommentar


                    • #11
                      Zitat von Waldmaus Beitrag anzeigen
                      In wie weit kann ich in CSS auf .nav > li:hover > a Verschachtelungen zugreifen?

                      Denn normaler weiße müsste ich doch bei einem CSS :focus einen zuvor festgelegten Container zugreifen können oder sehe ich das gerade Falsch?
                      Du kannst mit CSS-Selektoren immer nur Kind-Elemente adressieren. Wenn du also vorhast bei input:focus das Elternelement mit display:block zu versehen, muss ich dich enttäuschen.

                      Zitat von Waldmaus Beitrag anzeigen
                      Ich frage weil ich ungern mit JavaScript arbeiten möchte bevor ich nicht so eine Möglichkeit Gefunden habe um es Hand zu haben.
                      Desweiteren möchte ich auch keine onClick Events noch sonstiges nutzen.
                      Ich sehe da eigentlich keine Probleme, sofern die Seite auch ohne JavaScript noch nutzbar ist (Stichwort: Progressive Enhancement).

                      Zitat von Waldmaus Beitrag anzeigen
                      Es geht hier nicht um ein Projekt was ich umsetzen möchte.
                      Ich möchte Lediglich damit zeigen das man Sachen auch ohne JavaScript oder sonstiges lösen kann.
                      Dann kannst du damit sehr gut zeigen, dass nicht alles ohne JavaScript machbar ist

                      Kommentar


                      • #12
                        Zitat von lottikarotti Beitrag anzeigen
                        Dann kannst du damit sehr gut zeigen, dass nicht alles ohne JavaScript machbar ist
                        Vielen dank für die Info dann werde ich mir wohl oder Übel was anderes Einfallen lassen müssen.

                        Kommentar

                        Lädt...
                        X