Problème menu vertical dynamique
Fermé
lilou
-
20 févr. 2012 à 19:50
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 - 28 févr. 2012 à 11:37
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 - 28 févr. 2012 à 11:37
A voir également:
- Problème menu vertical dynamique
- Tableau croisé dynamique - Guide
- Menu déroulant excel - Guide
- Ps5 vertical - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
6 réponses
salut
quels sont tes connaissances ?
html ? css ? javascript ? jquery ? php ? ..
un menu comme celui ci en css3 est possible, en jquery aussi mais encore faut il s'y connaitre.
as tu un exemple de code ou de site sur lequel on pourrait t aider?
sans plus d'informations difficile de pouvoir t aider désolé.
quels sont tes connaissances ?
html ? css ? javascript ? jquery ? php ? ..
un menu comme celui ci en css3 est possible, en jquery aussi mais encore faut il s'y connaitre.
as tu un exemple de code ou de site sur lequel on pourrait t aider?
sans plus d'informations difficile de pouvoir t aider désolé.
Coucou,
Le html et css c'est plus ma tasse de thé mais bon j'apprend et m'exerce en local pour l'instant.
J'ai trouvé un menu vertical dont voici le code, j'aimerais le personnaliser pour donner l'effet du menu apparaissant au passage de la souris et qui disparait quand le curseur s'en va comme vue ici:
http://www.velorizons.com/
Code du menu vertical:
Le html et css c'est plus ma tasse de thé mais bon j'apprend et m'exerce en local pour l'instant.
J'ai trouvé un menu vertical dont voici le code, j'aimerais le personnaliser pour donner l'effet du menu apparaissant au passage de la souris et qui disparait quand le curseur s'en va comme vue ici:
http://www.velorizons.com/
Code du menu vertical:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body {
font: 11px verdana, sans-serif;
background:url("http://www.cireasy.com/images/fondmenuderoulant.png") no-repeat scroll center top #FFFFFF;;
margin: auto ;
padding: 0;
}
#menu
{
width:600px; /*je met une largeur correspondant a mon image de fond pour le placer a gauche dans l'image */
height: auto;
list-style-type: none;
margin: auto; /*je met un margin auto pour le centrer dans la page avec l'image*/
padding: 0;
border: 0;
}
#menu > li
{
width: 120px;
margin: 5px;
padding: 0;
border: 0;
}
#menu li a{
display: block;
color: #FFFFFF;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4px 8px;
border:1px solid #FFFFFF;
text-decoration: none;
}
#menu li a:hover {
background-color: rgb(175, 214, 1);
background-color: rgba(175, 214, 1, 0.5);
}
#menu .menuderoulant {
width:160px; /*une largeur supérieur au menu li pour se rendre sur le menuderoulant meme avec un espace*/
display: none;
list-style-type: none;
margin: -23px 0 0 115px; /*une marge top inferieur pour remonter le menuderoulant et une marge left pour le decaler à droite du menu*/
padding: 0;
border: 0;
position:absolute; /*pour eviter tout decalage*/
}
#menu .menuderoulant li
{
float: right;
margin:0 auto;
padding: 0;
border: 0;
width: 150px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color:rgb(0, 0, 0);
background-color:rgba(0,0,0,0.5);
}
#menu .menuderoulant li a:hover
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);
}
#menu .menuderoulant li a:visited {
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}
#menu li:hover > .menuderoulant {
display: block;
}
</style>
<!--[if IE]>
<style type="text/css">
#menu li a {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
zoom:1; /* important pour ie7*/
}
#menu li a:hover {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80AFD601,endColorstr=#80AFD601);
zoom: 1;
}
#menu .menuderoulant li a {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
zoom: 1;
}
#menu .menuderoulant li a:hover {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C01259EF,endColorstr=#C01259EF);
zoom: 1;
}
#menu .menuderoulant li a:visited {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0E3161E,endColorstr=#C0E3161E);
zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li>
<a href="#1">Menu 1</a>
<ul class="menuderoulant">
<li><a href="#2">sous menu </a></li>
<li><a href="#3">encore un sous menu !</a></li>
<li><a href="#4">bah ! allez un autre !</a></li>
</ul>
</li>
<li>
<a href="#5">Menu 2</a>
<ul class="menuderoulant">
<li><a href="#6">sous menu </a></li>
<li><a href="#7">et un autre</a></li>
<li><a href="#8">encore un</a></li>
<li><a href="#9">un autre</a></li>
<li><a href="#10">le même</a></li>
</ul>
</li>
<li>
<a href="#21">Menu 3</a>
<ul class="menuderoulant">
<li><a href="#11">et bin v'la un autre sous menu</a></li>
<li><a href="#12">et un autre</a></li>
<li><a href="#13">puis un autre</a></li>
<li><a href="#14">taratata</a></li>
<li><a href="#15">fait beau hein !</a></li>
<li><a href="#16">oui mais froid</a></li>
<li><a href="#17">jamais content celui-là </a></li>
<li><a href="#18">c'est sur</a></li>
<li><a href="#19">en même temps</a></li>
<li><a href="#20">c'est vrai</a></li>
</ul>
</li>
<li>
<a href="#22">Menu 4</a>
<ul class="menuderoulant">
<li><a href="#23">sous catégorie</a></li>
<li><a href="#24">ça change de sous menu</a></li>
<li><a href="#25">mettez-y ce qu'il vous plait</a></li>
<li><a href="#26">allez encore un</a></li>
<li><a href="#27">puis un autre</a></li>
<li><a href="#28">et puis un autre</a></li>
<li><a href="#29">c'est rudement joli hein !</a></li>
<li><a href="#30">moi ça me plait bien</a></li>
<li><a href="#31">pourait etre mieux </a></li>
<li><a href="#32">oui mais c'est plus cher !</a></li>
</ul>
</li>
</ul>
</body>
</html>
vincent170186
Messages postés
316
Date d'inscription
mardi 17 mars 2009
Statut
Membre
Dernière intervention
28 septembre 2012
52
21 févr. 2012 à 16:20
21 févr. 2012 à 16:20
salut,
alors j'ai un peu bidouiller ton code, pour que ça donne ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
var on_anim=1;
function anim_menu()
{
$("#menu li").hover(
function () {
stop();
if (on_anim==1)
{
on_anim=0;
$(this).children("ul").slideDown("slow", function() {
});
}
},
function () {
// alert ('out');
stop();
on_anim=1;
$(this).children("ul").slideUp("slow");
}
);
}
$(document).ready(function(){
anim_menu();
});
</script>
<style type="text/css">
body {
font: 11px verdana, sans-serif;
background:url("http://www.cireasy.com/images/fondmenuderoulant.png") no-repeat scroll center top #FFFFFF;;
margin: auto ;
padding: 0;
}
#menu
{
width:600px; /*je met une largeur correspondant a mon image de fond pour le placer a gauche dans l'image */
height: auto;
list-style-type: none;
margin: auto; /*je met un margin auto pour le centrer dans la page avec l'image*/
padding: 0;
border: 0;
}
#menu > li
{
width: 120px;
margin: 5px;
padding: 0;
border: 0;
}
#menu li a{
display: block;
color: #FFFFFF;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4px 8px;
border:1px solid #FFFFFF;
text-decoration: none;
}
#menu li a:hover {
background-color: rgb(175, 214, 1);
background-color: rgba(175, 214, 1, 0.5);
}
#menu .menuderoulant {
width:160px; /*une largeur supérieur au menu li pour se rendre sur le menuderoulant meme avec un espace*/
display: none;
list-style-type: none;
margin: 0px 0 0 -8px; /*une marge top inferieur pour remonter le menuderoulant et une marge left pour le decaler à droite du menu*/
padding: 0;
border: 0;
/*position:absolute; /*pour eviter tout decalage*/
}
#menu .menuderoulant li
{
/*float: right;*/
margin:0 auto;
padding: 0;
border: 0;
width: 150px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .menuderoulant li a
{
/*display: block;*/
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color:rgb(0, 0, 0);
background-color:rgba(0,0,0,0.5);
}
#menu .menuderoulant li a:hover
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);
}
#menu .menuderoulant li a:visited {
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}
#menu ul
{ background:none;}
/*#menu li:hover > .menuderoulant {
display: block;
}*/
</style>
<!--[if IE]>
<style type="text/css">
#menu li a {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
zoom:1; /* important pour ie7*/
}
#menu li a:hover {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80AFD601,endColorstr=#80AFD601);
zoom: 1;
}
#menu .menuderoulant li a {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
zoom: 1;
}
#menu .menuderoulant li a:hover {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C01259EF,endColorstr=#C01259EF);
zoom: 1;
}
#menu .menuderoulant li a:visited {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0E3161E,endColorstr=#C0E3161E);
zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li>
<a href="#1">Menu 1</a>
<ul class="menuderoulant">
<li><a href="#2">sous menu </a></li>
<li><a href="#3">encore un sous menu !</a></li>
<li><a href="#4">bah ! allez un autre !</a></li>
</ul>
</li>
<li>
<a href="#5">Menu 2</a>
<ul class="menuderoulant">
<li><a href="#6">sous menu </a></li>
<li><a href="#7">et un autre</a></li>
<li><a href="#8">encore un</a></li>
<li><a href="#9">un autre</a></li>
<li><a href="#10">le même</a></li>
</ul>
</li>
<li>
<a href="#21">Menu 3</a>
<ul class="menuderoulant">
<li><a href="#11">et bin v'la un autre sous menu</a></li>
<li><a href="#12">et un autre</a></li>
<li><a href="#13">puis un autre</a></li>
<li><a href="#14">taratata</a></li>
<li><a href="#15">fait beau hein !</a></li>
<li><a href="#16">oui mais froid</a></li>
<li><a href="#17">jamais content celui-là </a></li>
<li><a href="#18">c'est sur</a></li>
<li><a href="#19">en même temps</a></li>
<li><a href="#20">c'est vrai</a></li>
</ul>
</li>
<li>
<a href="#22">Menu 4</a>
<ul class="menuderoulant">
<li><a href="#23">sous catégorie</a></li>
<li><a href="#24">ça change de sous menu</a></li>
<li><a href="#25">mettez-y ce qu'il vous plait</a></li>
<li><a href="#26">allez encore un</a></li>
<li><a href="#27">puis un autre</a></li>
<li><a href="#28">et puis un autre</a></li>
<li><a href="#29">c'est rudement joli hein !</a></li>
<li><a href="#30">moi ça me plait bien</a></li>
<li><a href="#31">pourait etre mieux </a></li>
<li><a href="#32">oui mais c'est plus cher !</a></li>
</ul>
</li>
</ul>
</body>
</html>
bon il y a ecore n petit bug si tu survole tuot d'un coups mais je pense que ça peut te mettre sur une piste
j'ai utilisé la librairie jquery --> https://jquery.com/
et la fonction slideUp --> http://jquery.developpeur-web2.com/documentation/effets/slideup.php
et slide Down --> http://jquery.developpeur-web2.com/documentation/effets/slidedown.php
voila si tu as besoin d'autr details n'hesite pas !
alors j'ai un peu bidouiller ton code, pour que ça donne ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
var on_anim=1;
function anim_menu()
{
$("#menu li").hover(
function () {
stop();
if (on_anim==1)
{
on_anim=0;
$(this).children("ul").slideDown("slow", function() {
});
}
},
function () {
// alert ('out');
stop();
on_anim=1;
$(this).children("ul").slideUp("slow");
}
);
}
$(document).ready(function(){
anim_menu();
});
</script>
<style type="text/css">
body {
font: 11px verdana, sans-serif;
background:url("http://www.cireasy.com/images/fondmenuderoulant.png") no-repeat scroll center top #FFFFFF;;
margin: auto ;
padding: 0;
}
#menu
{
width:600px; /*je met une largeur correspondant a mon image de fond pour le placer a gauche dans l'image */
height: auto;
list-style-type: none;
margin: auto; /*je met un margin auto pour le centrer dans la page avec l'image*/
padding: 0;
border: 0;
}
#menu > li
{
width: 120px;
margin: 5px;
padding: 0;
border: 0;
}
#menu li a{
display: block;
color: #FFFFFF;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4px 8px;
border:1px solid #FFFFFF;
text-decoration: none;
}
#menu li a:hover {
background-color: rgb(175, 214, 1);
background-color: rgba(175, 214, 1, 0.5);
}
#menu .menuderoulant {
width:160px; /*une largeur supérieur au menu li pour se rendre sur le menuderoulant meme avec un espace*/
display: none;
list-style-type: none;
margin: 0px 0 0 -8px; /*une marge top inferieur pour remonter le menuderoulant et une marge left pour le decaler à droite du menu*/
padding: 0;
border: 0;
/*position:absolute; /*pour eviter tout decalage*/
}
#menu .menuderoulant li
{
/*float: right;*/
margin:0 auto;
padding: 0;
border: 0;
width: 150px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .menuderoulant li a
{
/*display: block;*/
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color:rgb(0, 0, 0);
background-color:rgba(0,0,0,0.5);
}
#menu .menuderoulant li a:hover
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);
}
#menu .menuderoulant li a:visited {
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}
#menu ul
{ background:none;}
/*#menu li:hover > .menuderoulant {
display: block;
}*/
</style>
<!--[if IE]>
<style type="text/css">
#menu li a {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
zoom:1; /* important pour ie7*/
}
#menu li a:hover {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80AFD601,endColorstr=#80AFD601);
zoom: 1;
}
#menu .menuderoulant li a {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
zoom: 1;
}
#menu .menuderoulant li a:hover {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C01259EF,endColorstr=#C01259EF);
zoom: 1;
}
#menu .menuderoulant li a:visited {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0E3161E,endColorstr=#C0E3161E);
zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li>
<a href="#1">Menu 1</a>
<ul class="menuderoulant">
<li><a href="#2">sous menu </a></li>
<li><a href="#3">encore un sous menu !</a></li>
<li><a href="#4">bah ! allez un autre !</a></li>
</ul>
</li>
<li>
<a href="#5">Menu 2</a>
<ul class="menuderoulant">
<li><a href="#6">sous menu </a></li>
<li><a href="#7">et un autre</a></li>
<li><a href="#8">encore un</a></li>
<li><a href="#9">un autre</a></li>
<li><a href="#10">le même</a></li>
</ul>
</li>
<li>
<a href="#21">Menu 3</a>
<ul class="menuderoulant">
<li><a href="#11">et bin v'la un autre sous menu</a></li>
<li><a href="#12">et un autre</a></li>
<li><a href="#13">puis un autre</a></li>
<li><a href="#14">taratata</a></li>
<li><a href="#15">fait beau hein !</a></li>
<li><a href="#16">oui mais froid</a></li>
<li><a href="#17">jamais content celui-là </a></li>
<li><a href="#18">c'est sur</a></li>
<li><a href="#19">en même temps</a></li>
<li><a href="#20">c'est vrai</a></li>
</ul>
</li>
<li>
<a href="#22">Menu 4</a>
<ul class="menuderoulant">
<li><a href="#23">sous catégorie</a></li>
<li><a href="#24">ça change de sous menu</a></li>
<li><a href="#25">mettez-y ce qu'il vous plait</a></li>
<li><a href="#26">allez encore un</a></li>
<li><a href="#27">puis un autre</a></li>
<li><a href="#28">et puis un autre</a></li>
<li><a href="#29">c'est rudement joli hein !</a></li>
<li><a href="#30">moi ça me plait bien</a></li>
<li><a href="#31">pourait etre mieux </a></li>
<li><a href="#32">oui mais c'est plus cher !</a></li>
</ul>
</li>
</ul>
</body>
</html>
bon il y a ecore n petit bug si tu survole tuot d'un coups mais je pense que ça peut te mettre sur une piste
j'ai utilisé la librairie jquery --> https://jquery.com/
et la fonction slideUp --> http://jquery.developpeur-web2.com/documentation/effets/slideup.php
et slide Down --> http://jquery.developpeur-web2.com/documentation/effets/slidedown.php
voila si tu as besoin d'autr details n'hesite pas !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Coucou =)
D'abord merci beaucoup pour cette aide précieuse ! j'ai une dernière question et après j'embete plus, sur l'image de fond a savoir
D'abord merci beaucoup pour cette aide précieuse ! j'ai une dernière question et après j'embete plus, sur l'image de fond a savoir
' target='_blank' rel='nofollow'>http://www.cireasy.com/images/fondmenuderoulant.png</code>
J'aimerais faire défiler plusieurs images en fond donc dois-je toucher au javascript ou au css pour faire le défilement? quel est le mieux a votre avis?
Merci =)
vincent170186
Messages postés
316
Date d'inscription
mardi 17 mars 2009
Statut
Membre
Dernière intervention
28 septembre 2012
52
28 févr. 2012 à 11:37
28 févr. 2012 à 11:37
re !
bon j'arrive un peu tard !
en tous cas si tu veux faire défiler des images de fond c'est du javascript ! par contre il y a certaine astuce a prendre en compte ! tout depend de ce que tu veux faire comme animation ! si tu veux un gros truc qui tache sans transition tu peux utiliser (attention je parle en jQuery) .attr('background', 'ulrdelimage')mais la ! pas de transition ! si tu veux un effet de transition, il faut plutot mettre plusieur images (en absolute pour quel soit les une en dessous des autres) et avec le js utiliser un fadeIn et fadeOut (le tout en gérant les z-index ).
voila ! aujourd"hui je n'ai pas le temps de te filer un exemple ! mais si ça ne te parle pas fais moi signe ! je verrai pour te faire un bout de code qui t'explique grosso modo la marche a suivre !
bon courage !
bon j'arrive un peu tard !
en tous cas si tu veux faire défiler des images de fond c'est du javascript ! par contre il y a certaine astuce a prendre en compte ! tout depend de ce que tu veux faire comme animation ! si tu veux un gros truc qui tache sans transition tu peux utiliser (attention je parle en jQuery) .attr('background', 'ulrdelimage')mais la ! pas de transition ! si tu veux un effet de transition, il faut plutot mettre plusieur images (en absolute pour quel soit les une en dessous des autres) et avec le js utiliser un fadeIn et fadeOut (le tout en gérant les z-index ).
voila ! aujourd"hui je n'ai pas le temps de te filer un exemple ! mais si ça ne te parle pas fais moi signe ! je verrai pour te faire un bout de code qui t'explique grosso modo la marche a suivre !
bon courage !
