Maison > Article > interface Web > Barre de menu horizontale en HTML
Barre de menu horizontale en HTML
- WBOYoriginal
- 2024-09-04 16:45:31551parcourir
En HTML, nous avons un ensemble différent de fonctionnalités à utiliser, mises en évidence et plus attrayantes pour l'utilisateur final. Nous avons déjà discuté dans l'article précédent concernant les barres de défilement, comme la même chose dans les barres de menus, qui ont également des fonctionnalités supplémentaires offertes à l'utilisateur final. Généralement, une barre de menus permet de catégoriser le contenu et augmente la lisibilité de la page Web. Devenir plus interactif dans la barre de menus de l'utilisateur vous aide de la manière la plus simple. Les barres de défilement ont à la fois des types horizontaux et verticaux, comme dans les barres de menus, ainsi que les deux éléments qui doivent être utilisés par les développeurs. Nous verrons plus de détails dans les concepts ci-dessous.
Syntaxe :
Lorsque nous utilisons des barres de menu horizontales/verticales, nous devons utiliser CSS pour refléter les styles dans toutes les parties des pages HTML. Généralement, les barres de navigation ont besoin d'un code HTML standard comme base pour l'implémentation des documents enfants ou sous-dérivés. Les barres de navigation ou les barres horizontales contiennent essentiellement une liste de liens, donc en utilisant le bouton
- les éléments sont la syntaxe des bases ci-dessous.
<style>
ul{
}
li variablename:hover{
}
</style>
<body>
<ul>
<li>
</li>
</ul>
</body>
Le code ci-dessus est la syntaxe de base de la barre de menu horizontale.
Exemples de barre de menu horizontale en HTML
Nous avons vu quelques exemples pour mieux comprendre les concepts.
Exemple n°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>
Exemple de sortie :
Dans l'exemple ci-dessus, nous afficherons les éléments de menu en vue horizontale lorsque nous créons la page Web. Généralement, nous verrons que seuls les éléments de menu sont dans le panneau horizontal car la vue personnalisée par l'utilisateur ici est par ligne, nous utiliserons donc horizontalement. La même classe de style CSS est disponible pour tous les documents HTML.
Exemple n°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>
Exemple de sortie :
Le deuxième exemple est identique au premier exemple mais ici nous n'utiliserons aucun style CSS dans les documents HTML.
balise nous utiliserons certains styles CSS comme les familles de polices, la largeur, la hauteur, etc
Exemple #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>
Exemple de sortie :
Quelques types de menus horizontaux gratuits :
Chaque fonctionnalité était constituée de collections pour les différents scénarios. Quelque chose dans les menus horizontaux était du CSS pur et ils utiliseront également javascript pour s'assurer qu'ils sont réactifs et fonctionnent sur mobile.
Certaines navigations horizontales fonctionnent parfaitement et certaines fonctionnalités ne sont pas prises en charge dans les scripts et également des problèmes de compatibilité du navigateur. Dans la conception de sites Web, la barre horizontale est idéale pour un look minimaliste et fonctionne également bien pour donner à l'utilisateur un espace d'interface de navigation simple.
Menu de navigation horizontale réactif en orange :
C'est l'un des types du menu horizontal, c'est un menu léger et minimaliste avec des styles CSS entièrement purs. Le menu est également réactif et se transforme en un type de menu vertical sur l'appareil mobile, prend en charge la visualisation des petits écrans pour utiliser les mobiles. Sur ordinateur, ils ne changeront rien, cela fonctionnera uniquement sur les écrans du navigateur Web et de même sur les téléphones mobiles.
Exemple :
<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>
Sortie :
Types de menus horizontaux à onglets verts :
Ce menu est l'un des modèles de conception du panneau horizontal dans une interface à onglets. Il utilisera des applications vastes et coûteuses telles que les applications d'achat/vente de produits. Il sera utile à l'utilisateur final de cliquer sur les différents éléments de menu très rapidement et facilement pour obtenir les résultats de la base de données vers un utilisateur. Dans le type ci-dessus, nous utiliserons certains scripts comme jquery, mais ici nous n'utiliserons que HTML et CSS afin de charger rapidement les données sur les écrans utilisateur. Reprenons le même exemple dans le sujet précédent
Exemple :
<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>
Sortie :
Le même exemple que nous avons pris mais avec certains styles CSS, nous avons modifié et mis à jour le fichier HTML. Chaque fois que nous plaçons le curseur de la souris dans l'onglet, le texte est automatiquement mis en surbrillance avec la couleur verte mentionnée afin qu'il change lorsque le curseur de la souris se déplace dans un autre onglet en fonction du choix de l'utilisateur.
Enveloppement à bulles dans la barre horizontale :
Dans cette barre de menu, comme dans les types précédents, nous utiliserons entièrement les styles CSS sur le HTML. De plus, nous ajouterons la propriété border-radius qui devrait être activée, elle ressemblera alors à des types de bulles. Nous verrons le même exemple avec différents styles CSS et la sortie affichée comme le code ci-dessous avec les résultats.
Exemple :
<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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!