Barre de menu horizontale en HTML
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1655
14
1413
52
1306
25
1252
29
1226
24
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
