menu dropdown et w3css

niqnutn · mai 2016

Bonjour,

Je suis bloqué pour gérer un menu dropdown avec w3css.
http://www.w3schools.com/w3css/w3css_navigation.asp

Je ne sais pas si c'est possible sans effectuer trop de modification.
J'ai pas trouver ce qu'il me fallait et plxShow-staticList permet de faire un nb de choses limité.
http://devzone.pluxml.org/index.php?page=plxShow-staticList

Je cherche une solution pas trop compliqué pour modifier la structure du menu.
Je ne sais pas si on peut gérer ça avec un plugin.

Je ne sais pas si quelqu'un a déjà été confronté à ce pb et s'il y a une solution.

Pierre · mai 2016

Ça dépendra beaucoup de ce que tu voudras mettre dans ta sous-liste à inscrire à l'un des postes du menu. La version par défaut indique les pages statiques désirées. On peut insérer à sa suite un item de niveau 1 qui sera porteur d'une liste de niveau 2. Cette liste peut être codée en dur ou même dynamiquement produite par une autre fonction comme catList ou lastArtList.

La structure de base de la fonction dans header.php est très bien pensée puisqu'elle glisse la liste des LI produite par staticList entre des balises UL qui sont à l'extérieur de la fonction. Tout ça permet de faire afficher la liste "officielle" sans sortir de la balise UL. Ça donne tout le loisir d'ajouter son propre item LI avec en son sein une autre UL qui liste ses propres LI. Le tout se termine avec le /UL officiel qui ferme la marche.

C'est un peu technique pour les nouveaux mais [del]le UL imbriqué est bien expliqué dans la documentation[/del] en question.

Petit ajout:
J'ai relu la page de w3css et je vois qu'on y utilise la méthode

UL- LI- DIV-sousitem-/DIV-/LI-/UL

c'est un choix mais je ne suis pas un fan. Mon explication utilisait plutôt la méthode

UL-LI-UL-LI-sousitem-/LI-/UL-/LI-/UL

qui a la vertu de permettre un troisième niveau dans les cas extrêmes. C'est un choix éditorial qui se vaut. Pour rencontrer cette opération très souvent, je peux confirmer que la méthode que j'explique est beaucoup plus commune. Tout ce joue dans le CSS, on travaille avec ce qui nous rassure et que l'on peut comprendre le plus facilement. Un petit tutoriel qui se vaut .

niqnutn · mai 2016

Je ne veux pas modifier le comportement par défaut. Je veux juste pouvoir afficher correctement les pages statiques lorsqu'elles sont groupées.
Dans l'absolu, je suis d'accord avec toi mais l'idée est de recréer un thème avec le minimum de transformation.

avec PluXml, ça doit ressembler à:

[== Indéfini ==]
 <ul class="w3-navbar w3-card-2 w3-light-grey">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li class="w3-dropdown-hover">
    <a href="#">Dropdown</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
  </li>
</ul>

et avec W3css:

[== HTML ==]
 <ul class="w3-navbar w3-card-2 w3-light-grey">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li class="w3-dropdown-hover">
    <a href="#">Dropdown</a>
    <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

n'avoir qu'un sous-menu n'est pas gênant puisque PluXml ne sait pas en gérer plus et ça fait une éternité que je n'ai pas vu de menu à rallonge mais c'est un autre débat.

avec quelques modifications du CSS j'ai avancé (le sous menu s'affiche au survol de la souris).
c'est loin d'être génial et j'ai des modifications à effectuer mais je vais continuer en gardant la structure des menus tel quel en rajoutant quelques bouts de CSS.
si vraiment je bloque, je tenterai de modifier la structure des menus.

L'avantage pour moi d'utiliser w3css c'est d'avoir un guide et d'avoir un thème cohérent dans son ensemble.
La possibilité de gérer des thèmes de couleur est aussi assez intéressante et permet une personnalisation rapide et facile.
http://www.w3schools.com/w3css/w3css_color_themes.asp

Pierre · mai 2016

C'est bien d'avoir un guide mais encore faut-il choisir le bon... Ça me fait toujours rigoler quand je vois des tutoriels me donner des conseils dans des pages codées en ASP, ça donne déjà une idée! Blague à part, il n faut pas confondre ce que fait PluXml dans l'histoire et ce que fait sa page de feuille de style par défaut. Des menus affublés de sous-menus, c'est bien plus une question de CSS. La feuille par défaut de PluXml offre un exemple à un seul niveau, facile à comprendre. Elle alourdirait son traitement et sa compréhension en insérant des sous-menus. Le système assume que nos items de menu supplémentaires seront des pages statiques, c'est une assomption très plausible.

Ceci dit, les CSS n'ont de limite que l'imagination des designers, les menus avec sous-couche déroulante font partie d'environ la moitié des gabarits offerts dans les catalogues, c'est loin d'être un phénomène rare. Quand on n'en a pas besoin, on ignore les classes de niveaux inférieurs et tout se passe bien.

Les liens que tu décris sont "en dur", je présume que c'est ton intention, ça éliminera les fonctions dynamiques de PluXml pour lister par exemple des lies vers des pages de catégories qui se contruisent tous seuls, ou une liste de liens vers des pages d'articles tirées automatiquement d'une ou plusieurs catégories.

Quand ton CSS sera bâti et installé sur un site qu'on peut voir, on pourra parler des possibilités qui s'offrent pour la suite des choses, je n'ai pas encore trouvé la limite...

niqnutn · mai 2016

Je fais signe une fois que j'ai avancé .

Stéphane · mai 2016

Bonjour

J'ai un peu regardé. ça me semble pas très évident à faire avec w3.css, vu la structure des menus de PluXml.

En revanche PluXml a tout ce qu'il faut pour faire des menus déroulants avec les groupes des pages statiques avec juste un peu de css à rajouter dans son thème. (requiert PluCSS). J'ai rédigé un article comme tuto pour expliquer tout ça:

Pages statiques sous forme de menus déroulant en pur css http://goo.gl/dkt8Is

niqnutn · mai 2016

merci pour ta réponse et l'article détaillé.
a priori, je devrai m'en sortir avec tout ça.

edit: j'en profite également pour parler de la pagination. c'est pas évident avec la structure actuelle d'adapter des bouts de code. j'ai utilisé le plugin MyPager qui fait ça très bien.

menu dropdown et w3css

Réponses