Die Kopfzeile hat ein Navigationsmenü, das ich lieber behalten würde, aber es nimmt zu viel Platz in Anspruch. Was kann ich tun, damit es auf Mobilgeräten gut aussieht?Wie kann ich die Navigation einer Desktop-Site in ein reduzierbares Menü konvertieren?
Eine Möglichkeit ist die Verwendung von Toggles - Buttons, die den inneren Inhalt anzeigen/verschwinden lassen. Die Bibliothek uraniumjs enthält einige Widgets, von denen eines sehr einfach ist, und zwar useful toggler implementation. Das tut es auch unauffällig.
Sie müssen die Uran-JS-Datei enthalten, damit Sie sie einfach verwenden können. Dann können Sie es wie unten beschrieben tun.
Sie müssen Ihren Menücode in drei Teile umwandeln: einen Wrapper-Container, einen "Button" -Abschnitt und einen Inhaltsbereich. Zu jedem dieser Teile zu identifizieren, wobei diese Daten verwenden Attribute:
data-ur-set="toggler"
(hinzufügen, um dieses Attribut in den wrapper)
data-ur-toggler-component="button"
(hinzufügen, um dieses Attribut in den "Button" Abschnitt)
(fügen Sie dieses Attribut dem Inhaltsabschnitt hinzu)
Sie müssen irgendwo auch diese CSS-Regeln enthalten:
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
display: block;
}
Sie können ein kleines Beispiel sehen hier läuft: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.
Sowohl die mobilen Standorte Bloomingdales als auch die mobilen Standorte Macys verwenden diesen Ansatz. Du kannst es dort arbeiten sehen.