Les éléments d’interface graphique interactifs facilitent l’utilisation de votre application. HTML comprend plusieurs composants de formulaire par défaut, mais vous souhaiterez utiliser CSS pour qu’ils correspondent à votre conception. Vous pouvez également utiliser JavaScript pour étendre ou modifier leur comportement.
Vous pouvez créer de tels composants à l’aide d’une bibliothèque comme Tailwind, mais il est également utile de savoir comment les créer à partir de zéro.
Découvrez comment créer une barre de recherche masquée à l’aide de HTML, CSS et JavaScript.
UTILISEZ LA VIDÉO DU JOURFAITES DÉFILER POUR CONTINUER AVEC LE CONTENUCréer la structure du contenu avec HTML
Voici le code HTML de la fonctionnalité. Vous aurez un élément parent qui contient une entrée et un élément bouton. Vous importerez également des scripts impressionnants de polices pour l’icône de recherche. Dans ce cas, vous utiliserez l’icône de recherche en forme de loupe.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/d69fb28507.js" crossorigin="anonymous"></script>
<title>Hidden Search Bar</title>
</head>
<body>
<div class="parent">
<input class="input" type="type" placeholder="Search..." />
<button class="btn">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</body>
</html>
Styliser l’interface à l’aide de CSS
Dans le fichier CSS, vous devez donner à l’élément parent la position relative. Une position relative permet aux éléments input et button de se déplacer autour du parent. Le Propriété de position CSS contrôle plusieurs types de mise en page, il est donc important de comprendre.
Vous alignerez également les deux éléments au centre pour une meilleure visibilité. Mais sur votre application, vous pouvez choisir d’avoir la barre de recherche quand vous le souhaitez. Donnez également aux deux éléments la même largeur afin qu’ils aient la même taille et qu’ils ne soient pas plus grands l’un que l’autre.
Ensuite, vous devez donner au parent une classe active pour les éléments d’entrée et de bouton. De cette façon, il se transformera comme spécifié chaque fois que l’élément se déplacera.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
background-color: #d9d9d9;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
position: relative;
}
.input {
outline: none;
border: none;
border-radius: 100px;
padding: 5px 10px;
width: 40px;
transition: width 0.3s ease;
}
.input::placeholder {
color: green;
}
.parent.active .input {
width: 200px;
}
.btn {
width: 40px;
padding: 5px 10px;
cursor: pointer;
border-radius: 100px;
border: none;
background: green;
display: inline;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
transition: transform 0.3s ease;
}
.parent.active .btn {
transform: translateX(210px);
}
.fa-solid {
color: #ffffff;
}
Vous devriez avoir un bouton de recherche ressemblant à ceci :
Ajouter une fonctionnalité JavaScript
Ensuite, écrivez le code JavaScript pour les éléments. Tout d’abord, sélectionnez les éléments parent, input et button à l’aide de JavaScript querySelector() méthode.
Ensuite, ajoutez un écouteur d’événement de clic au bouton. Ainsi, lorsqu’il est cliqué, le bouton bascule en fonction de la classe sélectionnée. Ajouter le se concentrer() méthode pour définir le focus sur l’élément spécifié. Il commence à clignoter chaque fois que la barre de recherche se développe.
let input = document.querySelector(".input");
let btn = document.querySelector(".btn");
let parent = document.querySelector(".parent");btn.addEventListener("click", () => {
parent.classList.toggle("active");
input.focus();
});
Si vous cliquez sur le bouton, il ouvre la barre de recherche et vice versa. Il apparaît comme indiqué dans le schéma suivant :
Maintenant, si vous saisissez des informations et cliquez sur le bouton, il se ferme pendant que le système recherche les informations.
Cool, n’est-ce pas ? Vous pouvez voir ce code et jouer avec la barre de recherche sur codepen.io. Vous pouvez personnaliser davantage la barre de recherche en créant un liste de la barre de recherche d’articles. Cela permet à vos utilisateurs d’effectuer plus facilement des recherches sur l’application.
Autres fonctionnalités que vous pouvez créer
En tant que débutant en développement Web, vous pouvez créer de nombreuses fonctionnalités avec HTML, CSS et JavaScript. Vous pouvez créer une fenêtre contextuelle/modale, un curseur d’image, une mise à jour automatique du pied de page et bien d’autres.
De tels projets créatifs sont parfaits pour apprendre les concepts de programmation. Vous pouvez appliquer les compétences au fur et à mesure que vous les apprenez, ce qui augmente l’utilité de la compétence. De plus, vous pouvez créer d’excellentes interfaces utilisateur que vous et vos utilisateurs apprécierez. Utilisez ce guide pour créer une barre de recherche masquée et d’autres fonctionnalités interactives pour votre site.
to www.makeuseof.com
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931