Um dynamische Menüs für unsere Webseiten zu erstellen, ist es heutzutage üblich, in HTML5 zu programmieren und dann durch CSS3, eine auf Stylesheets basierende Sprache, das heißt den Code, der das HTML5 enthält , ein persönliches Erscheinungsbild und einen persönlichen Stil zu verleihen Form, Farbe und Struktur unserer Seite befinden sich in einer separaten Datei, die außerhalb der von uns geschriebenen Seite verschlüsselt ist.
Zunächst werden wir sehen, wie man Listen erstellt, denn am Ende des Tages ist ein Menü eine Liste mit einem Stil, der es sichtbar eleganter macht. Auf diese Weise werden wir in HTML als eine Liste von Links strukturiert und setzen dann mit CSS3 ein benutzerdefiniertes Aussehen.
Es gibt zwei Arten von Listen, die geordneten und die ungeordneten. Wenn wir eine Liste verwenden, um später ein Menü zu konfigurieren, ist es sehr wahrscheinlich, dass wir eine Liste mit ungeordneten Menüs verwenden. Die Optionen werden jedoch angezeigt.
Sie werden genau gleich erzeugt, der einzige Unterschied liegt im reservierten Wort, das für Ordinaten <ol> und für ungeordnete <ul> ist
Der Code in HTML lautet wie folgt:
<ol id = "menu"> <li> Erstes Element </ li> <li> Zweites Element </ li> <li> Drittes Element </ li> </ ol> <ul id = "menu"> <li> Erstes Element </ li> <li> Zweites Element </ li> <li> Drittes Element </ li> </ ul>
Und das Ergebnis auf dem Bildschirm des Schreibens ist:
1. Erstes Element
2. Zweites Element
3. Drittes Element
Oder genau das gleiche ohne die Ordnungszahl zuerst:
Erstes Element
Zweites Element
Drittes Element
In HTML gibt es bestimmte Vorformate, wenn wir eine Liste erstellen, dh, es gibt einen bestimmten Rand, eine bestimmte Farbe für Buchstaben, Aufzählungszeichen, Füllzeichen usw. Dies wird standardmäßig beim Erstellen unserer Liste angezeigt. Das Schlechte ist, dass es optisch nicht sehr gut aussieht, das Gute ist, dass es dank CSS enorm einfach ist, es nach unserem Geschmack zu ändern.
Schauen wir uns zunächst die verschiedenen Arten von Kugeln an, die wir auf unserer Speisekarte platzieren können. Standardmäßig wird jedem Element in der Liste ein schwarzer Kreis vorangestellt. Wir können jedoch Quadrate, leere Kreise oder ein Bild unserer Datei einfügen.
Der Code zum Ändern des Aufzählungszeichens in CSS3 lautet wie folgt:
#menu {list-style-type: square;}
Dort können wir die reservierten Wörter so platzieren, dass sie quadratisch erscheinen, Kreise für die leeren Kreise oder eine URL, zum Beispiel url (misimagenes / midubujo.jpg). Ich denke jedoch, dass das Üblichste ist, dass wir keine Kugel setzen, wenn unser Menü dynamisch ist. In diesem Fall ist das zu verwendende Wort none.
Das Ändern des Randes mithilfe des Beispielmenüs ist so einfach wie die Verwendung dieses Codes in CSS3 :
#menu {margin: 0px;}
Dort können wir als Rand den gewünschten Wert eingeben und das Maß in Prozent, in Pixeln usw. auswählen. Und es ist wichtig zu erwähnen, dass in einigen Browsern oder Versionen von ihnen Probleme auftreten können. Daher wird empfohlen, zusätzlich zum Schreiben des Randes das Auffüllen zu schreiben. Dies geschieht mit Polsterung:
#menu { Rand: 0px; Polsterung: 2px; }
Um den Rand unseres Menüs und jedes der Elemente auszuwählen, betrachten wir den folgenden CSS3-Code :
#menu {border: 2px;}
Mit dem Wort border können wir angeben, welche Größe oder Dicke wir möchten. Rand kann im Allgemeinen auf die Kante angewendet werden, aber wir können auch angeben, ob es nur ein Seitenrand oder die untere oder obere Kante sein soll. Dies wird durch Hinzufügen von Rahmen unten, oben, rechts oder links erreicht.
Neben der Dicke Grenze ist ein Feld, das viele Möglichkeiten hat, wir können einen Stil, eine Farbe, einen Farbverlauf wählen … und wir werden einige Optionen sehen.
Beginnend mit dem Rahmenstil , dem Rahmenstil , sind die am häufigsten verwendeten Möglichkeiten:
Wie bei border können wir auch bei border-style den Rand einer Seite definieren, sowohl die obere als auch die untere Grenze oder alle. Wenn wir nur einen Wert schreiben, wird dieser an alle Kanten geschrieben, und wenn wir anstelle von zwei Optionen schreiben, gilt die erste für die oberen und unteren Kanten und die zweite für die Kanten.
Damit haben wir nun den Rand, die Größe und den Stil definiert, aber das Menü ist immer noch sehr einfach und optisch ziemlich klein. Wir können vertikale Menüs verwenden, da diese standardmäßig erstellt werden. Wenn sie jedoch horizontal sein sollen, müssen wir das reservierte Wort float hinzufügen, damit jedes Element der Liste neben dem nächsten platziert wird.
Ich erkläre dies etwas ausführlicher. Jedes Element der Liste, das wir mit “li” codiert haben, hat das Standardverhalten von Blockelementen, dh nach dem Positionieren wird ein Zeilenumbruch generiert und verhindert, dass ein anderes Element platziert wird deine Seite Wenn wir jedes Element in unserer Liste neben dem vorherigen platzieren möchten, müssen wir dieses Blockierungsverhalten beseitigen.
Dafür wäre der Code der folgende:
#menu { Listenstil: keine; Rand: 0px; Polsterung: 0; } #menu li { Rand: 2px; Polsterung: 2px; Rand: 2px fest; Schwimmer: links; }
Hiermit generieren wir ein Menü und setzen die grundlegenden Eigenschaften von Rand und Füllung auf 0 und ohne Rand. Dann setzen wir zu jedem Element, das in einem Li in unserem Menü eingeschlossen ist, andere Eigenschaften, Rand 2px und Füllung, 2 px von fester Kante und dass es nach links schwebt, das heißt, dass das nächste Element rechts davon platziert werden kann.
Auf diese Weise haben wir unser Menü bereits horizontal .
Wenn wir möchten, dass unsere Liste als Menü fungiert und uns dorthin weiterleitet, wo wir wollen, müssen wir unseren Elementen einen Link hinzufügen. Das ist sehr einfach. In unserem Code im HTML fügen wir Folgendes hinzu:
<ul id = "menu"> <li> <a href="#"> Erster Artikel </a> </ li> <li> <a href="#"> Zweites Element </a> </ li> <li> <a href="#"> Drittes Element </a> </ li> </ ul>
Auf diese Weise wird jedes Element unterstrichen und fungiert als Verbindung, die uns dorthin führt, wo wir hin wollen.
Schließlich werden wir einige der Optionen für den Auftritt sehen.
- unterstreichen : Wenn alles unterstrichen werden soll
- overline : So wie underline eine Zeile in den gesamten Text einfügt, diesmal jedoch nicht darunter.
- Blinken: Erstellen Sie einen Text, der wie ein Licht blinkt.
- line-through : Diese Option schreiben wir, wenn unser Text durchgestrichen werden soll.
- none : Dies ist eine Redundanz, da der Text standardmäßig mit diesem Wert ohne Dekoration geliefert wird. Manchmal ist es jedoch hilfreich, wenn wir zur ursprünglichen Option zurückkehren möchten, nachdem wir einen Effekt mithilfe einer als “Hover” bezeichneten Ressource verwendet haben, die wir als Nächstes sehen werden.
- ltr : Dies ist diejenige, die standardmäßig in Browsern angezeigt wird, da mit Ausnahme einiger Sprachen, in denen von rechts nach links geschrieben wird, die übliche Schreibweise von links nach rechts ist, was diese Option definiert.
- rtl : ist die andere mögliche Richtung des Textes von rechts nach links, die wir verwenden, wenn wir zum Beispiel arabische Texte schreiben wollen.
- Messung
- Prozentsatz
- erben
Wenn wir in ihnen Prozent verwenden, beziehen wir uns auf die Breite des Elements, in dem es sich befindet.
Außerdem können wir in allen positive oder negative Zahlen jeder der Maßeinheiten verwenden, die für CSS3, Pixel, EMS … existieren.
- großschreiben : Mit dieser Option wird nur der erste Buchstabe jedes Wortes in Großbuchstaben angezeigt.
- Großbuchstaben : Zeigt den gesamten Text in Großbuchstaben an.
- Kleinbuchstaben : Zeigt den gesamten Text in Kleinbuchstaben an.
- none : belasse den Text wie er geschrieben wurde. Dies ist die Standardeinstellung.
Nun gehen wir zu den Eigenschaften der Quelle.
Dann müssen wir die Schriftgröße mit “font-size” angeben, optional gefolgt von dem Zeilenabstand, der mit “line-height” angegeben ist und immer mit dem Schriftfamilientyp “font-family” endet. Schließlich muss einer der folgenden Werte eingestellt werden:
- Beschriftung : für Schaltflächen oder Dropdown-Listen, dh für Steuerelemente und Formularfelder.
- Menü : Wenn Sie Dropdown-Menüs oder andere Menütypen konfigurieren möchten.
- Symbol : für die Texte, die unter den Symbolen angezeigt werden.
- Meldungsfeld : für Dialogfelder, Popup-Fehler, Informationen usw.
- status-ba r: für die Statusleisten der Fenster.
- small-captio n: für Felder und Steuerelemente kleiner Formulare.
In der Eigenschaft font haben wir einige andere Optionen verwendet, die wir noch nicht gesehen haben und die wir nachfolgend erläutern werden:
Eine andere Option ist die Angabe eines Prozentsatzes für die RGB- Farbe. Hierbei werden einfach drei Prozentsätze angegeben, die den Farben Rot, Grün (G) und Blau (B) entsprechen:
Farbe: RGB (22%, 76%, 14%); (Die 3 Prozentangaben müssen nicht 100% ergeben)
Eine andere Möglichkeit besteht darin, dezimales RGB zu verwenden , das genau wie prozentuales RGB funktioniert. Statt jedoch drei Werte in Prozent anzugeben, werden sie als Dezimalwerte angegeben:
Farbe: RGB (114, 29, 54);
Genauso können wir wählen, dass unser RGB hexadezimal ist :
Farbe: RGB (Nr. 23A556);
Mit diesen Optionen können wir die verschiedenen Stile, Farben und Schriftarten bereits gut ändern und testen.
