18041 sujets

Questions générales et questions de débutants

[Résolu] Création d'une barre de recherche qui apparaît

Bonjour à tout le monde !

J'aimerai créer dans ma barre de menu, une barre de recherche ! (bon ça va ça c'est pas trop compliqué !) mais par contre j'aimerai n'avoir que la loupe (pour montrer l'onglet recherche) et lorsqu'on clique dessus la barre de recherche apparaît juste à côté pour permettre de faire une recherche.

Est-il possible de faire cela en utilisant que HTML et le CSS?

Je vous donne deja mon html pour vous montrer ce que j'ai pour le moment : 

<div>
	<nav id="menu">
		<ul>
			<li><a class="menu" href="http://laparteparis.oxatis.com/PBCPPlayer.asp?ID=1813509">Accueil</a></li>
			<li><a class="menu" href="PBSCCatalog.asp?PBMInit=1">Produits</a></li>
			<li><a class="menu" href="PBCPPlayer.asp?ID=1799829">Galerie</a></li>
			<li><a class="menu" href="PBCPPlayer.asp?ID=1799047">A propos</a></li>
			<li><a class="menu" href="PBCPPlayer.asp?ID=1799045">Contact</a></li>
			<li><a class="menu" href="/Default.asp?PGFLngID=0">FR</a></li>
			<li><a class="menu" href="/Default.asp?PGFLngID=1">EN</a></li>
			<li><form id=barre_recherche action="PBSearch.asp" method="post" name="headerSearch">
				<input type="hidden" name="ActionID" value="1">
				<input type="hidden" name="CCode" value="2">
				<input type="hidden" name="ShowSMImg" value="1">
				<input type="text" onfocus="this.value='';" id="headerSearchText" name="SearchText" class="searchtext" value="Rechercher..." size="15">
				<input type="submit"  id="bouton" value="OK"name="bouton">
			</form>
		    </li>
		</ul>
	</nav>
</div>


et mon CSS: 

#menu
ul{
  text-align:center;
  padding-bottom:30px;
}
ul li{
  display:inline-block;
  padding-bottom:30px;
}


nav#menu ul
{
	padding: 10px;
	padding-bottom:30px;
	margin:auto;
	margin-bottom:30px;
	max-width: 1400px;
  	min-width: 400px;
	list-style: none;
	text-align:center;

}


nav#menu ul li
{
		display: inline-block;
		margin: 0 10px;
		margin-bottom: 20px;
}


nav#menu a
{
	display: inline-block;
	font-size: 1.2em;
	font-family:helvetica;
	color: #A4A4A4;
	margin: 20 30px;
	text-decoration: none;
	text-transform: uppercase;
	margin-bottom: 20px;


}

nav#menu a:hover
{
	background-color: ;
	color: black;
}

#barre_recherche
{
	text-align:center;

} 



#headerSearchText
{
	font-family:helvetica;
	font-size:1.2em;
	color:#A4A4A4;
	border:none;
}

#bouton
{
	border:none;
	background-image:url(/Files/124048/Img/17/loupe.png );
	background-repeat:no-repeat;
	background-color: transparent;
	background-position:center;


Merci d'avance pour votre aide !
Bonjour,

Dans un premier temps je modifierais ma barre de recherche en remplaçant l'attribut value par placeholder puis j’inclurais un pattern obligeant la saisie d'au moins un caractère.

Le Placeholder afin que mon champs soit invalide par défaut;
Le Pattern afin de contrôler sa validité.

Ensuite en Css, je définirais par défaut l'opacité de #bouton à 0.5 par exemple.

Enfin j'ajouterais la règle suivante:
#headerSearchText:valid + #bouton {
  opacity: 1;
}


Si nécessaire, il te faudra styliser ton placeholder comme le champs lui-même.

T'en penses quoi ?
Bonjour Greg_Lumiere,

C'est-à dire que je change:

value=Recherche en placeholder=Rechercher ?
Par contre, je ne comprend pas ce que je dois mettre pour Pattern... Smiley sweatdrop

Merci de ton aide !
Chacoulisse a écrit :

value=Recherche en placeholder=Rechercher ?
C'est ce je veux dire, oui. En plus pour les contrôles ce sera plus facile d'évaluer si une valeur est vide plutôt que de vérifier qu'elle ne correspond pas au terme "Rechercher..."

Chacoulisse a écrit :

Par contre, je ne comprend pas ce que je dois mettre pour Pattern... Smiley sweatdrop
De mémoire il me semble qu'il faille mettre un point (n'importe quel caractère) suivit de {1,} (1 fois ou plus).

Ces quelques liens devraient t'aider :
Tutoriel sur les regexp (ndlr: regexp = expression régulière)
Regexp: les symboles
Tester ses regexp
HTML5Pattern

Bonne lecture !

PS: Attention quand même car selon le langage, il peut y avoir des variations dans la syntaxe ; ainsi un pattern en php doit être adapté pour fonctionner en html5.
Modifié par Greg_Lumiere (09 Dec 2016 - 13:54)
Modérateur
Greg_Lumiere a écrit :

De mémoire il me semble qu'il faille mettre un point (n'importe quel caractère suivit de {1,} (1 fois ou plus).

Si c'est la seule validation, l'attribut «required» me semble plus indiqué?
Ha oui, pas bête ! Je n'y avais pas pensé, très bon conseil ! Smiley biggrin


Edit : Heu, le sélecteur :valid/:invalid fonctionne sans pattern ?
Modifié par Greg_Lumiere (09 Dec 2016 - 13:26)
Modérateur
Oui, les statuts dépendent de la validation de l'élément. Ce qui peut valider un invalider les éléments sont les attributs: pattern, required, min, max, step, maxlength, ainsi que certains types (email, url, etc.)
Bponjour Chacoulisse, déterrage de topic mais cela aurait été intéressant de donner la solution trouvée Smiley cligne
Merci d'avance
Sujet clos
Aller à