Partage

Menu en Ajax

Help svp !

8 avril 2011 à 12:40:00

Bonjour à tous,

tout d'abord, je sais que ce n'est pas la bonne catégorie pour post mais il n'y as pas de catégorie spécial AJAX.

Voici mon problème :
Je voudrais réaliser un menu horizontal pour mon site, avec un élément qui translate en dessous le menu suivant le choix que l'utilisateur fais.

Je m'explique :
Mon menu possède 5 catégories, je voudrais que lorsque l'utilisateur clik sur tel ou tel catégorie, une flèche (l'élement qui translate) bouge de la page actuelle à la page demander (en restant sous mon menu!)

Je ne vois donc pas d'autre solution que d'utiliser de l'ajax au moins pour le menu.
Mon soucis : aucune connaissance en ajax et très médiocre en javascript...
Mon deuxieme soucis: comment faire pour que ma flèche bouge ? utilisation du javascript dans le code ajax ?

Si quelqu'un connais des tutos ou à deja fais quelque choses du genre.... votre aide serais la bienvenue!

Merci


:D

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
certifiante
Financée
à 100%
8 avril 2011 à 19:08:02

Bonjour,
première question, la navigation est-elle en AJAX? ou classique?
Je veux dire, ta page se recharge complètement? ou seulement un élément choisi?

L'AJAX sert tout d'abord à effectuer des appels serveurs asynchrones. donc du js classique devrait aller je pense :)
ensuite, je te conseil les tutos sur ce site pour le JS natif, et l'utilisation de la librairie jQuery, qui permet de faire facilement des choses complexes :)

L'utilisation de jQuery pourra (plus facilement) animer ton élément qui se situe sous ton menu (fonction animate).


ou en natif (je sais pas comment ta page est structurée), tu peux positionner un div en dessous de ton menu, en relative. et tu te sers de la fonction setInterval(deplace(), 1000) qui te permet d'appeler dans ce cas (une fonction toute les 1000 milisecondes),
La fonction deplace va seulement augmenter ou diminuer la position left de ton élément de quelques pixel.
Ainsi tu verras une "animation".

Voilà l'idée, reste à coder :p
Bon courage :)
8 avril 2011 à 22:38:26

Merci bien,
Mon contenu se recharge complétement mais ma navigation reste. C'est pourquoi je voulais faire uniquement le menu en ajax pour que "l'animation" de mon élément apparaisse.
Je ne sais pas ce que tu appel javascript natif je vais me renseigner !

Donc si j'ai bien compris tu pense que mon menu avec l’élément translatant peut se faire uniquement en JS et Jquery ?
9 avril 2011 à 9:47:43

Hum...

Va voir ici j'ai fini mais je ne sais pas si c'est ce que tu veut vraiment...
CADEAU

ChickN
CartoonMe
9 avril 2011 à 15:23:25

en fait y'a un point que je n'arrive pas à saisir. à quel moment tu veux que l'image se déplace?
au clic et avant que la page se recharge?
ou après le chargement de la page, le menu se met à jour?
car pendant le chargement, ça risque d'etre problematique :)


le javascript natif est le js sans plugin, sans libraire, avec les instructions de bases.
10 avril 2011 à 12:03:17

@ChickN merci, mais ce n'est pas cela que je cherche a faire =/

@Dhampir je voudrais que l'on click sur la catégorie, la flèche se déplace de la page présente à la page demandée et ensuite le contenu s'affiche.



Mon menu est horizontal composé de la sorte :

accueil | Page1 | Page2 | Page3 | Page4


avec par exemple la flèche sous accueil, lorsque l'on clik sur pageX elle ce déplace de accueil à pageX et cela a chaque fois que l'on click sur une autre catégorie
10 avril 2011 à 12:13:49

Salut,

Si tu change ton contenu avec ajax mais que ta navigation reste, je pense qu'il n'est pas nécessaire que tu utilise ajax pour faire bouger la flèche en dessous des liens. Javascript et/ou Jquery avec une fonction au "onclick" devraient suffire :) !
10 avril 2011 à 19:50:47

la réponse de Jeff94 correspond je pense au besoin.
Cependant, si tu gardes une navigation classique (rechargement complet de la page), tu vas être heurté à des problématiques ...

Pour vraiment avoir un résultat fluide, il faudrait mettre à jour le contenu de ta page de manière dynamique (appels Ajax qui te rameneront le contenu de la nouvelle page), puis tu peux lancer ton animation en js et/ou jQuery

Ainsi, la totalité de la page ne sera pas mise à jour et tout se fera en un coup.

Menu en Ajax

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown