Menu slide javascript
lilouetfredo
Messages postés
45
Date d'inscription
Statut
Membre
Dernière intervention
-
lilouetfredo Messages postés 45 Date d'inscription Statut Membre Dernière intervention -
lilouetfredo Messages postés 45 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un petit soucis, je souhaiterais intégrer un menu slide horizontal en javascript :
http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/
J'ai télécharger le contenu plus bas qui donne le .js et le .css du menu, j'arrive a l'afficher avec mes image nickel, mais après quand je souhaite faire ma page web autour ca ne fonctionne plus, il ne veux pas se mettre dans mon contenu de site, il se met a l'écart.
Voici le slidemenu.js donné:
et le slidemenu.css donné :
et quand je souhaite l'intégrer dans ma page comme cela :
ca ne fonctionne pas mon menu se trouve à côté de ma page alors que je le voudrais a l'intérieur. J'ai construis une autre CSS pour mon continu.
Je ne sais pas d'où cela peut venir, j'ai cherché mais je ne trouve pas.
Pouvez-vous m'aider svp?
En vous remerciant par avance.
J'ai un petit soucis, je souhaiterais intégrer un menu slide horizontal en javascript :
http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/
J'ai télécharger le contenu plus bas qui donne le .js et le .css du menu, j'arrive a l'afficher avec mes image nickel, mais après quand je souhaite faire ma page web autour ca ne fonctionne plus, il ne veux pas se mettre dans mon contenu de site, il se met a l'écart.
Voici le slidemenu.js donné:
var slideMenu=function(){
var sp,st,t,m,sa,l,w,gw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName('li');
l=sa.length; w=m.offsetWidth; gw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=gw+'px'; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){
s.onmouseover=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}
s.onmouseout=function(){clearInterval(m.timer);clearInterval(m.htimer);m.htimer=setInterval(function(){slideMenu.slide(s,true)},t)}
},
slide:function(s,c){
var cw=parseInt(s.style.width);
if((cw<st && !c) || (cw>gw && c)){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
if(ow<gw && c){oi=Math.floor((gw-ow)/sp); oi=(oi>0)?oi:1; o.style.width=(ow+oi)+'px';
}else if(ow>ot && !c){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
if(c){owt=owt+(ow+oi)}else{owt=owt+(ow-oi)}}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer);clearInterval(m.htimer)}
}
};
}();
et le slidemenu.css donné :
* {margin:0; padding:0}
.sm {list-style:none; width:500px; height:400px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden; border:none}
a img{
border:none;
}
et quand je souhaite l'intégrer dans ma page comme cela :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.....</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<link rel="stylesheet" type="text/css" href="css/slidemenu.css" />
<script type="text/javascript" src="js/slidemenu.js"></script>
<style type="text/css"></style>
</head>
<body onload="slideMenu.build('sm',200,10,10,1)">
<div id="global">
<div id="header"></div>
<div id="contenu" class="fondcontinu">
<ul id="sm" class="sm">
<li><a href="https://www.google.com/?gws_rd=ssl" ><img src="images/accueil.png" alt="menu accueil" /></a></li>
<li><a href="https://www.google.com/?gws_rd=ssl" ><img src="images/webdesign.png" alt="menu webdesign" /></a></li>
<li><a href="https://www.google.com/?gws_rd=ssl" ><img src="images/illustrations.png" alt="menu illustrations" /></a></li>
<li><a href="https://www.google.com/?gws_rd=ssl" ><img src="images/print.png" alt="menu print" /></a></li>
<li><a href="https://www.google.com/?gws_rd=ssl" ><img src="images/profil.png" alt="menu profil" /></a></li>
<li><a href="https://www.google.com/?gws_rd=ssl" ><img src="images/contact.png" alt="menu contact" /></a></li>
</ul>
</div>
</div>
</body>
</html>
ca ne fonctionne pas mon menu se trouve à côté de ma page alors que je le voudrais a l'intérieur. J'ai construis une autre CSS pour mon continu.
Je ne sais pas d'où cela peut venir, j'ai cherché mais je ne trouve pas.
Pouvez-vous m'aider svp?
En vous remerciant par avance.
A voir également:
- Javascript slide menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Telecharger javascript - Télécharger - Langages
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
3 réponses
Salut, peut-tu nous montrer la deuxième feuille de style pour voir à quoi correspond ce bloc <div id="contenu" class="fondcontinu"> car apparemment tu n'a pas de bloc pour ton menu et c'est peut-être ça ton problème.
Eh bien en fait j'ai réussi à l'intégrer, le soucis maintenant c'est quand je clique sur un des lien du menu slide, cela m'affiche une page dans les dimensions du menu, je vous montre :
donc le menu dans la page web : [url=https://www.casimages.com/i/110418095818759222.jpg.html][img]http://nsa25.casimages.com/img/2011/04/18/mini_110418095818759222.jpg[/img][/url]
et le menu une fois cliquer, qui dirige vers la page google : [url=https://www.casimages.com/i/11041809590311230.jpg.html][img]http://nsa25.casimages.com/img/2011/04/18/mini_11041809590311230.jpg[/img][/url]
il y aurait il moyen que ma page google (le lien de mon menu pour tester) s'affiche en page entière? Car si cela doit faire ca pour mes vrais liens :s.
En vous remerciant par avance.
donc le menu dans la page web : [url=https://www.casimages.com/i/110418095818759222.jpg.html][img]http://nsa25.casimages.com/img/2011/04/18/mini_110418095818759222.jpg[/img][/url]
et le menu une fois cliquer, qui dirige vers la page google : [url=https://www.casimages.com/i/11041809590311230.jpg.html][img]http://nsa25.casimages.com/img/2011/04/18/mini_11041809590311230.jpg[/img][/url]
il y aurait il moyen que ma page google (le lien de mon menu pour tester) s'affiche en page entière? Car si cela doit faire ca pour mes vrais liens :s.
En vous remerciant par avance.