Advertisement
  1. Web Design
  2. CSS
Webdesign

Menübenachrichtigungen mit HTML5-Datenattributen

by
Length:LongLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Skin Orman Clark's Video Interface Using jPlayer and CSS
Build a Popup Modal Window Using the jQuery Reveal Plugin

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Heute werden wir Orman Clarks Menu Notification Badges entwerfen und es mit HTML und CSS erstellen.  Wir werden uns einige Möglichkeiten ansehen, um den Effekt zu erzielen, einschließlich der Verwendung von HTML5-Datenattributen, mit denen Sie möglicherweise nicht vertraut sind.  Lass uns eintauchen! 


Schritt 1: HTML5-Basismarkierung 

Beginnen wir damit, ein paar grundlegende Markups einzuwerfen.  Wir verwenden den HTML5 Doctype während des gesamten Tutorials.  Wir erstellen das Menü selbst, indem wir zuerst ein Hauptdiv gefolgt von Listenelementen hinzufügen, die jeden Menülink erstellen.  Wir haben auch das HTML5 shiv (oder shim) -Skript in den Kopf unseres Dokuments eingefügt.  Dies wird mit älteren Versionen von Internet Explorer in Verbindung gebracht, die HTML5-Elemente erkennen und formatieren können.


Schritt 2: Menüauszeichnung 

Um die Struktur unseres Menüs zu erstellen, verwenden wir eine ungeordnete Liste mit 4 Listenelementen und einem Anker-Tag.  Sie können die Liste auch in einem-Tag für die Bereitstellung verschachteln. 

Für diese Demonstration erstellen wir ein div um das Menü mit einer Wrapper-Klasse.  Dies wird nur verwendet, um das Menü in die Mitte der Seite zu verschieben. 

Ihr Markup sollte ungefähr so ​​aussehen. 


Schritt 3: Einige grundlegende CSS 

Bevor wir mit dem Formatieren des Menüs beginnen, fügen wir einige Resets und einige Seitenstylings hinzu.  Wir werden zunächst einen Reset einleiten, um alle Ränder, Abstände usw. vom Standard-Stylesheet des Browsers zu entfernen.  Als nächstes werden wir eine Hintergrundfarbe auf den Körper und eine Schriftgröße von 16px anwenden.  Diese feste Schriftgröße stellt die Grundgröße für unsere Demo sicher, Sie können es jedoch vorziehen, sie auf 100% zu setzen, damit der Benutzer seine Browserschriftgröße definieren kann.  Wir werden eine Breite von 70% auf den Wrapper anwenden und ihn mit einem Rand von 200px zentrieren. 


Schritt 4: Menü Basis Stile

Um das Menü zu starten, konzentrieren wir uns zunächst auf die Basis.  Wählen Sie zuerst die nicht geordnete Liste aus, die eine Klasse von "Menü" erhalten hat.  Wir geben ihm eine Anzeige von Inline-Block, so dass wir die Breite / Höhe davon abhängig von seinem Inhalt wie ein Blockelement bestimmen können. 

Als Nächstes werden wir einen Verlaufshintergrund mit allen Browserpräfixen anwenden.  Dann fügen Sie einen Randradius hinzu, aber hey, was sind diese ems ?! Wir verwenden ems (anstelle von Pixeln), um den Randradius relativ zur Schriftgröße zu bestimmen.  Schau dir die Demo an. Sie werden sehen, dass der Radius proportional mit dem größeren Text wächst. 

Um die Größe zu berechnen, die wir brauchen, nehmen wir 16px (unsere Körperschriftgröße) und teilen sie durch 3 (unsere gewünschte Randradiusgröße in px).  Also 16px / 3px = 0,188, aber wir werden das auf 0,2 runden. 

Als Nächstes werden wir einen einfachen grauen Rahmen und dann einen Box-Schatten mit einem Tropfen und einem eingefügten Schatten anwenden.  Vergessen Sie nicht auch diese Browserpräfixe! 


Schritt 5: Elemente auflisten 

