Sujet Précédent Sujet Suivant

Menu slide javascript

Fermé
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019 - 17 avril 2011 à 23:40
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019 - 18 avril 2011 à 22:44
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é: 

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:

3 réponses

Réponse 1 / 3
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
18 avril 2011 à 00:11
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.
0
Réponse 2 / 3
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019
18 avril 2011 à 09:55
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.
0
Réponse 3 / 3
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019
18 avril 2011 à 22:44
ok c'est bon il y avait juste a rajouter target="parent" dans les liens de la page html.
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses