Erstellen Sie eine reine CSS Menü-Taste, immer Verdreht

Wenn Sie mich auf dem zwitschert seit einiger Zeit verfolgt haben, werden Sie meine Gedanken über die beste Lösung für die mobile Navigation kennen. Zusamenfassend. Ich hasse die Idee der Verwendung von a für die mobile Navigation ist die Antwort von einem Entwickler ein Problem des Designers.

Nun, ich habe auch darüber nachgedacht, wie viel wir denken sollten, was wir die Person tatsächlich geben mit ihren (fügen alle mobilen Handheld-Gerät, sondern) iPhone.

Einige Optionen.

Sie sehen, ein neues Bild für das Menü-Symbol Erstellen könnte eine weitere HTTP-Anforderung erstellen (obwohl Sie könnten (und sollten) eine CSS-Sprite von ‚All die Dinge,‘ wie das schaffen, aber Sie würden immer noch, dass zusätzliche kb zum Download).

Sie könnten ein Symbol Schriftart verwenden. aber auch hier wäre dies eine weitere HTTP-Anforderung erstellen und auch eine Datei, von denen Sie nicht alle davon verwenden Teile ist. Obwohl es schön (oder nicht) für ein Menü-Taste für den Handheld Touch-Gerät skaliert werden kann ist es ein wenig übertrieben.

Türnummer 3.

Ich denke, eine Möglichkeit, Ihre 3 Linie mobile Navigationsmenütaste der Erstellung ist CSS zu verwenden. Reines CSS. Es wird ein paar Zeilen Code in Ihre CSS-Datei hinzufügen, würde aber ein wenig schöner für Benutzer sein, nicht mehr Sachen downloaden müssen nur eine Taste.

Also eine einfache 3-zeiliges Menü-Taste erstellen Sie so etwas wie dies zu schreiben brauchen würden -

Nun, das einzige Problem, mit so etwas wie dies zu schaffen ist ein leeres div, das ist ziemlich beschissen, aber ich werde in einem späteren Beitrag dazu kommen. Lassen Sie uns konzentrieren einfach cool CSS nur Menütasten zum Erstellen.

Hier können Sie sehen, wir haben einen Rahmen um die Linien mit der Klasse .btn hinzugefügt. Doing es auf diese Weise bedeutet, dass alle CSS-Regeln für #lines sie würde overide. Deshalb haben wir das verwendet: vor Pseudo-Selektor ein schönes Ergebnis zu erzielen.

Es gibt mehr?

Natürlich gibt es mehr. Obwohl ich das drei Linien Menü, nach einer aktuellen Diskussion auf Twitter liebe, wird es nicht wirklich funktionieren, wenn Sie Subnavigation in der Hauptnavigation haben. Viele 3 line-Icons alle Stapel aufeinander kann es verwirrend. Also habe ich ein paar mehr Tasten aus CSS.

Baut sie, Break it, machen mehr

Kategorien

In Verbindung stehende Artikel