Site façon Slider

Bonjour,

J'ai un code html/javascript pour faire un site façon "Slider", pour vous donner un aperçu, c'est le même genre que le plugin de CodeCanyon ici : http://2.s3.envato.com/files/2757725...html#/homepage

Si vous regardez le menu de ce plugin, vous voyez que le 3 ème bouton "Services" est un menu déroulant, et que les pages de ses sous-menu, glissent verticalement contrairement aux autres qui glissent horizontalement. Et ce que j'aimerai faire, c'est faire la même chose à partir de mon code, qui lui, n'a qu'un menu tout simple, avec toutes les pages glissant horizontalement.

Je pense que c'est possible, qu'en pensez vous ?

Mais étant débutant, j'ai beaucoup de mal, j'ai juste réussi à faire le html, reste le javascript et le CSS ^^ (pour le CSS, je devrais y arriver aussi, enfin je pense, lol)

Voici mon HTML d'origine (simplifié):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div id="page">
		<header id="header">
			<div class="content-width">
				<nav>	
					<a href="#accueil" rel="accueil" class="active">Accueil</a>
					<a href="#presentation" rel="presentation">Presentation</a>
					<a href="#photos" rel="photos">Photos</a>
					<a href="#plan" rel="plan">Plan d acces</a>
					<a href="#contact" rel="contact">Contact</a>
				</nav>
			</div>
		</header>
		<article id="accueil" class="page active">
			<section class="content-width">
				<!-- .............CONTENU DE MA PAGE 1.............-->
			</section>
		</article>
 
		<article id="presentation" class="page">
			<section class="content-width">
				<!-- .............CONTENU DE MA PAGE 2.............-->
			</section>
		</article>
 
		<article id="photos" class="page">
			<section class="content-width">
				<!-- .............CONTENU DE MA PAGE 3.............-->
			</section>
		</article>
 
		<article id="plan" class="page">
			<section class="content-width">
				<!-- .............CONTENU DE MA PAGE 4.............-->
			</section>
		</article>
 
		<article id="contact" class="page">
			<section class="content-width">		
	                       <!-- .............CONTENU DE MA PAGE 5.............-->
			</section>
		</article>
 
		<div class="clear"></div>
	</div>

Et voici les modifications que j'ai faîtes pour y insérer mes sous-menus:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<header id="header">
			<div class="content-width">
				<nav>
					<ul>
						<li><a href="#accueil" rel="accueil" class="active">Accueil</a></li>
						<li><a href="#presentation" rel="presentation">Presentation</a></li>
						<li><a href="#photos" rel="photos">Photos</a></li>
                                                         <ul>
						                 <li><a href="#sousmenu1" rel="sousmenu1">sous menu 1</a></li>
						                 <li><a href="#sousmenu2" rel="sousmenu2">sous menu 2</a></li>
						                 <li><a href="#sousmenu3" rel="sousmenu3">sous menu 3</a></li>
 
					                 </ul>
						<li><a href="#plan" rel="plan">Plan d acces</a></li>
						<li><a href="#contact" rel="contact">Contact</a></li>
					</ul>
				</nav>
			</div>
		</header>

Déja ça, est ce que c'est bon ? ^^

Sinon, voilà mon CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.content-width { width:1024px; margin:0 auto; }
 
.clear { clear:both; }
 
#header nav { float:right; margin:30px 0 0 0; }
 
#header nav a { color:#fff; padding:10px 25px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; float:left; margin:0 15px 0 0; text-decoration:none; text-shadow:#000 1px 1px 0; 
	-moz-transition:all ease-out 0.3s;
	-webkit-transition:all ease-out 0.3s;
	transition:all ease-out 0.3s;
	position:relative;
	z-index:5;
}
 
#header nav a:hover, #header nav a.active { background:#000; /*box-shadow:rgba(255,255,255,0.3) 0 0 10px;*/ }
 
.page { display:none; }
 
.page.active { display:block; }

