Heim >Web-Frontend >HTML-Tutorial >Horizontale Menüleiste in HTML
Horizontale Menüleiste in HTML
- WBOYOriginal
- 2024-09-04 16:45:31644Durchsuche
In HTML verfügen wir über einen anderen Satz von Funktionen, die für den Benutzer hervorgehoben und attraktiver sind. Wir haben bereits im vorherigen Artikel die Bildlaufleisten besprochen. Das Gleiche gilt auch für Menüleisten, die dem Benutzer einige weitere Funktionen bieten. Im Allgemeinen hilft eine Menüleiste dabei, die Inhalte zu kategorisieren und die Lesbarkeit einer Webseite zu verbessern. Auf einfachste Weise hilft es Ihnen, in der Endmenüleiste des Benutzers interaktiver zu werden. Bildlaufleisten haben sowohl horizontale als auch vertikale Typen, ebenso wie Menüleisten, und beide Dinge müssen für Entwickler verwendet werden. Wir werden einige weitere Details in den folgenden Konzepten sehen.
Syntax:
Bei der Verwendung horizontaler/vertikaler Menüleisten müssen wir CSS verwenden, um die Stile in allen Teilen der HTML-Seiten widerzuspiegeln. Im Allgemeinen benötigen Navigationsleisten Standard-HTML als Grundlage für die Implementierung der untergeordneten oder untergeordneten Dokumente. Navigationsleisten oder horizontale Balken verfügen grundsätzlich über eine Liste von Links. Wenn Sie also die Funktion
- Elemente sind die Syntax für die folgenden Grundlagen.
<style>
ul{
}
li variablename:hover{
}
</style>
<body>
<ul>
<li>
</li>
</ul>
</body>
Der obige Code ist die grundlegende Syntax für die horizontale Menüleiste.
Beispiele für die horizontale Menüleiste in HTML
Wir haben einige Beispiele gesehen, um die Konzepte besser zu verstehen.
Beispiel #1
Code:
<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: green;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover {
background-color: #111;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Beispielausgabe:
Im obigen Beispiel zeigen wir die Menüelemente in der horizontalen Ansicht an, wenn wir die Webseite erstellen. Im Allgemeinen sehen wir, dass sich nur Menüelemente im horizontalen Bereich befinden, da die vom Benutzer angepasste Ansicht hier zeilenweise ist und daher verwendet wird horizontal. Für alle HTML-Dokumente ist dieselbe CSS-Stilklasse verfügbar.
Beispiel #2
Code:
<html> <body> <p style="font-family:Comic Sans MS"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </p> </body> </html>
Beispielausgabe:
Das zweite Beispiel ist dasselbe wie das erste Beispiel, aber hier werden wir keine CSS-Stile in den HTML-Dokumenten verwenden.
Tag verwenden wir einige CSS-Stile wie Schriftfamilien, Breite, Höhe usw.
Beispiel #3
Code:
<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: #333;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Beispielausgabe:
Einige kostenlose horizontale Menütypen:
Jede Funktion bestand aus einigen Sammlungen für die verschiedenen Szenarien. Bei den horizontalen Menüs handelte es sich um reines CSS, außerdem wurde Javascript verwendet, um sicherzustellen, dass sie reaktionsfähig sind und auf Mobilgeräten funktionieren.
Einige horizontale Navigationen funktionieren einwandfrei und einige der Funktionen werden in den Skripten nicht unterstützt und es gibt auch Probleme mit der Browserkompatibilität. Im Website-Design eignet sich die horizontale Leiste hervorragend für ein minimalistisches Erscheinungsbild und eignet sich auch gut, um dem Benutzer einen einfachen Navigationsoberflächenraum zu bieten.
Responsives horizontales Navigationsmenü in Orange:
Es ist einer der Typen im horizontalen Menü, es ist ein leichtes, minimalistisches Menü mit vollständig reinen CSS-Stilen. Das Menü ist außerdem reaktionsfähig und verwandelt sich in einen vertikalen Menütyp auf dem Mobilgerät. Es unterstützt die Anzeige auf kleinen Bildschirmen für die Verwendung auf Mobiltelefonen. Auf dem Desktop ändern sie nichts, es funktioniert nur auf den Webbrowser-Bildschirmen, das Gleiche gilt auch für Mobiltelefone.
Beispiel:
<html> <head> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> </head> <body> <div id='cssmenu'> <ul> <li><a href="#home" >Home</a></li> <li><a href="#about" class="active">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </body> </html>
Ausgabe:
Horizontale Menütypen mit grünen Registerkarten:
Dieses Menü ist eines der Designmuster für das horizontale Bedienfeld in einer Benutzeroberfläche mit Registerkarten. Es werden umfangreiche und teure Anwendungen wie Einkaufs-/Verkaufsprodukte und Warenanwendungen verwendet. Für den Endbenutzer ist es hilfreich, sehr schnell und einfach auf die verschiedenen Menüelemente zu klicken, um die Ergebnisse aus der Datenbank an einen Benutzer zu übertragen. Im obigen Typ verwenden wir einige Skripte wie jquery, aber hier verwenden wir nur HTML und CSS, damit die Daten schnell auf die Benutzerbildschirme geladen werden. Nehmen wir das gleiche Beispiel aus dem vorherigen Thema
Beispiel:
<html> <head> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> </head> <body> <div id='cssmenu'> <ul> <li><a href="#home" >Home</a></li> <li><a href="#about" class="active">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </body> </html>
Ausgabe:
Dasselbe Beispiel, das wir genommen haben, aber einige CSS-Stile haben wir geändert und die HTML-Datei aktualisiert. Immer wenn wir den Mauszeiger in der Registerkarte platzieren, wird der Text automatisch in der erwähnten grünen Farbe hervorgehoben, sodass er sich je nach Benutzerauswahl ändert, wenn sich der Mauszeiger durch eine andere Registerkarte bewegt.
Luftpolsterfolie in der horizontalen Stange:
In dieser Menüleiste verwenden wir wie bei den vorherigen Typen vollständig CSS-Stile im HTML. Darüber hinaus werden wir die Eigenschaft „Border-Radius“ hinzufügen, wenn diese aktiviert ist, sieht sie dann wie Blasentypen aus. Wir werden das gleiche Beispiel mit unterschiedlichen CSS-Stilen sehen und die Ausgabe wird wie der folgende Code mit Ergebnissen angezeigt.
Beispiel:
<html> <head> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> </head> <body> <div id='cssmenu'> <ul> <li><a href="#home" >Home</a></li> <li><a href="#about" class="active">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </body> </html>
Output:
We have taken sample examples as we discussed in the previous horizontal types but additionally, we add the border-radius in the style sheet.
Conclusion
Finally, we have concluded the session, like we have discussed in previous topics each and every HTML concepts have some more additional features that will depend on the versions. And also browser compatibility issue when comes to one version into another version. In the above horizontal menu bar not only the above concepts it will have further concepts also the same horizontal menu with textured tabs, and we have also used jquery plugins for further user attractive features if we need. If we won’t use the chrome browser in the web page output so we can add the tabbed and additionally blue screen type in CSS styles. When compare to HTML we have some additional features in jquery plugins.
Das obige ist der detaillierte Inhalt vonHorizontale Menüleiste in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!