Bonjour,
J'ai suivi un tuto pour faire un menu animé en JQuery, car j'ai un devoir à faire (je débute en developpement, je suis en formation), et j'arrive bien à avoir un sous menu qui descend, trop bien même car tout mes sous menus se déroulent au moment ou je clique sur le premier
Je suppose que c'est une erreur de débutant, mais j'avoue n'avoir pas de cours sur les javascripts (la méthode de mon prof c'est demerde toi on voit après..) et être bloqué depuis deux jours alors que tout le reste est assez aisée.
Je sais que ce n'est pas très précis, mais si vous avez des questions pour que je clarifie tout ça, je ferais en sorte de vous répondre au mieux.
je vous laisse ma page html et mon code CSS, :
Et le CSS:
Merci d'avance, et bonne journée
J'ai suivi un tuto pour faire un menu animé en JQuery, car j'ai un devoir à faire (je débute en developpement, je suis en formation), et j'arrive bien à avoir un sous menu qui descend, trop bien même car tout mes sous menus se déroulent au moment ou je clique sur le premier
Je suppose que c'est une erreur de débutant, mais j'avoue n'avoir pas de cours sur les javascripts (la méthode de mon prof c'est demerde toi on voit après..) et être bloqué depuis deux jours alors que tout le reste est assez aisée.
Je sais que ce n'est pas très précis, mais si vous avez des questions pour que je clarifie tout ça, je ferais en sorte de vous répondre au mieux.
je vous laisse ma page html et mon code CSS, :
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#body > li").addClass("alt");
$('img.menu_head').click(function ()
{
$('ul.menu_body').slideToggle('medium');
});
$('ul.menu_body li a').mouseover(function ()
{
$(this).animate({ fontSize: "14px", paddingLeft: "20px"}, 50 );
});
$('ul.menu_body li a').mouseout.(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
}
);
</script>
</head>
<Title>Accueil</title>
<body background="img/background.jpg">
<center>
<big><font color=white><b>CHAPITRE 1</b></font><br></Center>
</center>
<center>
<table>
<td>
<center><br><br><p><font color=white>Algorithme</center>
<ul id="#menu">
<div id=alt>
<img src="Telecharger.png" class="menu_head" />
<a href="Algo.pdf"><img src="visualiser.png" target="Accueil" class="menu1_head" /></a>
<ul width="100" height="15" class="menu_body">
<li><a href="Algo.pdf">en PDF</a></li>
<li><a href="Algo.txt">en TXT</a></li>
</ul></font>
</div>
</ul>
<br><br><br><br>
<p> <font color=white>Exercice en C
<input type=submit value=Visualiser name=visualC> /
<input type=submit value=Telecharger name=DwnlC>
<br><br><br><br>
<p><font color=white>PHP
<input type=submit value=Visualiser name=visualPHP> /
<input type=submit value=Telecharger name=DwnlPHP>
</td>
<td>
<br><br><p><font color=white>Algorithme
<ul id="#menu2">
<div id=alt2>
<img src="Telecharger.png" class="menu_head" />
<a href="Algo.pdf"><img src="visualiser.png" target="Accueil" class="menu_head" /></a>
<ul width="50" height="15" class="menu_body">
<li><a href="Algo.pdf">en PDF</a></li>
<li><a href="Algo.txt">en TXT</a></li>
</ul></font>
</div>
</ul>
<br><br><br><br>
<p><font color=white>Exercice en C
<input type=submit value=Visualiser name=visualC> /
<input type=submit value=Telecharger name=DwnlC>
<br><br><br><br>
<p><font color=white>PHP
<input type=submit value=Visualiser name=visualPHP> /
<input type=submit value=Telecharger name=DwnlPHP>
</td>
</center>
</body>
</style>
</html>
Et le CSS:
a:link
{text-decoration:none;
color:#288CFE;}
a:hover
{color:#0DBEFE;
text-decoration:none;}
#body
{
position:absolute;
margin-top:-2px;
background:#9bb7dc;
font-family:myriad-pro;
font-size:12px;
}
ul, li
{
margin:0;
padding:0;
list-style:none;
}
.menu_head
{
border:1px solid;
}
.menu_body li
{
background:;
}
.menu_body li a
{
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.menu_body li.#alt
{
background:#;
}
.menu_body li.#alt2
{
background:#;
}
.menu_body
{
display:none;
width:92px;
border-right:;
border-bottom:;
border-left:;
}
#menu
{
display:none;
position:absolute;
width:92px;
border-right:;
border-bottom:;
border-left:;
}
#menu2
{
display:none;
position:absolute;
width:92px;
border-right:;
border-bottom:;
border-left:;
}
.menu_body li a:hover
{
padding:15px 10px;
font-weight:bold;
}
Merci d'avance, et bonne journée
