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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 !