Ankündigung

Einklappen
Keine Ankündigung bisher.

Dropdown-Liste mit eigenen Grafiken

Einklappen

Neue Werbung 2019

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

  • Dropdown-Liste mit eigenen Grafiken

    Hallo Leute,

    wie der Titel schon sagt, möchte ich eine Dropdown-Liste(kein Menü !!!) selber gestalten. Dazu gibt es viel im Netz und ich bin jetzt schon ein paar Schritte weiter.
    Hier kurz nochmal, was genau ich möchte:



    Mit folgendem blende ich den Button mit dem Pfeil beim normalen DorpDown aus:
    Code:
    #idvondropdown
    {
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    Mit
    Code:
    #idvondropdown
    {
        background: none;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    ist die Dropdownliste nicht mehr zu sehen. Soweit klappt es auch. Das eigentliche Problem ist die List-Box an sich.
    Wenn ich jetzt meine Grafik(siehe "Standard-Aussehen") als Button an der Stelle einfüge, so ist es ok. Nur wie kann ich
    den Hintergrund der Liste ausblenden? Diese ist immernoch da.


    Wie man erkennen kann, ist die Dropdown an sich nicht sichtbar. Die Liste jedoch schon. Wie kann ich diese ausblenden???

  • #2
    Hallo,

    so ganz kann ich dein Problem nicht nachvollziehen.

    Um Möglichkeiten für das Auf- und Zuklappen des Menüs zu finden kannst du nach "dropdown menü" googeln. Da finden sich jede Menge Beispiele und Anleitungen.

    Wobei du darauf achten solltest dass die von dir ausgewählte Lösung auch Touchscreen-Geräte berücksichtigt und dass die mit dem hover-Effekt nichts anfangen können.

    Die CSS-Eigenschaft "appearance" befindet sich zur Zeit und wahrscheinlich noch sehr lange in der Testphase. So werden gleiche Angaben von den unterschiedlichen Browsern zur Zeit noch unterschiedlich angezeigt. Zudem gibt es bereits praktikable Lösunen um das Aussehen von Elementen ähnlich anzupassen, zum Beispiel mit Hilfe von linear-gradient. Von daher genießt die Weiterentwicklung von appearance keine Priorität.

    Gruss

    MrMurphy

    Kommentar


    • #3
      Zitat von MrMurphy Beitrag anzeigen
      Hallo,

      so ganz kann ich dein Problem nicht nachvollziehen.

      Um Möglichkeiten für das Auf- und Zuklappen des Menüs zu finden kannst du nach "dropdown menü" googeln. Da finden sich jede Menge Beispiele und Anleitungen.
      Ich habe auch schon vieles mit Dropdown-Menüs gesehen. Das könnte ich auch umsetzen, jedoch möchte ich, das sich bei einer Auswahl auch die Anzeige (z.b. von "Bitte auswählen" auf "Option 2")
      ändert. Soweit ich das jetzt richtig gesehen habe, müsste ich dafür bei Dropdown-Menüs die Seite neu laden, da dort ja mit Verlinkungen gearbeitet wird. Oder ich müsste es mit
      Javascript machen, was ich aber nicht möchte, da es bei vielen Deaktiviert ist.

      Zitat von MrMurphy Beitrag anzeigen
      Wobei du darauf achten solltest dass die von dir ausgewählte Lösung auch Touchscreen-Geräte berücksichtigt und dass die mit dem hover-Effekt nichts anfangen können.

      Die CSS-Eigenschaft "appearance" befindet sich zur Zeit und wahrscheinlich noch sehr lange in der Testphase. So werden gleiche Angaben von den unterschiedlichen Browsern zur Zeit noch unterschiedlich angezeigt. Zudem gibt es bereits praktikable Lösunen um das Aussehen von Elementen ähnlich anzupassen, zum Beispiel mit Hilfe von linear-gradient. Von daher genießt die Weiterentwicklung von appearance keine Priorität.
      Das mit dem Touchscreen ist erstmal nicht so wichtig, da es erstmal nur eine persöhnliche Website für mich und freunde sein wird...
      "linear-gradient" ist hier nicht das richtige. Das Bild oben ist nur ein Beispiel, damit ihr versteht, was ich meine. Meine richtige Dropdown-Liste soll mit echten
      Grafiken, auch für die einzelnen Optionen, erstellt werden.

      Noch kurz zu meinem Problem.:
      Auf dem zweiten Bild siehst du ja, dass Option 2(ganz oben, wo die eigentliche Dropdown ist) keinen Hintergrund hat. Jetzt möchte ich auch den unteren Teil
      mit den Optionen ohne Hintergrund haben, damit ich auch dort meine eigene Grafik einsetzen kann.
      Ich möchte also die ganze Standard Dropdown-Liste ausblenden, um sie mit meinen eigenen Grafiken zu versehen.

      Wie gesagt. Das Auf- und Zuklappen an sich ist nicht das Problem an den Dropdown-Menüs. Die Menüs sind aber eher Verlinkungen und die Auswahl wird nicht einfach, wie bei einem
      Formular(Dropdown-Liste) als Auswahl angezeigt. Ich brauche keine Verlinkung oder so. Die Funktionalität einer Dropdown-LISTE ist schon genau das,
      was ich möchte, jedoch halt mit komplett eigenen Grafiken.

      Kommentar


      • #4
        Hallo,

        damit bin ich leider überfordert. Hoffentlich kann dir jemand anders weiterhelfen.

        Wenn du eine Lösung mit Grafiken wünschst solltest du diese aber auch den Leuten, die dir helfen möchten, zur Verfügung stellen. Eventuell wird dadurch auch deutlicher was du möchtest. Das habe ich nämlich immer noch nicht verstanden. Andere, die dir helfen wollen, könnten vor dem gleichen Problem stehen.

        Gruss

        MrMurphy

        Kommentar


        • #5
          Zitat von MrMurphy Beitrag anzeigen
          Wenn du eine Lösung mit Grafiken wünschst solltest du diese aber auch den Leuten, die dir helfen möchten, zur Verfügung stellen. Eventuell wird dadurch auch deutlicher was du möchtest. Das habe ich nämlich immer noch nicht verstanden. Andere, die dir helfen wollen, könnten vor dem gleichen Problem stehen.
          Hi, An den Grafiken wird es bei den Leuten aber nicht scheitern, da man ja auch genau die Grafik von Bild1 nehmen kann. Das eigentliche Problem ist ja "nur", die Standard-Dropdownliste kommplett auszublenden.

          Hier nochmal etwas detailierter. Eine Dropdownliste sieht ja normal so aus:



          Diese möchte ich jetzt komplett ausblenden(würde so aussehen...)



          und dafür meine Grafiken einsetzen(hier als Beispiel wie das Bild bei meinem ersten Post...)




          Hoffe, damit wären alle Unklarheiten beseitigt. Wenn nicht, dann einfach sagen...

          Kommentar


          • #6
            Keiner ne Idee?

            Ich bin auch schon für Vermutngen und Denkanstöße dankbar. Würde es ganz gerne schaffen...

            Kommentar


            • #7
              Du musst da wohl eine Javascript basierende Lösung nehmen (sowas hier: http://www.jqueryrain.com/demo/jquery-selectbox-plugin/).
              Die Selectbox und die dazugehörige Liste lassen sich kaum bis gar nicht per CSS stylen. Noch dazu ist die Optik stark abhängig vom verwendeten Browser und Betriebsystem.

              Grüße.

              Kommentar


              • #8
                Ich habe es jetzt mit Javascript gemacht(kein JQuery).

                Hier kann jetzt geschlossen werden. Danke an alle, die geholfen haben.

                Kommentar

                Lädt...
                X