Toutes les variantes d'un menu avec onglets

Bandeau "Page ébauche"

Méthode pré-installée

Yacs vient avec plusieurs design pré-fabriqués permettant de mettre en oeuvre rapidement un site de test, ou en production réelle. La plupart de ces design possède déjà un menu horizontal à onglets.

Les plus pressés préfèreront donc choisir simplement l'un de ces skins pour obtenir leurs onglets. Mais ultérieurement vous pourriez piocher dans la méthode d'affichage des onglets natifs pour enrichir un skin qui n'en possède pas. Dans ce cas, lire ci-dessous...

Méthode dérivée

2 fichiers vont devoir être légèrement modifiés : template.php et style.css : ce dernier porte généralement le nom de votre skin, et non style.css

• Ouvrez template.php
• Recherchez la ligne :

• //end of the header panel
  

• Juste au dessus de cette ligne, collez ces lignes :

• //horizontal tabs
  

• Page::tabs(FALSE);
  

• Enregistrez la modification du fichier.

Il faut à présent définir des règles d'affichage stylé :

• Ouvrez style.css (votre feuille de style, qui porte habituellement le nom de votre skin)
• Collez ces règles de style à l'endroit le plus pertinent pour vous :

• #tabs { /* the global navigation bar -- see template script */
      position: absolute;
      top: 134px; /* Hauteur par rapport au haut de page : A personaliser pour ajuster */
      left: 20px;
      margin: 0; /* need for IE Mac */
      padding: 0;
      width:950px; /* Largeur : à ajuster */
  }
  
  #tabs,
  #tabs a { /* text appearance in tabs */
      font-family: Georgia, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      font-style: italic;
      height: 26px; /* Hauteur de la ligne : A personaliser pour ajuster */
  
  }
  
  #tabs ul { /* position tabs */
      width: auto;
      margin: 0;
      padding: 0;
      list-style: none;
      z-index: 90;
  }
  
  #tabs li {
      display:inline;
      margin:0 2px 0 0;
      padding:0;
      
  }
  
  #tabs li a { /* tab top left corner */
      margin:0 35px 0 0;
      padding:0 0 0 10px;
      text-decoration:none;
      float: left;
      background: transparent;
      text-align:center;
  
  }
  

Nous avons inséré quelques commentaires pour plus de lisibilité. Ajustez les options de positionnement et d'apparence selon votre design et votre goût, puis enregistrez le fichier modifié.

Rechargez une page de votre site en vidant tous les caches au besoin, et admirez

Méthode de personalisation

Cette technique va vous permettre de créer un menu (horizontal, par exemple) déroulant contenant les sections racines (niveau 1) et leurs premières sous-sections (niveau 2).

L'idée repose sur une intuition originale : vous allez créer simplement une liste de liens dynamique dans un article Yacs, et demander à votre skin de récupérer ce contenu pour l'afficher d'une manière particulière.

a) Créer le menu

Créez une page globale, et donnez-lui impérativement un surnom en plus du titre, par exemple "menuderoulant"

Etablissez la liste des sections racines, comme une liste à puce classique :

• menu 1
• menu 2
• menu 3
• menu 4

Puis dans chaque entrée de liste, appelez par code yacs la liste des sections à utiliser comme entrées. Cela va construire dynamiquement les listes à dérouler verticalement

• menu 1 [sections.compact=section:id1]
• menu 2 [sections.compact=section:id2]
• etc.

Exemple avec des sections de Wikipedyacs

• Speaking Yacs
• Yacs Design
  • L'entrepôt graphique
  • Extras
• Des nouvelles de WikipedYacs

b) Commandez le template

Il faut appeler la description de cette page globale par le template pour positionner le menu :

// menu deroulant
if($article =  Articles::get('menuderoulant')) {              
  echo '<div  id=menuderoulant>'."\n";              
  echo  Codes::beautify($article['description']);              
  echo  '</div>'."\n";              
}

c) Customisez la feuille de style

Enfin vous devez appliquer à ce #div nommé #menuderoulant toutes les règles courantes de l'affichage déroulant horizontal ou vertical, et notamment ses options de liste.

Pour ce faire, vous pouvez vous baser sur les tutoriels en CSS, et pour les plus avancés essayez avec JQuery.