Jimdo: mobiles Menü ("Hamburger") für Tablet aktivieren?
Hallo Welt,
weiß jemand wie ich per Script oder CSS das mobile Menü ("Burger-Menü") auch schon für Tablets anzeigen lasse, und nicht nur für Smartfones?
Grüße, Tho
2 Antworten
Das Ändern des Übergangspunkts mithilfe zusätzlicher Stile wird leider nicht erfolgreich sein. Ihre Vorlage deaktiviert das mobile Menü mit diesem Code:
@media (min-width: 768px)
.jtpl-mobile-navigation {
visibility: hidden!important;
max-height: 0!important;
padding: 0!important;
}
}
Das Problem ist, dass für den normalen Betrieb des Skripts, das das mobile Menü öffnet, es notwendig ist, dass das mobile Menü die gleichen Eigenschaften hat, jedoch ohne das "!impotant". Daher ist es sinnlos, solche CSS zu überwältigen. Sie kann nur durch Bearbeiten der Style-Dateien rückgängig gemacht werden.
Ich habe Ihre Seite auf einem Laptop gespeichert und alle "767px" und "768px" durch "992px" in den Dateien web.css und layout.css ersetzt. Danach begann das mobile Design bis zu einer Bildschirmbreite von 992 Pixeln zu wirken. Aber nach meinem Verständnis erlaubt Jimdo eine solche Bearbeitung jedoch nicht.
Daher schlage ich drei Optionen für weitere Maßnahmen vor.
- Rufen Sie an den technischen Support.
- Wählen Sie eine andere Vorlage für Ihre Site.
- Taktik ändern.
Welches Problem versuchen Sie mit Hilfe eines Hamburger-Menüs zu lösen?
Wenn das Problem darin besteht, dass das Menü der Website nicht auf den Tablet-Bildschirm passt, empfehle ich folgende Lösungen:
1) Blenden Sie einige Menüelemente mit CSS aus. Mit diesem CSS wird beispielsweise das Element "Home" auf Bildschirmen mit einer Breite von bis zu 1200 Pixeln ausgeblendet. (Dieser Menüpunkt wird übrigens durch das Site-Logo dupliziert.)
@media (min-width: 768px) and (max-width: 1200px) {
#cc-nav-view-1995420068 {
display: none;
}
}
2) Reduzieren Sie die Schriftart der Menüelemente und Einzüge um sie herum:
@media (min-width: 768px) and (max-width: 1200px) {
.jtpl-navigation a:link {
padding-right: 12px;
padding-left: 12px;
margin-left: 3px;
margin-right: 3px;
font-size: 18px;
}
}
3) Logo reduzieren:
@media (min-width: 768px) and (max-width: 1200px) {
.jtpl-logo {
max-width: 200px;
}
}
Sie müssen das Stylesheet suchen und die Medienabfrage ("media query") bearbeiten, die das Erscheinungsbild dieses Menüs steuert.
1) Was ist eine Medienanfrage und was macht sie?
Mit der Medienabfrage können Sie Stile festlegen, die nur für Bildschirme mit einer bestimmten Breite funktionieren.
Einige Websites legen zunächst die Stile für das reguläre Menü fest und fügen dann eine Medienabfrage mit Stilen für das Hamburger Menü hinzu. Auf solchen Websites sieht die Medienabfrage folgendermaßen aus:
@media (max-width: XXXpx) {
/* CSS-Anweisungen */
}
Dies bedeutet, dass auf Bildschirmen mit einer Breite von weniger als XXX Pixel die nach der Medienabfrage in geschweiften Klammern aufgelisteten Stile gelten.
Ein anderer Teil der Websites führt das Gegenteil durch: Zuerst werden die Stile für ein Hamburger-Menü aufgelistet und dann eine Medienabfrage mit Stilen für ein reguläres Menü hinzugefügt. Auf solchen Websites sieht die Medienabfrage folgendermaßen aus:
@media (min-width: XXXpx) {
/* CSS-Anweisungen */
}
2) Was soll geändert werden?
Die in der Medienabfrage angegebene Bildschirmbreite muss erhöht werden.
Medienabfragen für mobile Anwendungen verwenden normalerweise Werte zwischen 500 und 767 Pixel, während Tablets normalerweise Werte zwischen 767 und 991 Pixel erfordern.
3) Wie finde ich eine Style-Datei?
Verringern Sie auf einem Laptop oder PC die Breite des Browserfensters, sodass das Hamburger Menü angezeigt wird. Klicken Sie mit der rechten Maustaste darauf und wählen Sie "Untersuchen". Im Entwicklerfenster können Sie sehen, welche Stile den einzelnen HTML-Blöcken zugeordnet sind und in welchen Dateien diese Stile gespeichert sind.
4) Wie bearbeitet man es?
Sie können die Style-Datei per FTP herunterladen, bearbeiten und per FTP auf den Server hochladen.
Wenn dies nicht möglich ist, müssen Sie einen zusätzlichen Satz Stile erstellen und den Website-Einstellungen hinzufügen. Um jedoch die Komplexität eines solchen CSS zu beurteilen, müssen wir zunächst die Stile für Ihr Menü sehen.
Der Text wurde umfangreich, deshalb habe ich ihn als neue Antwort eingefügt.
Hallo, erstmal vielen Dank für deine äußerst ausführliche Antwort.
das Ding ist nur, ich habe schon einige Anpassungen mit CSS vorgenommen, auch für verschiedene Media-Queries. Dies ist mir geläufig. Von daher alles gut. Aber ich bekomme einfach das „frühere Wechseln“ auf das burger-Menü nicht hin. Man kann bei Jimdo ja auch nicht direkt auf den Code des Templates zugreifen, sondern ich kann „nur“ zusätzliche CSS definieren.
würde der Link zu einer beispielseite helfen?