Boites déroulantes au survol de la souris
Résolu
Profil bloqué
-
Profil bloqué -
Profil bloqué -
A voir également:
- Boites déroulantes au survol de la souris
- Quelle touche pour débloquer la souris ? - Guide
- Souris ordinateur - Guide
- La boite a couleur - Télécharger - Divers Photo & Graphisme
- Liste déroulante de choix excel - Guide
- Souris hid ✓ - Forum souris / Touchpad
6 réponses
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.
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