Discussion :

[thirt]

Bonjour à tous,

en fait, j'aimerais savoir ce que vous pensez de la barre de recherche que je compte mettre sur mon site.

En fait, j'aimerais bien avoir 2 boutons (images) avec une loupe de différente couleur. Naturellement, j'aurais également un champ de texte pour la recherche. J'aimerais que quand l'utilisateur clique sur la 1ère image (bouton) que le champ de recherche d'agrandisse et que cette image (bouton) disparaisse pour laisser apparaître l'autre image (bouton). Quand l'utilisateur cliquera sur cette autre image (bouton), ce sera pour soumettre le formulaire et donc, lancer la recherche.

Naturellement, les 3 éléments seraient positionnés au même endroit (champ de texte, 1ère et 2 ème images). Ce serait la 1ère image qui serait affichée afin de permettre l'extension de la barre de recherche.

Voici comment je compte implémenter la solution au niveau HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="search-bar">
	<form id="form-search" class="form-search" method="GET" action="../../app/Search/search.php">
		<div class="search-box"> 
			<input type="text" name="search-input" id="search-input" class="search-input" placeholder="" />
		</div>
		<div class="search-actions">
			<img src="../public/img/magnifying_glass_white.png" id="bt-expand" class="bt-expand" alt="extension" />
			<img src="../public/img/magnifying_glass_black.png" id="bt-search" class="bt-search" alt="recherche" />
		</div>
	</form>
</div>

Voici également le code CSS actuel mais, malheureusement, il n'y a pas grand chose qui fonctionne car je ne maîtrise pas du tout le positionnement entre autre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.search-bar {
  float: right;
}  
 
.form-search {
  display: inline-block;
  position: relative;
  top: 10px;
  right: 15px;
}
 
.search-input {
  padding: 5px 5px 5px 20px;
  margin-right: 15px;
  border: none;
  outline: none;
  width: 0px;
  height: 15px;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  -ms-transition: width 0.5s;
}
 
.bt-expand {
  background-color: #222A35;
}
 
.bt-expand:focus {
  width: 200px;
  border: 3px solid #FFF;
  border-radius: 40px;
  cursor: auto;
}
 
.bt-expand:hover, .bt-search:hover {
  cursor: pointer;
}
 
#search-input .expandable {
  width: 200px;
  border: 3px solid #FFF;
  border-radius: 40px;
}
 
#bt-expand .expandable {
  visibility: hidden;
}
 
#bt-search .expandable {
  visibility: visible;
}
 
.search-result {
  background-color: #f6f6f6;
}
 
/* Pour tout ce qui est au-dessus de 640px */
@media only screen and (min-width: 640px) {
  .form-search {
      margin: 0 auto;
  }
 
  .search-result {
      margin-left: 235px;
  }
}

Finalement, afin d'étendre la barre de progression quand on clique sur la 1ère image (button), j'aurai un événement click en javascript qui va ajouter une classe qui permettra d'étendre la barre de recherche et de cacher la 1ère image (bouton) pour afficher la 2ème image (bouton).

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    $('#bt-expand').on('click', function(e) {
        $('#bt-expand').toggleClass('expandable');
        $('#bt-search').toggleClass('expandable');
        $('#search-input').toggleClass('expandable');
    });

La classe "expandable" est bien ajoutée sur les 3 éléments mais le code CSS de cette classe ne s'applique pas sur ces éléments ?

J'aurai également un second événement javascript qui soumettra le formulaire quand on cliquera sur la 2ème image (bouton).

Qu'en pensez-vous ?

Merci d'avance

Bonne journée
Thierry

[Invité]

As-tu vu la barre de recherche de ce site, en haut à droite ?
Clique sur la loupe + regarde les codes.

Et intéresse-toi la balise <button>.
Ce n'est pas la peine d'abuser du JS...

D'autre part, tu n'es pas le 1er à faire une barre de recherche.
Il existe sûrement des scripts.
Fais une... recherche !

[Invité]

Une solution, full CSS : https://codepen.io/jreaux62/pen/BaBjmNP

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<header>
 
  <aside id="searchbartop">
    <input type="checkbox" id="searchbartopbtn" />
    <label for="searchbartopbtn">?</label>
    <form method="post" action="">
      <div><input type="text" value="" /></div>
      <button type="submit">OK</button>
    </form>
  </aside>
 
</header>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#searchbartop {
  position:absolute;
  top:2px; right:2px;
}
#searchbartop #searchbartopbtn { 
  position:absolute; 
  left: -9999px;
}
#searchbartop #searchbartopbtn + label { 
  display:inline-block; 
  cursor:pointer;
  width:24px; height:24px;
  line-height:24px;
  text-align:center;
  background:#ccc;
}
#searchbartop #searchbartopbtn:checked + label {
  background:#ddd; color:#aaa;
}
#searchbartop form {
  position:absolute; 
  top:0; right:24px;
  display:none;
}
#searchbartop form > button, #searchbartop form > div {
  display:table-cell;
  height:24px;
}
#searchbartop #searchbartopbtn:checked ~ form {
  display:table;
}
#searchbartop form > div > input {
  width:0;
}
#searchbartop #searchbartopbtn:checked ~ form > div > input {
  animation: expand 0.5s ease-in-out 1;
	animation-fill-mode: forwards;
}
@keyframes expand {
  from { width:0; }
  to   { width:200px; }
}

[thirt]

Bonsoir Jérôme,

encore merci pour votre aide et vos conseils.

Je vais tenir compte de votre solution pour l'inclure au niveau de mon site. Merci beaucoup.

J'ai juste une question à vous poser. Par rapport à ce que vous m'avez déjà expliqué, ne faut-il pas utiliser la méthode "get" plutôt que "post" pour le formulaire ?

Bonne soirée à vous,
Thierry