Boites déroulantes au survol de la souris
Résolu/Fermé
A voir également:
- Boites déroulantes au survol de la souris
- Quelle touche pour débloquer la souris ? - Guide
- Liste déroulante de choix excel - Guide
- Autoclick souris - Télécharger - Divers Utilitaires
- Souris inversée - Guide
- Pointeur souris - Guide
6 réponses
jean448
Messages postés
1331
Date d'inscription
mardi 29 décembre 2009
Statut
Membre
Dernière intervention
26 janvier 2017
237
Modifié par baladur13 le 26/10/2013 à 21:15
Modifié par baladur13 le 26/10/2013 à 21:15
Salut
Je vois pas trop ton problème, du fait que tout est expliqué sur la même page
Signature non conforme supprimée par la Modération CCM
Je vois pas trop ton problème, du fait que tout est expliqué sur la même page
Signature non conforme supprimée par la Modération CCM
regarde ici alors http://pito2901.blogspot.com/p/mes-videos.html
Mon souci est que je veux faire sur la droite, un boite déroulante qui contient 5 "sous-"boites déroulantes et ces 5 la, je voudrais quelle contiennent chacune environ 10 liens.
je cherche en fait à avoir le code.
Mon souci est que je veux faire sur la droite, un boite déroulante qui contient 5 "sous-"boites déroulantes et ces 5 la, je voudrais quelle contiennent chacune environ 10 liens.
je cherche en fait à avoir le code.
jean448
Messages postés
1331
Date d'inscription
mardi 29 décembre 2009
Statut
Membre
Dernière intervention
26 janvier 2017
237
21 juin 2013 à 21:38
21 juin 2013 à 21:38
Salut
Voilà le code il suffit de l'adapter ( couleur, taille, nb de li... , mais le plus gros est fais)
<!doctype html>
<html lang="fr">
<head>
<title>Ma page</title>
<style>
.ma_boite
{
width:200px;
height:18px;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
.ma_boite:hover
{
height:200px;
}
.title_box
{
color:black;
background-color:salmon;
border: 1px solid black;
border-radius: 5px;
}
.ma_sous_boite
{
width:150px;
height:18px;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
.ma_sous_boite:hover
{
height:90px;
}
.title_sous_box
{
color:black;
background-color:#00A500;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
</body>
</html>
Voilà le code il suffit de l'adapter ( couleur, taille, nb de li... , mais le plus gros est fais)
<!doctype html>
<html lang="fr">
<head>
<title>Ma page</title>
<style>
.ma_boite
{
width:200px;
height:18px;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
.ma_boite:hover
{
height:200px;
}
.title_box
{
color:black;
background-color:salmon;
border: 1px solid black;
border-radius: 5px;
}
.ma_sous_boite
{
width:150px;
height:18px;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
.ma_sous_boite:hover
{
height:90px;
}
.title_sous_box
{
color:black;
background-color:#00A500;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ça marche super bien merci beaucoup et bravo pour votre site !
jean448
Messages postés
1331
Date d'inscription
mardi 29 décembre 2009
Statut
Membre
Dernière intervention
26 janvier 2017
237
21 juin 2013 à 22:38
21 juin 2013 à 22:38
Ça fait plaisir :)