Bonjour à tous!
J'aimerais créer un menu dans le même genre que celui de ce site, j'ai donc repris le code source de ce menu, si cela gêne, je le retirerais.
J'ai donc repris les sources, mais cela ne marche pas..
Le code HTML :
Le code CSS :
Le code Javascript :
Le problème, rien ne se passe..
Merci pour vos réponses.
Modifié par Erwaan (29 Mar 2011 - 00:18)
J'aimerais créer un menu dans le même genre que celui de ce site, j'ai donc repris le code source de ce menu, si cela gêne, je le retirerais.
J'ai donc repris les sources, mais cela ne marche pas..
Le code HTML :
<!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="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="Test.css" />
</head>
<body>
<script type="text/javascript" src="Test.js"></script>
<ul id="menu">
<li id="menu-apprendre"><a href="#"><img src="apprendre.png" alt="Apprendre" width="111" height="28" /></a></li>
<li id="menu-forum"><a href="#"><img src="forum.png" alt="Forum" width="64" height="28" /></a></li>
<li id="menu-emploi"><a href="#"><img src="emploi.png" alt="Emploi" width="72" height="28" /></a></li>
</ul>
</body>
</html>
Le code CSS :
a img {
border: 0;
}
html, body, ol, ul, form, fieldset {
margin: 0;
padding: 0;
}
body {
color: #000;
background: #f1f1f1;
font: normal 80% "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
}
/* Menu principal */
#menu {
position: absolute;
top: 0;
right: 70px;
list-style: none;
}
#menu li {
text-align: center;
width: 130px; /*update padawan*/
margin-left: 40px;
float: left;
height: 115px;
}
#menu li:hover, #menu li:focus {
/*background:url(img/halo.png) no-repeat 0px 35px;*/
}
#menu li a {
text-decoration: none;
color: #494949;
font-size: 1.5em;
font-weight: bold;
text-transform:uppercase;
line-height:30px;
display:block;
padding-top:78px;
/*background:url(img/menu-icon-hovered.png) 0px 500px no-repeat; update padawan*/
}
#menu li a:hover, #menu li a:focus, #menu li a:active {
/*background-position: center bottom; update padawan*/
}
#menu li#menu-apprendre {
background:url(apprendre1.png) 50% -20px no-repeat;
}
#menu li#menu-emploi {
background:url(emploi1.png) 50% -20px no-repeat;
}
#menu li#menu-forum {
background:url(forum1.png) 50% -20px no-repeat;
}
Le code Javascript :
/* Background-Position Animations - @author Alexander Farkas v. 1.21 */
(function(b){if(!document.defaultView||!document.defaultView.getComputedStyle)
{var d=jQuery.curCSS;jQuery.curCSS=function(g,e,h)
{if(e==="background-position"){e="backgroundPosition"}
if(e!=="backgroundPosition"||!g.currentStyle||g.currentStyle[e]){return d.apply(this,arguments)}
var f=g.style;if(!h&&f&&f[e]){return f[e]}return d(g,"backgroundPositionX",h)+" "+d(g,"backgroundPositionY",h)}}
var c=b.fn.animate;b.fn.animate=function(e){if("background-position" in e)
{e.backgroundPosition=e["background-position"];delete e["background-position"]}
if("backgroundPosition" in e){e.backgroundPosition="("+e.backgroundPosition}return c.apply(this,arguments)};
function a(f){f=f.replace(/left|top/g,"0px");f=f.replace(/right|bottom/g,"100%");f=f.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var e=f.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return[parseFloat(e[1],10),e[2],parseFloat(e[3],10),e[4]]}b.fx.step.backgroundPosition=function(f){if(!f.bgPosReady){var h=b.curCSS(f.elem,"backgroundPosition");
if(!h){h="0px 0px"}h=a(h);f.start=[h[0],h[2]];var e=a(f.options.curAnim.backgroundPosition);
f.end=[e[0],e[2]];f.unit=[e[1],e[3]];f.bgPosReady=true}var g=[];
g[0]=((f.end[0]-f.start[0])*f.pos)+f.start[0]+f.unit[0];
g[1]=((f.end[1]-f.start[1])*f.pos)+f.start[1]+f.unit[1];
f.elem.style.backgroundPosition=g[0]+" "+g[1]}})(jQuery);
/* Alsacreations */
$(document).ready(function(){
// Evitement
$("#evitement a").focus(function() {
$(this).closest("#evitement").addClass("focused");
});
// Menu
$('#menu li').css({backgroundPosition: '50% -20px'}).hover(function() {
$(this).stop().animate({backgroundPosition:"50% -10px"}, {duration:200});
},function() {
$(this).stop().animate({backgroundPosition :"50% -20px"}, {duration:200});
});
var oldcr = false;
// Focus sur la recherche
$("#recherche-texte").focus(function(event) {
if(!oldcr) oldcr = $(this).css("color");
if($(this).val()=="recherche") $(this).attr("value","").css("color","#fff");
});
$("#recherche-texte").blur(function(event) {
if($(this).val()=="" || $(this).val()=="recherche") {
$(this).css("color",oldcr);
$(this).val("recherche");}
});
// Reply
$(".commentaire-repondre").click(function(event) {
if($("#commentaire").val()) $("#commentaire").val($("#commentaire").val()+"\n");
$("#commentaire").val($("#commentaire").val()+'@'+$(this).attr("title")+' : ');
$("#commentaire").focus();
return false;
});
// Notif
$("#notif-close").click(function(event) {
$("#notif").slideUp();
document.cookie='hidenotif=1';
});
// Twitter
$("#twitadd").click(function(event) {
$(this).hide(500);
$("#twitinput").slideDown(500);
});
$('#twitinput textarea').keyup(function() {
var charLength = 140-($(this).val().length);
if($(this).val().length > 140) $('#twitinput #twitchars').html('<span style="color:red">'+charLength+'</span>');
else $('#twitinput #twitchars').html(charLength);
});
});Le problème, rien ne se passe..
Merci pour vos réponses.
Modifié par Erwaan (29 Mar 2011 - 00:18)
.