Squelette : Menu dynamique accessible + 3 colonnes en CSS + géométrie variable

Ce squelette vous permettra :
  • de disposer d’un menu dynamique arborescent accessible
  • de disposer d’un affichage en trois colonne avec en-tête et pied de page
  • de choisir entre 6 styles d’affichage
  • de voir quelques boucles sympathiques
  • de voir qu’un peu de php permet d’aller plus loin facilement

Cet article a été mis-à-jour pour être compatible avec la version 1.8 de SPIP.

Licence

Je distribue ce menu en licence LGPL. Cela signifie en gros que vous pouvez l’utiliser comme vous le voulez dans vos développements, qu’ils soient commerciaux ou non.

Utilisation

Le script fourni dans l’archive (au format zip) combine en fait 3 fonctionnalités :

  • gestion d’un menu accessible
  • gestion des feuilles de style alternatives
  • gestion d’une mise en page 3 colonnes avec pied de page

Ce menu est accessible à la navigation au clavier et contient suffisamment d’informations pour permettre sa navigation par un aveugle.

Quelques considérations :

  • le code HTML de la page ne nécessite que des liste (LI) contenant des liens (A)
  • les éléments de la liste ayant le tag STRONG sont automatiquement déplié
  • si le navigateur ne gère pas le DOM, le menu est affiché en mode déplié
  • —> le menu ne fonctionne de manière dynamique que sur un navigateur récent respectant les standards
  • il est nécessaire de placer l’appel au .js du menu après celui-ci, sans quoi le script ne fonctionne pas !
  • le fait que le menu soit clicable sur toute sa largeur (pas seulement sur le texte) est lui aussi un critère d’accessibilité, cette fois-ci aux personnes à mobilité réduite.

Feuilles de styles alternatives

  • Possibilité de changer la mise en page du site en sélectionnant une des feuilles de style alternative
  • mémorisation par cookie du choix de l’internaute

Mise en page 3 colonnes avec pied de page

  • Il n’y a pas de table pour obtenir la présentation en 3 colonnes ; utilisation exclusive de CSS
  • La taille des 3 colonnes est automatiquement ajustée à la plus haute
  • Le pied de page est automatiquement déplacé en bas des 3 colonnes (via javascript)
  • dans le source de la page, les éléments sont placés dans cet ordre :
    1. En-tête
    2. Corps [1]
    3. Colonne de gauche
    4. Colonne de droite
    5. Pied de page

Considérations esthétiques

Capture d’écran d’un article

Ce squelette est une preuve de concept, pas un chef d’œuvre artistique !

Boucles

  • Le fichier menu.html utilise une boucle affichant l’arborescence des rubriques. Mais si une rubrique ne contient qu’un article, c’est l’article qui est affiché directement sur le clic.
  • Le fichier rubrique.html affiche soit la liste des articles s’il y en a au moins un, soit la liste des sous rubriques
  • Le fichier article.html affiche la liste de tous les articles de la rubrique en cours, l’article en cours n’étant pas clicable.

Astuces

  • Les articles et les rubriques peuvent être numérotés (nn. titre : N° point espace titre)
  • Si un article a comme mot clef « MENURACINE », il est placé juste en dessous de accueil dans le menu avant les rubriques (ce qui ne l’empèche de pouvoir être aussi à l’intérieur de sa rubrique).

Installation

Tous les fichiers et dossiers de l’archives sont à placer à la racine du site.

L’archive contient :

  • dossier ecrire
    • mes_options.php3 : contient les paramétrages su squelette (dossier du squelette) plus des fonctions pour avoir plus de raccourcis typographiques.
  • dossier menuAccessible
    il s’agit des fichiers du squelette. Cela vous montre que l’on peut séparer dans SPIP les squelettes du reste.
  • mes_fonctions.php3 : diverses fonctions utiles (ou non) au squelette.

Attention : si votre site a déjà un fichier mes_fonctions.php3 à la racine ou un fichier mes_options.php3 dans ecrire : ne les écrasez pas avec ceux de ce squelette, mais rajoutez-y les éléments de celui-ci.

Notes