Weiter geht es mit dem Verbessern des Menüs, indem Sie die Listenelemente formatieren.  Zuerst werden die Listenelemente nach links verschoben, sodass sie alle in einer Zeile stehen und nicht aufgelistet sind.  Wir werden sie dann relativ positionieren, dies wird später benötigt, wenn wir die Abzeichen erstellen.  Als Nächstes fügen wir links einen Rahmen und rechts einen Rahmen hinzu.

Jetzt müssen wir das erste Listenelement und das letzte Listenelement anvisieren, also tun wir dies mit den Pseudo Selektoren; : first-child und: last-child (bei der Verwendung der Browser-Unterstützung beachten.  Bei der ersten werden wir den linken Rand entfernen und den rechten Rahmen vom letzten Listenelement entfernen. 


Schritt 6: Anker Tags 

Als nächstes müssen wir die Anker-Tags formatieren.  Zuerst geben wir ihnen eine Font-Familie von Helvetica Neue mit einigen Font-Stack-Fallbacks für Leute, die nicht die Helvetica-Schriftart haben.  Als nächstes geben wir ihnen eine Schriftgröße von 0.75em (13px / 16px = 0.75).  Dann wenden wir eine Schriftstärke von fett, gefolgt von einer Farbe von # 666666 an und wenden einen Textschatten an. 

Wir werden jetzt eine Auffüllung links und rechts von 1em (13px / 13px = 1) und etwas Zeilenhöhe anwenden, um den Text vertikal zu zentrieren. Wir werden jetzt eine Auffüllung links und rechts von 1em (13px / 13px = 1) und etwas Zeilenhöhe anwenden, um den Text vertikal zu zentrieren. 

Wir haben die Zeilenhöhe auf 30px festgelegt und in ems interpretiert. Unsere Speisekarte fängt jetzt an, ziemlich gut auszusehen! Anchor-Tag-Stile 

Anchor Tag Styles

Schritt 7: Benachrichtigungsblasen-Markup

Zeit, die coolen kleinen Benachrichtigungsblasen hinzuzufügen.  Zunächst müssen Sie das HTML-Markup Ihres Menüs durch Folgendes ersetzen.  Wir erstellen die Blasen mithilfe von span-Tags. Für jede Farbe wird dann eine geeignete Klasse angewendet. Ich habe Rosa, Gelb und Blau hinzugefügt.


Schritt 8: Styling der Notification Bubbles 

Um die Benachrichtigungsblasen zu erstellen, formatieren wir zuerst die span-Tags mit Ausnahme der Farbe und der Rahmenfarbe.  Auf diese Weise können wir die Farben leicht ändern, indem wir einfach Klassennamen ändern. 

Zuerst erstellen wir einige Breiten und Höhen, nehmen 18px / 12px = 1.5em.  Dann müssen wir sie absolut positionieren (0,5 m von rechts und -2 m von oben).  Als nächstes wird eine Zeilenhöhe angewendet, um die Zahl vertikal zu zentrieren, und die Textausrichtung wird verwendet, um horizontal zu zentrieren. 

Eine Schriftfamilie wird mit Helvetica Neue angewendet, wiederum mit Fallbacks für Benutzer ohne Helvetica.  Wir machen es fett, wenden eine weiße Farbe an und fügen dann einen Text-Schatten hinzu.  Als nächstes fügen wir einige Box-Schatten hinzu (wir fügen zwei hinzu; einen Schlagschatten und einen Schatten).  Denken Sie daran, diese unter Verwendung von Browserpräfixen zu erstellen.  Jetzt fügen wir einen Umrandungsradius von 4em hinzu (ungefähr 50px).

Für die nächste Stufe des Prozesses werden wir einige CSS3-Techniken nutzen und den Hover-Effekt zum Laufen bringen.  Wir werden zuerst die Blase mit einer Deckkraft von 0 verstecken. Als nächstes werden wir einige Übergänge verwenden, um unsere coolen kleinen Animationen zu erstellen.  Wir zielen auf die Ober- und Deckkraft ab und sagen ihm, dass es sich über einen Zeitraum von 0,3 Sekunden (3 Millisekunden) beruhigt.  Dazu müssen die Browser-Präfixe einschließlich -o- und -ms- verwendet werden. 


Schritt 9: Bubble-Farben 

Zeit für die letzten ästhetischen Berührungen der Blasen; Hinzufügen von CSS zum Gestalten der Farben.  Erinnerst du dich an die Klassen, die wir zu den Span-Tags hinzugefügt haben?  Dies wird die Dinge einfach genug machen, wir werden jede Farbe auswählen, einen Farbverlauf und eine Rahmenfarbe anwenden. 


Schritt 10: Hover Styles 

Natürlich sind unsere Blasen schön gestylt, aber völlig unsichtbar.  Wir müssen etwas CSS hinzufügen, damit die Blasen beim Schweben angezeigt werden.  Zuerst fügen Sie den Anker-Tags eine Farbe hinzu, wenn sie über dem Objekt liegen, nur ein einfaches Dunkelgrau.  Als Nächstes werden wir den Bereich anvisieren, wenn sich das übergeordnete Listenelement über ihm befindet.  Wir werden eine Deckkraft von 1 hinzufügen, um sie sichtbar zu machen, und den Wert der obersten Position ändern, damit er so aussieht, als ob er nach unten rutscht. 

Hover Styles

Was ist mit HTML5-Datenattributen? 

Froh, dass du gefragt hast .. 


Schritt 11: Ändern Sie das Menü HTML Markup 

Um unser Menü mit HTML5-Datenattributen zu erstellen, müssen wir zuerst unser HTML-Markup ändern.  Wir werden einige benutzerdefinierte Attribute verwenden, um die Blasen zu erstellen.  HTML5 führte ein neues Datenattribut ein, bei dem der Attributname beliebig lang sein kann, solange er mindestens 1 Zeichen lang ist und mit "Daten" beginnt. 

Für dieses Tutorial verwenden wir 'Datenblase'.  Dadurch können wir unsere Benachrichtigungswerte speichern und darauf zugreifen, ohne unserem Dokument eine unnötige Markup-Struktur hinzuzufügen.  Beachten Sie, dass wir auch unsere Farbklassen auf die Anchor-Tags verschoben haben. 


Schritt 12: Entfernen einiger CSS 

Da wir nicht mehr mit den span-Elementen arbeiten werden, müssen Sie zu Ihrem CSS zurückkehren und die folgenden Regeln löschen. 


Schritt 13: Etwas CSS hinzufügen 

Jetzt konzentrieren wir uns stattdessen auf unsere Datenattribute, wir müssen einige Regeln zu unserem CSS hinzufügen. 

Es wird dem, was wir für unsere Span-Elemente verwendet haben, sehr ähnlich sehen.  Diesmal werden wir jedoch die folgenden Pseudoelemente von Anchor-Tags mit dem Attribut "Data-Bubble" anvisieren.  Um dies zu tun, verwenden wir CSS Attribute Selectors

Da wir ein: after pseudo verwenden (und damit Inhalte erzeugen), müssen wir etwas Fleisch darin mit Inhalt definieren: ''.  Wir verwenden wieder unser benutzerdefiniertes Attribut, das wir in unserem HTML erstellt haben, und fügen es ein. 

Um die Sichtbarkeit unserer Blase zu verwalten, geben wir ihr wiederum eine Deckkraft von 1, wenn die Verbindung schwebt.  Leider können wir diese aufgrund von Einschränkungen mit Attributselektoren nicht mit CSS selbst animieren. 


Schritt 14: Farben für Attribute 

Schließlich müssen wir den generierten Inhalt innerhalb der verschiedenen Klassen stylen, damit wir die Farben leicht ändern können (genau wie wir es mit den Span-Elementen gemacht haben). 


Fazit 

Wir haben erfolgreich ein Menü zusammen mit einigen ordentlichen Benachrichtigungsblasen erstellt und animiert!  Wir sind sogar noch weiter gegangen und haben neue Techniken in HTML5 genutzt. 

Completed

Abgeschlossen Ich hoffe, dir hat dieses Tutorial gefallen, danke fürs Lesen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.