Et le javascript à modifier ^^:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(document).ready(function() {
                   var _is_animating_page = false;
	$('#header nav a').click(function() {
		if ($(this).hasClass('active') || _is_animating_page) return false;
 
		if ($(this).hasClass('none')) {
			document.location = $(this).attr('href');
			return false;
		}
 
		_is_animating_page = true;
 
		var div 			= '<div class="back-nav"></div>',
			_width 			= $(this).outerWidth(), 
			_height 		= $(this).outerHeight(), 
			_top 			= $(this).offset().top, 
			_left 			= $(this).offset().left,
			_rel 			= $(this).attr('rel'),
			_width_page 	= $(window).width(),
			_final_width 	= ($(this).index() > $('#header nav a.active').index()) ? _width_page : -_width_page;
 
		$('#header nav a.active').removeClass('active');
		$(this).addClass('active');
 
		$('body').css({'overflow':'hidden'});
 
		$('.page.active').css({'position':'absolute', 'width':'100%'}).animate({left:'-='+_final_width}, 500, 'easeInExpo', function() {
			$('.page.active').css({'position':'relative', 'width': 'auto', 'left': 'auto'}).removeClass('active').hide();
			$('#'+_rel).addClass('active').show().css({'position':'relative', 'width':'100%', 'left': _final_width}).animate({left:0}, 500, 'easeOutExpo', function() {
				$('body').css({'overflow':'auto'});
				_is_animating_page = false;
			});
		});
 
		return false;
	});
 
	updateActiveConfig();
 
});

Voilà, j'espère m'être expliqué clairement et vous avoir mis les codes nécessaires pour m'aidez à réaliser ce menu

Si j'ai oublié de préciser quelque chose, faîtes moi signe ;)

Merci à vous !

Personne pour m'aider ? :?

C'est surtout que personne n'a envie de bosser à ta place... :roll:
C'est d'ailleurs stipulé dans les règles du forum...

Bonjour,

Je vous trouve un peu dur ...

Si vous lisez bien mon topic, en ce qui concerne le html, je l'ai modifié moi même, je ne demande pas que l'on me le fasse, je demande juste si mon code est bon !
Ca déjà, vous auriez pu me le dire, non ? Et si ce n'est pas bon, me corriger mes erreurs et surtout m'aider à les comprendre !

Je crois que ce genre de forum est fait pour s'aider les uns les autres, non ?

En ce qui concerne le CSS, là encore je ne demande pas qu'on me le fasse ! J'ai bien précisé que je devrais y arriver seul, ou que au pire je demanderais de l'aide aussi, mais ça ne veut pas dire de me le faire de A à Z !

C'est juste au niveau du javascript que je demande un peu plus d'aide pour le moment.
Si je reprends mes termes, j'ai bien dis "m'aider à réaliser ce menu", ça ne veut pas dire qu'on me le code entièrement !
Je n'ai jamais touché a du javascript, donc j'aimerai juste qu'on m'oriente sur le code a rajouter à mon code actuel pour réaliser ce que j'aimerais !

Je pense que tout ceux qui ont ce genre de problème et qui poste poliment et sérieusement sur un forum se trouve généralement aidé. D'ailleurs moi le 1er, c'est la 1ère fois que l'on me réponds ce genre de message, et en plus avec manque de politesse !!! Ni "salut" ni "bonjour" !!! Je ne vous félicite pas ...
Là je vais être hors sujet, mais croyez moi que pour le forum, ces 2 choses là ne font pas très bonne pub, et je sais de quoi je parle, car j'ai été modérateur d'un forum ...

Vous comme tout le monde, êtes passé par l'étape "débutant" et que vous avez appréciez (ou aurez appréciez) l'aide de personnes plus "calées" en la matière, est ce que je me trompe ?

Je "n'hausse pas la voix" en disant tout ça", mais c'est juste pour dire que de recevoir des réponses comme celle là (ou semblables à celles là), ne donne pas envie de revenir posté ici et je trouve ça bien dommage pour ce forum qui est très complet !

Bon cela dis, voulez vous bien m'aider un peu ? ;)