[1Il est important que celui-ci soit avant les menus. En effet, placez-vous dans la tête d’un aveugle quelque instant. Celui-ci arrive sur une page, en lit le contenu et navigue ailleurs par les menus. Arrivée sur la deuxième page, il preférera lire le contenu de la page avant de relire le menu !

Discussion

20 discussions

  • 2

    Bonjour
    Je suis aveugle et j’ai beaucoup de mal pour utiliser correctement cet espace d’edition de spip.
    Donc excusez les fautes de présentation.
    J’ai pris connaissance de l’existence du squelette menu dynamique accessible sous spip.
    Y-til des risque d’installer les fichiers de cette application sur la racine de mon site, qui est hébergé sur un serveur AMP avec la version 4.4.3 de PHP ?
    Mon site est un site dynamique en construction, qui contient déjà des cours de solfège, de piano...
    Il se trouve à l’adresse :
    http:studyvox.biwi.ca/index.php
    Si j’installe les fichiers script de ce squelette, cela ne perturbera-t-il pas le fonctionnement dynamique de mes pages ?

    • Bonjour,

      Ce squelette était une preuve de concept, pas un squelette utilisable :

      • Il est laid (couleurs criardes pour bien voir les 3 colonnes)
      • Il n’est pas complet (pas de page de recherche, sans doute pas de plan...)

      Depuis, j’ai mis le squelette complet en téléchargement en licence libre CC-By-SA.

      Sur le site, il est en version SPIP 1.8.3. Une version pour SPIP 1.9.1 est sur la zone sous le nom de SoyezCreateurs.

    • Et toujours sur la Zone, la version pour SPIP 2 est elle aussi disponible.

    Répondre à ce message

  • une mise à jour pour la 1.9 est prévue ?

    Répondre à ce message

  • 7

    Vous trouverez ici une archive contenant uniquement les fichiers du menu.

    • Sympa, merci ;-)

    • pff j’en ai marre, je dois passer à côté d’un truc sur ce menu, il me déplie tout et j’ai pas les icône (plus - moins)...

      j’ai tout copier à la racine, ensuite j’ai mis le menu.html dans mon dossier design... et j’ai insérer les lignes comme décrit dans le readme.txt, excepté les dernière, je ne gère pas le redimensionnement...

      J’ai fait une bêtise quelque part là ???

      Merci

    • tout se passe comme s’il ne voyait pas le fichier .js... j’ai donc mis le js dans le corps du menu.html et cela fonctionne pour la page sommaire, mais pas pourles autres .. ?? . . ? j’y perd mon latin...

      Merci de m’éclairer de vos lanternes.

      Cordialement

    • moi j’ai également le même pb. Comme si le .js n’était pas reconnu.

    • Le chemin d’accès au .js est en dur ! Il faut donc le modifier dans menu.html s’il se trouve ailleurs.

      Le chemin d’accès aux images est codé en dur dans le .js ! Là aussi, il faut modifier le fichier en conséquence.

    • JL Grellier

      Bon, rien de modifié, mais le lendemain tout fonctionne... je ne vois pas trop ni pourquoi ni comment mais bon... c’est le principal. Merci.

      A+

    • hamidoukann

      ç’est peut être le recalcul du fichier PHP, qui n’est pas lancé à partir des boutons standards de spip ?

    Répondre à ce message

  • 1

    Jacques, ton nouveau menu est magnifique, à voir sur : http://www.pyrat.net/
    Il n’utilise plus de javascript ?

    • Merci beaucoup pour le compliment.

      Pour rendre à César ce qui est à César, le nouveau graphisme est l’œuvre d’Axome.

      Quant au menu, c’est toujours sensiblement le même, avec du javascript. Il a peu évolué par rapport à celui de cette contrib.

    Répondre à ce message

  • 2

    Message d’erreur dans la colone de gauche :

    « Parse error:parse error, unexpected ’=’ in...\inc-public.php3(20):eval()’d code on line 43 »

    • Emmalene

      Bonjour,
      Même message d’erreur dans la colone de gauche (menu) :
      « Parse error :parse error, unexpected ’=’ in...\inc-public.php3(20) :eval()’d code on line 14 »

      (SPIP 1.8.1d)

    • J’ai le même problème uniquement lorsque j’ai des logos (standard, rubriques).
      Peut être une piste ?
      J’en profite pour remercier le concepteur !
      mys

    Répondre à ce message

  • Bertrand

    Bonjour,
    J’ai un petit problème avec le menu dynamique car lorsque je clique sur une rubrique ou une sous rubrique le lien qui s’affiche est du style http://www.monsite.com/article.php3?id_article=2 alors qu’il existe 2 sous répertoires après le nom de domaine. Il devrait s’afficher htt ://www.monsite.com/ssrepertoire1/ssrepertoire2/article.php3?id_article=2
    J’ai pu modifier dans menu.html pour que le menu « accueil » pointe vers htt ://www.monsite.com/ssrepertoire1/ssrepertoire2/ mais je ne vois pas comment modifier pour résoudre le problème des liens générés dans le menu dynamique.

    Merci de votre aide

    Bertrand

    Répondre à ce message

  • 1

    Comment ca s’installe ???
    Il n’y a aucune explication.
    je les mets ou les fichiers une fois dézipé

    merci

    Répondre à ce message

  • 1

    J’ai un beau : Call to undefined function : ereg_remplace()

    avec ereg_replace() ca marche moyennement mieux ...

    Répondre à ce message

  • 1

    Salut
    Je suis entrain de monter un site avec ton squelette. Mais j’ai besoin de remettre la champ « recherche », comment je dois faire ?

    Répondre à ce message

  • 8

    bjr,

    J’essaye d’installer votre squelette sur un spip 1.7.2

    En page d’accueil il indique Erreur filtre « HTMLEntitiesFR »
    non défini.

    Kezako et comment le definir ??

    Merci d’avance et encore merci pour cette sympathique
    contrib quio aidera surment quelques debutants sous Spip comme moi a avoir vite fait un menu dynamique.

    M

    • Bonjour,
      Problème identique : filtre « HTMLEntitiesFr » non defini

      D’autre part, j’ai lu sur le forum l’existence d’un readme.txt... Il n’existe pas dans la version que j’ai téléchargée.

      Merci

    • Bonjour,
      si vous avez déjà un fichier mes_options.php ou mes_fonctions.php, il vous faut rajouter le contenu de ceux livrés ici sinon il suffit de mettre les fichiers à la racine.

    • salut à vous,

      siquelqu’un a eu la solution pour
      le fameux

      Erreur : filtre « HTMLEntitiesFr » non défini
      Erreur : filtre « HTMLEntitiesFr » non défini

      je suis preneur ;)

    • Bonjour,

      J’ai placé les deux fichiers (mes_fonctions1.php3 et mes_options.php3) à la racine et dans tous les répertoires mais il n’y a rien à faire... Ce squelette semblait pourtant sympa au départ, il l’est un peu moins maintenant !! En espérant que quelqu’un trouve une explication.

      Bergu

    • Eric Beining

      Bonjour,
      Pb identique de HTML... machin, qui existe effectivement dans ’mes_fonctions1.php3’.
      En vidant le cache et effacant les indexations dans la partie admin du site, tt fonctionne !
      Great job Jacques !
      @+
      Eric.
      http://beining.free.fr

    • Pour supprimer le probleme d’appel a la fonction HTMLEntities impossible, il fait simplement recopier l’integralite du fichier mes_fonctions1.php3 dans votre fichier mes_fonctions.php3 s’il existe.

      Si ce fichier mes_fonctions.php3 n’existe pas, il faut simplement renommer le fichier mes_fonctions1.php3 en mes_fonctions.php3.

      Et alors tout fonctionne !

      MERCI pour cette contrib !

    • J’ai essayé cette solution ainsi que de copier mes_fonctions.php et mes_options.php partout.
      Rien ne marche, j’ai tjs le pb du HTMLEntitiesFR non defini.
      Est-ce que qqun qui a eu effectivement le pb et à trouver comment faire peut poster la solution svp.
      C’est vrai que le squelette à l’air vraiment bien, c’est dommage de ne pas pouvoir l’utiliser.
      Merci.

    • merci pour l’astuce. EN ce qui me concerne, cela fonctionne parfaitement

    Répondre à ce message

  • Hola

    Merci pour vos squelettes. Ça fait long temps que je cherchais un code css pour faire une structure centrée avec 3 colonnes mais sans table… et voila que je l’ai trouvé, mais je suis absolument nulle en java script…

    Quelqu’un peut m’expliquer commet pourrais-je utiliser les feuilles de styles et non pas les codes pour le menu arborescent (que je trouve royal, mais pour cette fois je n’ai pas vraiment besoin)… j’ai lu que le footer est déplacé en bas via javascript

    Merci d’avance

    Répondre à ce message

  • 1

    Super le menu, mais j’ai un petit souci :
    sous IE, les images + et - font 1px par 1px !
    Je n’ai pas le probleme sous moz1.6.

    Ce que je ne comprend pas, c’est que sur spip-contrib, ca marche.

    Je n’ai vu nul part la taille de l’image dans le javascript, c’est lié à une feuille de style ?

    Merci.

    @++

    • Question bete ...

      Il faut specifier la taille de img dans le css.
      Maintenant, c’est sous moz que les + ne s’affichent qu’au premier niveau ...
      Bon, ca marche sur ton site alors je vais bien trouver, mais je me serai bien passé du css à ralonge.

      Merci pour ce boulot en tous cas

      @++

    Répondre à ce message

  • Bonjour,
    Que faut t’il comprendre par menu acessible à la navigation au clavier ? Cela marche t’il avec explorer 6 ?
    merci

    Répondre à ce message

  • Bravo : contrib tres intéressante et fonctionne tres bien .
    Cependant , je ne maintrise pas complètement le système de cookie .
    En effet , j’ai bien trouvé le script « selectstyle » qui va écrire le cookie ’style".
    Cependant , je ne comprends pas comment on va le relire et comment automatiquement le bon css est reselectionné .

    Quelqu’un peut-il m’expliquer ?

    Répondre à ce message

  • 1
    Ndjoundjou

    Bonjour, je découvre les squelettes avec spip voulant m’amuser à changer l’apparence basique de mon site spip, pour cela j’ai téléchargé ce squelette, je l’ai installé et j’ai commencé à vouloir le modifier
    J’ai mis le choix de présentation dans la colonne de gauche (fier de moi d’avoir modifié un bout de code par un bête copié-collé !)

    puis j’ai essayé d’enlever la colonne de droite qui ne me servait plus à rien et là elle a bien disparu mais le footer a disparu lui aussi et les boutons permettant le recalcul de page se sont dissimulés derrière la colonne de gauche !

    Une idées pour un petit sacarabé du squelette que je suis ?

    • Dans la feuille de style, par ex par défaut ’styles.css’, tu mets la valeur de la partie ’width’ à 0 :
      #right
      position : absolute ;
      top:0 ;
      right:0 ;
      width:0px ;
      background-color : white ;

      Tu peux insister en mettant, dans les pages mêmes « sommaire.html » par ex.,
      div id=« right » width=« 0px »

      Enregistrer sous, FTP puis vide les caches du site.

      A noter : la colonne ne comprend pas le header ni le footer.

      Hope this helps.
      @+,
      Eric

    Répondre à ce message

  • 2

    euh.. je trouve pas le lien de téléchargement .. :-((

    • Manifestement, y’a un bug !

      Le squelette est surrement là, mais SPIP contrib tournant sur la future version 1.8 de SPIP, de temps à autre, il y a un bug.

      Il sera sans doute résolu demain...

    • pourrais tu le mettre aussi sur ton site (plus stable) ?

    Répondre à ce message

  • 1

    en clair :
    je souhaite proposer un menu horizontal avec les logos des rubriques de premier niveau (racine du site), « associé » à un menu dynamique « texte » sur toutes les autres sous-rubriques.

    Peux-je ?

    merci-je ;-)

    fred

    • Oui, c’est possible (comme presque tout, sauf le café, avec SPIP).

      2 pistes :

      • utiliser le paramètre id_parent !=0 pour ne pas prendre les rubriques racines
      • utiliser doublons en ayant fait au paravant une boucle n’affichant rien, mais appelant les rubriques racines.

      À creuser et faire une contrib quand c’est fait.

    Répondre à ce message

  • 1

    Bonjour, est-il possible d’afficher les articles dans les rubriques et sous rubriques et sous-sous-rubriques, et ce même s’il n’y en a qu’un seul ; car je crains que l’internaute ne comprenne pas bien pourquoi lorsqu’il clique sur, par exemple, la rubrique « fruit », on l’envoi d’office sur l’article « pomme » alors qu’il n’a peut être pas envie d’aller sur pomme et voulait simplement savoir ce qu’il y avait à l’intérieur de la rubrique fruit !

    Plus clairement, je voudrais afficher les articles à l’intérieur des rubriques, et que lorsqu’on déroule une sous-rubrique, on tombe sur la liste des articles, et ce même s’il n’y a qu’un seul article.

    Répondre à ce message

  • Jacques PYRAT

    Toujours mettre une unité, sauf si la valeur est 0.
    C’est une astuce d’optimisation des CSS.

    En effet, 0em ou 0pt ou 0px, ça fait toujours zéro, quelle que soit l’unité.

    Répondre à ce message

  • « left:0 ; » et « right:0 ; » : il faut ajouter une unité, par exemple « left : 0em ; » ou « right : 0px ; ».

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom