DIV déroulante après un mouse hover

**Blooster** · 30/10/2012, 13h32

Bonjour à tous,

Dites moi j'ai un soucis à propos du menu déroulant.
J'aimerais mettre donc ma liste déroulante et a sa droite un input de recherche ( donc dans un formulaire ) mais même avec un float impossible de le mettre à droite il se met légèrement en dessous même si ils sont dans une DIV commune..

Si vous pouviez y jeter un oeil, je vous passe mon site il est actuellement en construction : www.blooster.fr

Je peux fournir le source pas de problème.

Merci de votre aide !

**Muchos** · 30/10/2012, 16h07

[EDIT 2012-10-30: Merci Blooster d'avoir complètement changé de sujet en éditant ton post Je laisse quand même ma réponse pour le sujet original]

Avec :hover, on peut par exemple jouer sur les dimensions et faire apparaître le menu.
Le problème, c'est que le bouton de connexion survolé n'agira pas sur un autre élément. Il ne peut agir que sur lui-même (voir Boîte réactive avec hover dans le code).

Il y a la solution du :target qui me paraît bien (voir Boîte réactive au clic dans le code). Ça réagit au clic, c'est rapide et plus évident à faire fonctionner.

Code html :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Boîtes réactives pour connexion</title>
	<style type="text/css">
.connect {color: #222; margin: 0.5em;}
.choix {
        list-style-type: none;
        padding: 0; margin: 0;
}
.choix a {
        display: block;
        color: white; background-color: #333; text-decoration: none;
        margin: 0.5ex; padding: 0.5ex;
}
.choix a:hover, #choix a:focus {
        color: #333; background-color: white; outline: thin solid #333;
}
.block {
        display: block;
        background-color: palegoldenrod;
        border: medium solid #333;
        text-decoration: none;
        text-align: center;
        margin: 0;
        padding: 0.5ex;
}
.block:hover {
        text-decoration: underline;
}
hr {clear: left;}
 
div {margin: 1em;}
 
#avec-hover {
        float: left;
        min-width: 10%;
        height: 1em;
        background-color: palegoldenrod;
        border: medium solid #333;
        padding: 0 1em 1em;
        text-align: center;
        overflow: hidden;
        -moz-transition: all 2s; /* Firefox */
        -webkit-transition: all 2s; /* Chrome et Safari */
        -o-transition: all 2s;  /* Opera */
        -ms-transition: all 2s;  /* IE */
        transition: all 2s;
}
#avec-hover:hover {height: 8em;}
 
#au-clic {
        float: left;
        left: 50%;
        min-width: 10%;
}
#clic-choix {display: none;}
#clic-choix:target {
        display: block;
        background-color: palegoldenrod;
        border: medium solid #333;
}
        </style>
</head>
 
<body>
	<h1>Boîtes réactives pour connexion</h1>
 
	<!-- BOITE RÉACTIVE AVEC HOVER -->
	<div id="avec-hover">
		<p class="connect">Avec hover !</p>
		<ul class="choix">
			<li><a href="#">site</a></li>			
			<li><a href="#">forum</a></li>
			<li><a href="#">exit</a></li>
		</ul>
	</div>
 
	<!-- BOITE RÉACTIVE AU CLIC -->
	<div id="au-clic">
		<a class="connect block" href="#clic-choix">Au clic !</a>
		<ul id="clic-choix" class="choix">
			<li><a href="#">site</a></li>			
			<li><a href="#">forum</a></li>
			<li><a href="#">exit</a></li>
		</ul>
	</div>
 
<hr />
</body>
</html>

Dans tous les cas, pour ne pas "pousser" le contenu qui est sous les menus (ici, une <hr>), il faudra :

Ou donner une hauteur au conteneur de ton menu égale à celle du menu déployé,
Ou bien faire sortir ton menu du flux (avec position: absolute par ex.).

**Muchos** · 30/10/2012, 16h21

[Réponse nouveau sujet]

Pour mettre des éléments sur la même ligne, il faut :

Ou qu'ils soient en ligne (inline ou inline-block),
Ou qu'ils flottent. Si tu attribues {float: left;} à ta liste déroulante, tu verras qu'elle se met sur la même ligne que le formulaire de recherche.

**Blooster** · 30/10/2012, 16h25

Oh mince je suis complètement désolé je n'ai pas fait attention si il y avait un membre entrain de me répondre.

J'ai réussi à trouver comme faire ma liste déroulante finalement mais j'ai un autre problème avec celle-ci c'est pour sa que j'ai voulu changé rapidement^^

**NoSmoking** · 30/10/2012, 18h37

Bonjour,
extrait de ton code

Code html :

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

1
2
3
4
5
6
<div class="search">
  <form action="http://www.blooster.fr/search.php" method="get" id="searchform">
    <input type="text" value="Tapez votre texte" name="s" class="inputText" onfocus="javascript:this.value=''"/>
    <input type="submit" value="Go !" class="btn_submit"/>
  </form>
</div>

où est l'interêt de mettre ton 1st INPUT en display:block et float:left, laisse le naturellement dans le flux ???

remarque : onfocus attend une action javascript, donc inutile de le préciser, onfocus="this.value='';".

DIV déroulante après un mouse hover

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager