Help pour création d'un slide en CSS et JS [Résolu/Fermé]

Signaler
Messages postés
43
Date d'inscription
lundi 31 août 2009
Statut
Membre
Dernière intervention
6 octobre 2015
 -
Messages postés
37388
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
 -
Bonjour à tous,

Voila je suis actuellement en train de coder mon portfolio et j'aurais voulu un effet de slide entre les différents liens de mon menu comme sur ce site :

http://static.livedemo00.template-help.com/wt_37928/#!/home

J'ai bien fouiné le code source mais je n'arrive pas à distinguer les propriétés utilisées pour faire ce slide...

Quelqu'un serait-il m'aider ?

Merci,

valentom
Afficher la suite

4 réponses

Réponse 1 / 4
Messages postés
43
Date d'inscription
lundi 31 août 2009
Statut
Membre
Dernière intervention
6 octobre 2015
 2
Personne pour me venir en aide ? :(
Réponse 2 / 4
Messages postés
37388
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
 3 465
Salut

Tu as plusieurs include dans le fichier scripts.js :

Je pense que c'est celui la :

http://static.livedemo00.template-help.com/wt_37928/js/content_switch.js
Réponse 3 / 4
Messages postés
43
Date d'inscription
lundi 31 août 2009
Statut
Membre
Dernière intervention
6 octobre 2015
 2
Perso, j'ai vu ce fichier la :

http://static.livedemo00.template-help.com/wt_37928/js/main.js

Dedans y'a la fonction qui modifie la position des bloques nan ?

Et je dois en faire quoi du script "content_switch.js" ?

J'ai quelque chose à modifier
Afficher les 9 commentaires
Signaler
Messages postés
43
Date d'inscription
lundi 31 août 2009
Statut
Membre
Dernière intervention
6 octobre 2015
 2
Oui je m'en douté mais je voudrais gardé la partie "BtnActive" pour que la page active se fasse remarquer, comme une surbrillance.
Signaler
Messages postés
43
Date d'inscription
lundi 31 août 2009
Statut
Membre
Dernière intervention
6 octobre 2015
 2
Ha, et question que je trouve débile mais que je vais poser quand même :) , je dois rajouter le script de jquery aussi ? si oui quelle version ?
Signaler
Messages postés
37388
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
 3 465
Pour les modifications, faut bidouiller, essayer des modifications dans les fichiers et voir ce que ça donne.

Pour jquery, oui, il le faut, le site indique la version 1.6
Signaler
Messages postés
43
Date d'inscription
lundi 31 août 2009
Statut
Membre
Dernière intervention
6 octobre 2015
 2
Ok je vais tester.

Pour jquery je n'ai trouvé que la version 1.6.4 sur le site officiel, ça ira ?
Signaler
Messages postés
37388
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
 3 465
Je pense que oui, faut tester.
Réponse 4 / 4
Messages postés
43
Date d'inscription
lundi 31 août 2009
Statut
Membre
Dernière intervention
6 octobre 2015
 2
Pour l'instant mon code html ressemble à ça et je pense que j'ai mis tout les bloques comme il fallait pour que ça colle avec le Javascript mais les blocs se mettent les uns en dessous des autres... 

<!DOCTYPE html>

<html>

<head>
	
	<title>PortFolio</title>
	<LINK rel='stylesheet' type='text/css' href='./css/menu.css'>
	<LINK rel='stylesheet' type='text/css' href='./css/body.css'>
	<script src="./js/script.js"></script>
	<script src="./js/jquery-1.6.4.min.js"></script>


</head>

<body>

<div id="slider_container">
	<div id="content_slider">

		<header>
		<div id='nav'>
			<ul>
				<li>Projects</li>
				<li>Skills</li>
				<li>HOME</li>
				<li>About</li>
				<li>Contact</li>
			</ul>
		</div>
		<hr class='barre_menu'>
		</header>


		<div id="slider">
			
			<div class="box"> <!--home page-->
			
                              Premier Bloc / Page Home

			</div>
			
			<div class="box"> <!--skills page-->
					
                               Deuxième Bloc / Page Skills

			</div>
					
			<div class="box"> <!--projects page-->

			       Troisième Bloc / Page Project

			</div>
				
			<div class="box"> <!--about page-->
				
                              Quatrième Bloc / Page About

			</div>
				
			<div class="box"> <!--contacts page-->

                              Cinquième Bloc / Page Contact
					
			</div>
		</div>

	</div>
</div>

<footer>

<hr>
© Copyright , All Right Reserved


</footer>



</div>

	</body>
</html>
Signaler
Messages postés
43
Date d'inscription
lundi 31 août 2009
Statut
Membre
Dernière intervention
6 octobre 2015
 2
J'ai compris le souci... ça vient de jquery, la version que j'ai téléchargé n'était pas la bonne du coup j'ai pris le script ce trouvant dans le code source c'est à dire :

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

Et la BAAM Magie les blocs se positionnent les uns à côté des autres :)

Maintenant y'a de la mise en page à faire ^_^

Merci encore pour ton soutien PierreCastor :)

Si jamais j'ai d'autres questions je reposterai ici.
Signaler
Messages postés
37388
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
 3 465
Merci pour le retour, bon courage pour la suite. :-)

Tu peut passer ton topic en résolu avec le lien : "Marquer comme résolu" en haut.
Posez votre question