Partage
  • Partager sur Facebook
  • Partager sur Twitter

Navigation Jquery

    8 novembre 2011 à 18:40:15

    Bonjour,

    Je souhaite réaliser un site web comportant : 3 slides avec une animation en fadeIn / fadeOut selon des onglets.
    Pour cela je navigue via des ancres (#slide1...).

    Slide 1 : Page accueil. -> liens vers une new en slide 3.
    Slide 2 : Listing des news 1/2/3/4... ->liens vers une new en slide 3.
    Slide 3 : Affichage NEW. ->avec des liens prev / next pour slider au travers les news.

    Mais e ne vois pas comment gérer ce système de navigation, est-il possible de faire une sorte d'ancrage #slide3#new7 ou passer par un autre système ?.

    Merci d'avance pour votre avis !!
    • Partager sur Facebook
    • Partager sur Twitter
      9 novembre 2011 à 9:35:38

      J'avais fait à une époque un petit code pour une navigation Ajax, j'te montre, peut-être que ça pourra t'aider...

      Admettons un index.html avec un menu et un contenu :
      <div>Menu : <a href="cours/index.php">Cours</a> - <a href="membres/index.php">Membres</a></div>
      <div id="contenu">Contenu Accueil</div>
      


      Il y a des liens vers les autres pages, tout ce qu'il y a de plus simple. Chaque fichier (ici .php) contient uniquement du contenu, ce contenu est chargé et remplace l'actuel dans #contenu. Ce contenu est chargé en Ajax avec un effet fade, grâce à ce bout de code :

      $(document).ready(function() {
      	$('div:first > a').click(function() {
      		var url = $(this).prop('href');
      		$.ajax({
      			url: url,
      			cache: false,
      			success: function(html) {
      				$('#contenu').hide().html(html).fadeIn();
      			}
      		});
      		return false;
      	});
      });
      
      • Partager sur Facebook
      • Partager sur Twitter

      Navigation Jquery

      × 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