Gustav: Dropdown-Menu zur Sprachenerweiterung

Beitrag lesen

Hallo an alle,

ich habe mir die unterschiedlichen Icons in meiner Testumgebung angesehen und zumindest eine Weltkugel lässt sich einigermaßen entschlüsseln. Das Language-Icon ist in dieser Größe eher schwierig, aber ich werde später noch Farbvarianten ausprobieren.

Die details/summary-Navigation habe ich dann gestern eingefügt und so einiges ausprobiert, allerdings bekomme ich es bislang nicht hin, dass Pfeil und Weltkugel wie die übrigen Menu-Einträge einen grauen Rand zeigen. Statt dessen zeigen ausgeklappt nur die einzelnen Sprachangebote jeweils einen grauen Rahmen.

<nav>
  <ul>
    <li><a aria-current="page"><img src="../img/homeS.png" width="18" height="18" alt="home"></a></li>
    <li><a href="../kat1.html">Kategorie1</a></li>
    <li><a href="../kat2.html">Kategorie2</a></li>
    <li><a href="../kat3.html">Kategorie3</a></li>
    <li><details>
		<summary><img src="img/globe.png" width="18" height="18" alt="Globe">
  	 	</summary>
		<a href="../">EN</a>
		<a href="../de/">DE</a>
		<a href="../fr/">FR</a>
		<a href="../es/">ES</a>
		<a href="../pt/">PL</a>
		<a href="../it/">IT</a>
		<a href="../nl/">NL</a>
		<a href="../ru/">RU</a>
		<a href="../po/">PO</a>
		<a href="../jp/">JP | 和</a>
		<a href="../cn/">CN | 中国</a>
	</details></li>
  </ul>
</nav>Quelltext hier

Offenbar sind meine Kenntnisse hier zu begrenzt. Hat jemand von Euch einen Tip, was ich anders machen muss?

Zur Verdeutlichung füge ich hier mal zwei MockUps an, wie es in etwa aussehen sollte.

Test Laptop-Bildschirm

Test Smartphone-Bildschirm

Schöne Grüße, Gustav

0 120

Dropdown-Menu zur Sprachenerweiterung

Gustav
  • barrierefreiheit
  • javascript
  1. 0
    Gunnar Bittersmann
    • design
    • internationalisierung
    1. 0
      klawischnigg
      1. 0
        Tabellenkalk
        1. 1
          kai345
          1. 0
            Gunnar Bittersmann
            1. 0
              Der Martin
              1. 0
                Gunnar Bittersmann
                1. 0
                  klawischnigg
                  1. 0
                    Der Martin
                    1. 0
                      Gunnar Bittersmann
                  2. 0
                    Gunnar Bittersmann
                    1. 0
                      klawischnigg
        2. 0
          klawischnigg
          1. 0
            Der Martin
            • humor
            • sprache
            1. 1
              klawischnigg
  2. 1
    Rolf B
    1. 0
      Gustav
      1. 0
        Gunnar Bittersmann
        • internationalisierung
        • ux
        1. 0
          Gustav
          1. 0
            Der Martin
            1. 0
              Gunnar Bittersmann
            2. 0
              JürgenB
              1. 0
                Gunnar Bittersmann
                1. 0
                  JürgenB
                  1. 0
                    Gunnar Bittersmann
                2. 1
                  MudGuard
                  • humor
                  1. 1
                    Gunnar Bittersmann
                  2. 0
                    Tabellenkalk
                    1. 0
                      MudGuard
                    2. 0
                      Rolf B
                      1. 0
                        Tabellenkalk
                        • grusel
                        • humor
                    3. 0
                      Gunnar Bittersmann
                      • grusel
                      • humor
                3. 1
                  Mitleser 2.0
                  1. 0
                    Mitleser 2.0
                    1. 0
                      Gunnar Bittersmann
                  2. 0
                    Gunnar Bittersmann
                    1. 0
                      JürgenB
                      1. 0
                        Der Martin
                        1. 0
                          Matthias Apsel
                          1. 0
                            Mitleser 2.0
                            1. 0
                              Rolf B
                              1. 0
                                Matthias Apsel
                            2. 0
                              Gunnar Bittersmann
                              1. 0
                                JürgenB
                                1. 0
                                  Rolf B
                                  1. 0
                                    JürgenB
                                    1. 0
                                      JürgenB
                                      1. 0
                                        Matthias Apsel
                                      2. 0
                                        Tabellenkalk
                                      3. 0
                                        Rolf B
                                        1. 0
                                          Tabellenkalk
                                          1. 0
                                            Rolf B
                                        2. 1
                                          kai345
                                        3. 0
                                          JürgenB
                                          1. 0
                                            Matthias Apsel
                                          2. 0
                                            Der Martin
                                    2. 0
                                      Matthias Apsel
                                      1. 0
                                        JürgenB
                                    3. 0
                                      JürgenB
                                      1. 0
                                        Rolf B
                                        1. 0
                                          JürgenB
                                          1. 0
                                            Rolf B
                                            1. 0
                                              JürgenB
                                              1. 0
                                                Matthias Apsel
                                              2. 0
                                                Rolf B
                                                1. 0
                                                  JürgenB
                                                  1. 1
                                                    JürgenB
                                                    1. 0
                                                      Mitleser 2.0
                                2. 2
                                  Mitleser 2.0
                    2. 0
                      Mitleser 2.0
                      1. 0
                        Tabellenkalk
              2. 0
                Matthias Apsel
              3. 0
                Gustav
                1. 0
                  JürgenB
                2. 0
                  Gunnar Bittersmann
                  1. 0
                    JürgenB
                    1. 0
                      Gustav
                      1. 1
                        Matthias Apsel
                        1. 1
                          Matthias Apsel
                          • sonstiges
                          1. 0
                            Gustav
                            1. 0
                              Rolf B
                              1. 0
                                Gustav
                                1. 0
                                  Rolf B
                                  1. 0
                                    Gunnar Bittersmann
                                    • css
                                    1. 0
                                      Gustav
                                  2. 0
                                    Gustav
                                    1. 0
                                      Rolf B
                                      1. 0
                                        Matthias Apsel
                                      2. 0
                                        Gustav
                                        1. 0
                                          Gunnar Bittersmann
                                        2. 0
                                          Rolf B
                                          1. 0
                                            Gustav
                                    2. 1
                                      JürgenB
                                      1. 0
                                        Gustav
                                        1. 0
                                          JürgenB
          2. 0
            Gunnar Bittersmann
  3. 0
    Linuchs
    • sprache
    1. 0
      Der Martin
      1. 0
        JürgenB
        1. 0
          Linuchss
    2. 1
      Gunnar Bittersmann
      • internationalisierung
      • sprache
      1. 0
        Gunnar Bittersmann
      2. 0
        Der Martin
        1. 0
          Gunnar Bittersmann
          • html
          • internationalisierung
          • sprache
          1. 0
            Der Martin
            1. 0
              Gunnar Bittersmann
              • internationalisierung
              • sprache
              • ux
              1. 0
                Der Martin
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Der Martin
                    1. 0
                      Gunnar Bittersmann
              2. 0
                Tabellenkalk
          2. 0
            Matthias Apsel
            1. 0
              Gunnar Bittersmann
              • browser
              • html
              • internationalisierung
    3. 0
      Gunnar Bittersmann
      • sprache
      • typografie
      1. 0
        Linuchs
      2. 0
        klawischnigg
        1. 0
          Gunnar Bittersmann
          1. 0
            klawischnigg
            1. 0
              Gunnar Bittersmann