Navigation Dropdown-Menü responsive für alle Media-Queries

25.05.2021 20:50

Philoo
#1

Hallo,

nach langem Tüffteln habe ich ein Dropdown-Menü erstellen können.
Allerdings sieht das Menü auf einem Tablet (iPad) im Hochformat und einem Handy (iPhone) im Querformat total ungeordnet aus. Die einzelnen Elemente werden nicht mehr untereinander sondern teilweise nebeneinander dargestellt.
Leider wird mir bei Jimdo auf der mobilen Ansicht alles richtig dargestellt, in Wirklichkeit ist dies aber nicht der Fall.

Hat jemand einen Tipp, wie ich per CSS auch für diesen @media-Sektor die Menüs geordnet darstellen kann, so wie im Hochformat auf dem Handy?

Besten Dank.

URL: htttps://dbsreck.jimdofree.com/

Folgende Codes habe ich für das Menü erstellt. Schießt da mir da irgendetwas in die Quere???

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
<style type="text/css">
/*<![CDATA[*/
.jtpl-mobile-navigation {
    top: 100px;
    box-shadow: 0 0 30px 
}
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
    .jtpl-mobile-navigation > div:nth-child(1) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1)
    .navigation-colors--transparency a, .navigation-colors--transparency a:link, .navigation-colors--transparency a:visited {
    color: #000;
}
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px) {
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
ul li {
  display: block;
  position: relative;
  float: left;
}
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px) {
li ul { display: none; }
 
ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
}
ul li a:hover 
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px) {
li:hover > ul {
  display: block;
  position: absolute;
}
 
li:hover li { float: none; }
 
li:hover a 
 
li:hover li a:hover 
 
.main-navigation li ul li { border-top: 0; }
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px) {
ul ul ul {
  left: 100%;
  top: 0;
}
 /*]]>*/
</style>
 

<style>
/* <![CDATA[ */
 @media (min-width:1000px) {
      .cc-nav-level-0 a:link, .cc-nav-level-0 a:visited {margin-right: 3px !important;}
 
.cc-nav-level-1 a:link, .cc-nav-level-1 a:visited {width: 20.5rem !important; margin: 5px !important; padding: 4px 10px !important;}
 
     .cc-nav-level-1 a:link, .cc-nav-level-1 a:visited {width: 20.5rem !important; margin: 5px !important; padding: 15px 15px !important;}
 /*]]>*/
</style>
 

<style>
/* <![CDATA[ */
@media only screen and (device-width: 768px) {
.jtpl-navigation .j-nav-level-0 {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 90px;
}
}
/*]]>*/
</style>
 
 

Antworten

Beitrag melden

07.08.2025 08:53

az_
#2

az_

Dropdown-menüs gibt es auch bei Jimdo, Du findest die Übersicht unter https://jimdo.design. Die sind dann schon mobil optimiert...

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html