So erstellen Mobilfreundliche Responsive Menü
Erstellen Sie Responsive-Menü
Im Grunde genommen, wenn Sie die UL Breite eingestellt haben 100% durch die CSS-Builder zu sein auf Menucool der ddmenu Seite, können Sie ein ansprechendes Menü, das das Layout auf die Bildschirme anpassen.
Das Menü nicht zu 100% breit in einem breiten Desktop-Bildschirm zu sein
Sie können dies leicht beheben, indem der UL einen max-width Stil. Beispielsweise:
Halten Sie das Menü einen schönen Blick, wenn auf mehrere Zeilen Einwickeln
Dies kann durch Verwendung CSS3 Media Queries erreicht werden. Im ddmenu.css der Vorlage 4, die Sie von der Seite ddmenu herunterladen. Sie werden feststellen, dass es durch den folgenden Code ausgeführt wird:
Die Berührungszonen des Menüs sollte größer und leichter sein, in mobilen Geräten wählen
Die Lösung ist das Hinzufügen von Ansichtsfenster-Meta-Tag im HEAD-Abschnitt Ihrer ansprechenden Seite. Es wird mobile Geräte sagen, die Seite an der richtigen Pixel-Auflösung zu machen, ohne Seiteninhalt Auszoomen. Es wird garantiert, dass die Navigationsmenüpunkte sind groß genug, so dass die Nutzer leicht mit ihnen interagieren können.
Ansichtsfenster-Meta-Tag ist auch notwendig für mobile Geräte auf Medienanfragen zu verstehen.
Soll ich maximal angelegte = 1 im Ansichtsfenster?
Normalerweise brauchen Sie nicht die maximale angelegte = 1 Einstellung, da es die Funktionalität deaktivieren wird Pinch Zoom auf mobilen Geräten zu verwenden.
Was bedeutet maximaler Maßstab = 1 tun?
maximum-scale = 1 wird die Seite aus Zoomen verhindern, wenn die Mobil Ausrichtung verschoben
Zum Beispiel wird die iPhone Darstellungsbreite auf 480 Pixel im Querformat erhöhen. Sie werden mehr Wörter in jeder Zeile in der Landschaft sehen, als in protrait. Wenn wir nicht den maximalen Skalenwert beinhaltete dann würde das Ansichtsfenster 320 Pixel breit sowohl in Hoch- und Querformat sein.
- Beide grundlegende und erweiterte Versionen von ddmenu wird über Konfigurationen unterstützen.
- Der nächste Abschnitt, Erstellen von mobilen freundlichen Menü. nur durch die erweiterte Version von ddmenu unterstützt.
Erstellen Mobilfreundliche Menüs
Wenn Sie die erweiterte Version Option wählen, wenn eine ddmenu Vorlage herunterzuladen, werden Sie das Navigationsmenü erhalten, die automatisch auf das vertikale Layout verändern wird, wenn sie mit mobilen Geräten. Es kommt auch mit einer Menü-Taste, die, wenn sie angeklickt, wird die Anzeige des Hauptmenüs hin- und herzuschalten.
Lassen Sie uns gehen Sie durch welchen Code hinzugefügt wurde das Menü Mobilfreundlicher zu machen.
In Ansichtsfenster-Meta-Tag
Wie zuvor beschrieben, ist es notwendig, die Ansichtsfenster Meta in der Seite enthalten:In Stilen für vertikales mobiles Layout
Sie können den folgenden Codeblock am Ende der ddmenu.css Datei finden:
Der CSS-Code ist ziemlich geradlinig. So werden wir nur über die wichtigsten Teile sprechen:
- Das #ddmenu div.menu-Symbol wird angezeigt: keine anfänglich. Wir verwenden Medienabfrage die Schaltfläche sichtbar zu machen, wenn das Gerät innerhalb der angegebenen Breite Bereich fällt.
- Sie können max-device-Breite anstelle von max-width verwenden.
Welche soll ich verwenden: max-device-width vs max-width?