Jedes Jahr entscheiden sich immer mehr Nutzer mobiler Geräte dafür, Zeit mit Smartphones im Internet zu verbringen. Und gleichzeitig wächst ihr Anspruch auf die Benutzerfreundlichkeit einer mobilen Website oder App. Eines der wichtigsten Elemente für eine komfortable Navigation sind die Menütasten am unteren Rand des Telefonbildschirms.
Das Setzen solcher Schaltflächen mag eine entmutigende Aufgabe sein, aber es kann tatsächlich schnell und einfach mit HTML und CSS erledigt werden. Eine Möglichkeit zum Erstellen von Schaltflächen in der unteren Leiste besteht darin, Elemente zu verwenden div und flexbox. Durch die Kombination dieser Werkzeuge können Sie eine flexible und adaptive untere Leiste mit den gewünschten Schaltflächen erstellen.
Um Menüschaltflächen im unteren Bereich zu erstellen, müssen Sie zunächst einen Container mit Elementen erstellen, die Schaltflächen darstellen. Verwenden Sie dann CSS, um den gewünschten Stil für die Schaltflächen und ihre Position im Bedienfeld festzulegen. Sie können auch Animationen und Effekte hinzufügen, wenn Sie auf die Schaltflächen klicken, um die Benutzererfahrung interessanter und attraktiver zu machen.
Einstellen der Tasten für Menüs
Der erste Schritt besteht darin, einen Container für die Menüschaltflächen zu erstellen. Sie können das Element dafür verwenden. Beispiel für Markup:
Sie können dann CSS-Stile für den Container und die Schaltflächen hinzufügen. Zum Beispiel:
Im obigen Beispiel für CSS-Stile verwenden wir Eigenschaften display: flex; und justify-content: space-around; zum Ausrichten und Positionieren der Schaltflächen in der Menüleiste. Außerdem legen wir die Hintergrundfarbe, Höhe, Rahmen und andere Stile für die Schaltflächen fest.
Nachdem Sie den Container und die Stile hinzugefügt haben, müssen Sie nur noch die Schaltflächen in der gewünschten Reihenfolge platzieren und die erforderlichen Funktionen mit JavaScript oder anderen Programmierprogrammen hinzufügen.
Das Festlegen von Schaltflächen für Menüs auf der Unterseite des Telefonbildschirms ist daher ein Prozess, bei dem ein Schaltflächencontainer erstellt, CSS-Stile angewendet und Funktionen mithilfe von JavaScript oder anderen Programmierprogrammen hinzugefügt werden.
Vorbereiten des Telefonbildschirms
Bevor Sie die Menütasten auf der Unterseite des Telefonbildschirms installieren, müssen Sie einige vorbereitende Arbeiten durchführen:
- Reinigen Sie die untere Leiste von den vorherigen Elementen oder stellen Sie sicher, dass sie leer ist.
- Überprüfen Sie die Bildschirmauflösung des Geräts, auf dem das Menü angezeigt wird. Stellen Sie sicher, dass es die Anzeige von Schaltflächen in der unteren Leiste unterstützt.
- Bestimmen Sie die Anzahl und Position der Schaltflächen, die Sie auf der unteren Leiste platzieren möchten. Denken Sie an Logik und Benutzerfreundlichkeit für den Benutzer.
- Bereiten Sie Symbole für jede Menütaste vor. Stellen Sie sicher, dass sie den Plattformanforderungen entsprechen und auf dem Telefonbildschirm gut sichtbar sind.
Nachdem Sie diese Vorbereitungen abgeschlossen haben, können Sie die Menütasten auf der Unterseite des Telefonbildschirms installieren. Befolgen Sie weiterhin die Anweisungen, die für Ihre Plattform und Ihre Programmiersprache geeignet sind.
Auswählen eines Schaltflächenstils
Es gibt mehrere beliebte Stile für Schaltflächen:
1. Flache Knöpfe: dieser Stil impliziert keine Ausbuchtungs- und Schatteneffekte. Sie sehen ästhetisch und minimalistisch aus. Oft in Verbindung mit einem monochromen Design verwendet.
2. Konvexe Knöpfe: diese Stilisierung zeichnet sich durch einen zweifarbigen Hintergrund aus, der den Eindruck einer Ausbuchtung vermittelt. Dieser Effekt kann durch die Verwendung von Farbverläufen oder Schatten erreicht werden.
3. Knöpfe mit abgerundeten Ecken: es ist ein Stil, der den Tasten eine ästhetische Anziehungskraft verleiht und sie weniger scharf und angenehmer anfühlt.
4. Symbole auf Schaltflächen: das Hinzufügen eines Symbols zu einer Schaltfläche kann die Benutzeroberfläche intuitiver und attraktiver machen. Symbole werden normalerweise als Vektorbilder dargestellt und sind in einer Vielzahl von Stilen verfügbar.
Es ist wichtig, einen Schaltflächenstil auszuwählen, der dem allgemeinen Design und den Zielen der Benutzeroberfläche entspricht. Außerdem müssen Sie sicherstellen, dass die Tasten leicht zu erkennen und leicht zu betätigen sind.
So legen Sie die Schaltflächen am unteren Bildschirmrand fest
Sie können spezielle CSS-Klassen und -Stile verwenden, um die Schaltflächen am unteren Rand des Telefonbildschirms zu installieren. Dadurch wird ein benutzerfreundliches und intuitives Menü erstellt.
Zunächst müssen Sie einen Container für die Schaltflächen erstellen. Sie können dazu ein Tag verwenden mit einer bestimmten Klasse, zum Beispiel class="bottom-menu". Innerhalb dieses Containers befinden sich die Schaltflächen selbst.
Jede Schaltfläche kann als separates Element dargestellt werden. Dazu werden die Tags oder verwendet. Innerhalb dieser Tags können Sie den Text oder das Schaltflächensymbol mithilfe von oder-Tags angeben.
Um das gewünschte Aussehen der Schaltflächen zu erreichen, können Sie CSS-Stile anwenden. Geben Sie beispielsweise eine Hintergrundfarbe, Schriftart, Größe und Ausrichtung an. Sie können auch Animationen oder Effekte hinzufügen, wenn Sie den Mauszeiger bewegen.
Der Hauptvorteil der Verwendung von Klassen und Stilen für Schaltflächen am unteren Rand des Bildschirms besteht darin, dass Sie das Aussehen der Schaltflächen leicht ändern können, um sie an verschiedene Geräte und Bildschirmauflösungen anzupassen. Darüber hinaus ist dieses Menü für Benutzer praktisch, da sie bei Verwendung von Touchscreens leicht Tasten mit einem einzigen Daumen drücken können.
