Sommaire

Les menus Magellan

1. L’effet de défilement

Le menu Magellan va vous permettre de créer une navigation au sein de la même page, avec un effet de défilement.

Attention cette technique nécessite les liaisons aux fichiers JavaScript.

Nous créons un menu dans un élément <ul>, avec les classes horizontal et menu. De plus nous plaçons l’attribut data-magellan.

Chaque item <li> contient un lien vers une ancre nommée dans la page.

Voici le code HTML de ce menu :

<ul class="horizontal menu" data-magellan> 
  <li><a href="#accueil">Accueil</a></li> 
  <li><a href="#projets">Projets</a></li> 
  <li><a href="#equipe">Equipe</a></li> 
  <li><a href="#voyages">Voyages</a></li> 
</ul>

Voici son affichage :

images/C09-028.png

Ensuite, nous visualisons le contenu rédactionnel de la page. Celui-ci est placé dans une boîte <div class="sections">. Chaque partie est placée dans un élément <section>, avec un identifiant unique ayant pour valeur les ancres ciblées dans les liens du menu. De plus , l’attribut data-magellan-target a aussi pour valeur l’ancre ciblée.

<section id="accueil" data-magellan-target="accueil"> 
  ... 
</section>

Dans chaque élément <section> vous placez ...