SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 353 visiteurs en ce moment

Accueil > Navigation > Menus réactifs > Menu en cascade automatique (tout CSS + javascript pour IE)

Menu en cascade automatique (tout CSS + javascript pour IE)

23 février 2005 – par Miss Mopi – 90 commentaires

29 votes

Un menu déroulant en cascade simple basé sur des CSS avec un petit script javascript supplémentaire pour IE. Sa structure en fait le menu idéal par boucles récursives.

Introduction

Le menu présenté se révèle être d’une simplicité de mise en oeuvre une fois qu’on a compris son fonctionnement. Il est basé sur les CSS (plus un script pour permettre à IE de se comporter presque comme les autres navigateurs).

Quelques mots sur le fonctionnement

Le menu fonctionne grâce aux listes imbriquées :

<ul>
 <li>Niveau 1
   <ul>
     <li>Niveau 1.1</li>
     <li>Niveau 1.2
       <ul>
         <li>Niveau 1.2.1</li>
         <li>Niveau 1.2.2</li>
       </ul>
     </li>
     <li>Niveau 1.3
       <ul>
         <li>Niveau 1.3.1</li>
       </ul>
     </li>
   </ul>
 </li>
 <li>Niveau 2
   <ul>
     <li>Niveau 2.1</li>
     <li>Niveau 2.2</li>
     <li>Niveau 2.3
       <ul>
         <li>Niveau 2.3.1</li>
         <li>Niveau 2.3.2</li>
       </ul>
     </li>
   </ul>
 </li>
</ul>

Ce qui donne sans mise en forme particulière :

  • Niveau 1
    • Niveau 1.1
    • Niveau 1.2
      • Niveau 1.2.1
      • Niveau 1.2.2
    • Niveau 1.3
      • Niveau 1.3.1
  • Niveau 2
    • Niveau 2.1
    • Niveau 2.2
    • Niveau 2.3
      • Niveau 2.3.1
      • Niveau 2.3.2

Chaque niveau de liste sera un niveau du menu déroulant.

Préparation des pages du squelette :

Vous trouverez en bas de cet article le javascript à intégrer dans les pages. Personnellement je dépose le fichier dans un dossier « script » et je l’inclus avec le code suivant :

Il faut également ajouter ce code au niveau du body pour que le menu fonctionne sous IE :

menulist est à remplacer éventuellement par le nom de l’id que vous voulez utiliser.

Les boucles

Boucle de base

Voici la boucle « basique » permettant de générer le menu de tout le site :

Il suffit de nommer (id=« menulist ») et ensuite de styler la liste.

Les styles en provenance de l’exemple de Jep :

Exemple ici

Boucle détectant la présence de sous-menus

On va ajouter ici des éléments qui permettent d’identifier visuellement les rubriques en contenant d’autres en les mettant en italique et en ajoutant « >>> » derrière l’intitulé. Les styles en exemple derrière sont plus travaillés que l’exemple précédent et les boucles SPIP également (ajout de tri, suppression des numéros de titres, ...).

La boucle RUBRIQUES couplée à id_parent avec une restriction de 1 permet de détecter des sous-rubriques et ici d’appliquer un style particulier à la ligne (class=« smenu ») et d’ajouter « >>> » dans l’intitulé du menu.

Des styles mettant un peu plus le menu en valeur et exploitant la détection de sous-menus :

L’exemple situé ici est inspiré de ceci, mais il est plus joli et fonctionne uniquement sur les styles (pas d’ajout de « >>> »). La mise en forme ne se voit bien que sous des navigateurs récents (bien qu’il fonctionne sous IE sans avoir toutes ses subtilités visuelles). Sous les autres navigateurs, une flèche tourne lorsqu’on survole les éléments du menu.

J’ai préféré indiquer ci-dessus un exemple fonctionnant de manière vraiment similaire sous IE et les autres navigateurs.

Je trouve que dans cet exemple, l’utilisation de ce menu prend toute son ampleur.

Menu du secteur, menu de la rubrique courante, etc.

Il est très simple d’implémenter ce menu en exploitant le contexte de la page et en n’affichant que le secteur ou la rubrique courante. Il suffit de faire une boucle affichant le secteur courant ou la rubrique courante sous forme de liste.

Les exemples donnés ci-dessous correspondent à des boucles basiques sans tri et avec les styles basiques donnés au premier exemple.

Exemple de la rubrique courante

Exemple du secteur courant fonctionnant aussi bien dans une page affichant secteur, rubrique, article, breve, ...

Ce code peut être externalisé dans un fichier qu’on inclut en passant id_rubrique.

Il est possible d’inclure les articles aussi, les brèves, etc... Tout dépend après de vos envies.

Les fichiers à télécharger

Le fichier javascript :

Zip - 398 octets
Javascript du menu déroulant

Un ensemble de fichiers prêts à l’emploi qu’il suffit d’inclure dans les squelettes par la commande <INCLURE(spip-ex-md-menu.php3)> (ou un autre nom si vous renommez les fichiers) :

  • Un couple php3/html de type spip [1]
  • Un fichier css soit à inclure dans l’entête de vos squelettes, soit à copier/coller dans votre propre CSS.
  • Ne pas oublier le javascript et le code à préciser au niveau du body.
  • Il est présenté ici
Zip - 1.2 ko
Un exemple prêt à l’emploi

A noter que cet exemple supprime les numéros et trie par numéro.

Notes

[1note admins : à adapter pour SPIP v1.9 et suite - plus de fichier php3

Dernière modification de cette page le 13 octobre 2009

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 5 novembre 2011 à 13:34, par Espoir En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

    merci pour le code ca foncitonne bien

    Répondre à ce message

  • Le 12 mai 2009 à 17:12, par newtech83 En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

    Salut

    Commment pourrai-je selectionner des rubriques particuliere et non toute les rubriques de mon site ?

    Cordialement

    Répondre à ce message

  • Le 19 octobre 2005 à 00:49, par Marcopol En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

    Bonjour Miss,

    Ce menu me plaît beaucoup mais ça ne marche pas avec ma mise en page pourtant pas compliquée. tu peux voir ce que ça donne avec IE sur le lien ci-dessous. La page a été simplifiée à l’extrême mais je n’ai pas trouvé de solution. Aurais tu une idée ?

    • Le 22 octobre 2005 à 03:12, par Marcopol En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

      Rebonjour,

      Je te donne la solution que j’ai trouvé (avec bien du mal). Elle était pourtant simple

    • Le 28 octobre 2005 à 20:27, par Marcopol En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

      Comme je ne vais pas garder mes liens en ligne éternellement, je précise ici la solution.

      Sous IE il faut que la DIV qui porte le menu soit définie *après* les DIV que le menu va recouvrir, faute de quoi il y a l’effet de transparence. Il semble que IE se moque royalement de l’attribut z-index.

    • Le 28 octobre 2005 à 20:39, par Miss Mopi En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

      OK, je note le conseil pour le jour où j’aurais le temps de faire une modif...

      ** ça s’accumule je sais ^^ **

    • Le 23 septembre 2008 à 10:50, par jeje En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

      bonjour,
      j’ai réussi à mettre en place ce menu, et je vous en remercie.
      j’ai changé un peu la mise en page, pour l’avoir en horizontal, mais ce que j’aimerais, c’est changer les sous-rubriques en articles. en fait, sous spip, je n’ai pas de sous-rubriques. donc, j’aimerais que lorsque le menu se déroule, il montre les articles de la rubrique... j’ai essayé plusieurs choses, mais je n’y arrive pas... si vous avez une solution....

    • Le 23 septembre 2008 à 10:52, par jeje En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

      je précise juste que j’ai utilisé la première boucle que vous donnez, en haut de l’article...

    Répondre à ce message

  • Le 14 août 2008 à 11:44, par THC2070 En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

    bonjour
    voila je ne c’est pas si ce menu est encore utilisé mais je le trouve très sympa, donc je l’ai installé avec un peu de mal. il fonctionne
    mais
    une erreur javascript intervient avec firebug :
    « setHover is not defined à la premiere ligne.
    [Break on this error] » <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML...w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
    www.lanouee.fr (ligne 1)

    et une autre après quelque seconde :
    [Exception... "’JavaScript component does not have a method named : "onRefreshAttempted"’ when calling method : [nsIWebProgressListener2::onRefreshAttempted]" nsresult : "0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED)" location : "<unknown>" data : no]

    Est ce que c’est dû seulement au hack pour IE pour que ce menu fonctionne ?
    est ce sans incidences ?
    Voila j’essaie de mettre ce site au norme mais la je buche.
    merci à spip contrib de m’aider.

    Répondre à ce message

  • Le 21 août 2007 à 17:47, par sabine En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

    Hi,
    je suis en train d’utiliser le menu css + javascript et ca ne fonctionne pas. J’ai l’impression que les boucles sont mal faites car Spip 1.9.2b me met des messages de bugs du genre :

    Spip 1.9.2b debug Beicip Inc
    Error(s) in template

    Incorrect loop (BOUCLE) syntax , BOUCLE_ssmenu : double definition

    Incorrect loop (BOUCLE) syntax , BOUCLE_smenuspip : double definition

    Incorrect loop (BOUCLE) syntax , BOUCLE_menuspiprub : missing closing tag

    Incorrect loop (BOUCLE) syntax , BOUCLE_smenr : double definition

    Incorrect loop (BOUCLE) syntax , BOUCLE_smen : double definition

    voila j’ai essaye toute les exemple de cet contrib et uniquement un seul marche.
    ce que je souhaiterai c’est un menu vertical deroulant contextuel qui affiche uniquement la rubrique courante(selectionnee avant dans un menu horizontal) et ses sous rubriques et facile a manipuler..
    please I need your help.

    Thanks in advance
    a french-american desesperate IT

    • Le 18 septembre 2007 à 14:18, par sabine En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

      Hi again,

      je viens de trouver la solution au menu deroulant pour lequel on passe l’identifiant de la rubrique. en effet une erreur s’est glisse dans le code. la boucle “BOUCLE_menuspipsect /BOUCLE_menuspipsect” ne se terminait pas correctement. je pense qu’il faut bien verifier que toute les boucles SPIP sont bien ferme sinon on obtient ce genre de message d’erreur.

      a++

      A happy french american IT

    Répondre à ce message

  • Le 13 juin 2007 à 15:27, par ? En réponse à : Merci !

    un grand merci pour cette contrib qui va me permettre de facilement animer un peu mon menu tout en le gardant simple et sobre. Il ne me reste plus qu’à adapter le css à ma sauce.

    Bravo et merci

    Répondre à ce message

  • Le 9 août 2006 à 19:09, par gitehortus En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

    Bonjour miss mopi,
    je suis débutant en spip html et css... mais j’ai réussi à intégrer ce menu sur spip 1.9.
    ma question est simple : j’aimerais en faire un menu à l’horizontale. donc deux trucs : comment afficher les rubriques à la racine à l’horizontale (je pense à text-align center mais bon) ? et comment faire pour que quand la souris passe sur une rubrique cela développe le menu verticalement ?
    en attendant un post de ta part je cherche de mon coté mais je pense que beaucoup de débutants comme moi sont hyper intéressés car ce menu vertical est au top !
    merci encore pour ton travail

    Répondre à ce message

  • Le 12 janvier 2007 à 12:30, par yannJ77 En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

    Bonjour.
    Un grand merci pour cette contrib qui rend bien des services !
    J’ai cependant un léger problème sous IE :
    tout fonctionne impec sur tout le site, mais au survol de l’une des rubriques de premier niveau (et uniquement celle-là), il me faut attendre 5 secondes avant de voir s’afficher le premier sous-niveau ! Et idem pour les sous-niveaux suivants...
    J’imagine que cela vient du fait que cette branche contient pas moins d’une cinquantaine de sous-rubriques réparties sur une arborescence allant, par endroit jusqu’à 6 sous-niveaux...
    Mais bon, je n’ai pas conçu le site. Je suis juste censé en modifier l’apparence.
    Auriez-vous une solution ?
    Merci d’avance.

    Répondre à ce message

  • Le 12 septembre 2006 à 10:15, par Gui En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE)

    Bonjour a tous !!
    J’ai un petit probleme avec le menu déroulant, je travaille en local avec spip 1.9 et j’ai mis en place le menu mais les sous rubrique ne s’affiche pas quand je passe sur une rubrique avec ma souris... (en fait j’ai un menu juste avec les rubriques)
    j’ai modifié la balise body de ma page
    <body class="page_sommaire" onload="setHover('menulist')">

    et voila le code que j’ai mis pour afficher le menu :

    <script type="text/javascript" src="script/menuderoulant.js"></script>
    <ul id="menulist">
            <BOUCLE_smenuspipr(RUBRIQUES){racine}{par num titre}><li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smenr(RUBRIQUES){id_parent}{0,1}><b> >></b></BOUCLE_smenr></a>
                    <B_smenuspip><ul>
                            <BOUCLE_smenuspip(RUBRIQUES){id_parent}{par num titre}><li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smen(RUBRIQUES){id_parent}{0,1}><b> >></b></BOUCLE_smen></a>
                                            <BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
                            </li></BOUCLE_smenuspip>
                    </ul></B_smenuspip>
            </li></BOUCLE_smenuspipr>
    </ul>

    Donc si vous avez quelques idées pour me sauver ca serait génial !!!

    Merci d’avance !

    Répondre à ce message

  • Le 18 août 2006 à 12:34, par deepblue555 En réponse à : Menu en cascade automatique (tout CSS + javascript pour IE) : conflit avec d’autres scripts ???

    Bonjour à tous,

    J’ai réussi à installer le menu en cascade qui marche vraiment bien (le site que je crée est sur Spip 1.9).
    Par contre, je veux utiliser aussi un script qui gère le positionnement du pied de page du site : http://pompage.net/pompe/pieds/

    Apparemment, y a un problème de conflit dans les scripts, quand je mets les deux, le menu ne marche plus...

    Voici le code du script de gestion du pied de page :

    function getWindowHeight()
    var windowHeight = 0 ;
    if (typeof(window.innerHeight) == ’number’)
    windowHeight = window.innerHeight ;

    else
    if (document.documentElement && document.documentElement.clientHeight)
    windowHeight = document.documentElement.clientHeight ;

    else
    if (document.body && document.body.clientHeight)
    windowHeight = document.body.clientHeight ;



    return windowHeight ;


    function setFooter()
    if (document.getElementById)
    var windowHeight = getWindowHeight() ;
    if (windowHeight > 0)
    var contentHeight = document.getElementById(’page’).offsetHeight ;
    var footerElement = document.getElementById(’pied’) ;
    var footerHeight = footerElement.offsetHeight ;
    if (windowHeight - (contentHeight + footerHeight) >= 0)
    footerElement.style.position = ’relative’ ;
    footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + ’px’ ;

    else
    footerElement.style.position = ’static’ ;




    window.onload = function()
    setFooter() ;

    window.onresize = function()
    setFooter() ;

    et le menu déroulant :

    function hover(obj)
    if(document.all)
    UL = obj.getElementsByTagName(’ul’) ;
    if(UL.length > 0)
    sousMenu = UL[0].style ;
    if(sousMenu.display == ’none’ || sousMenu.display == ’’)
    sousMenu.display = ’block’ ;
    else
    sousMenu.display = ’none’ ;



    function setHover(id)
    LI = document.getElementById(id).getElementsByTagName(’li’) ;
    nLI = LI.length ;
    for(i=0 ; i < nLI ; i++)
    LI[i].onmouseover = function()
    hover(this) ;

    LI[i].onmouseout = function()
    hover(this) ;


    Merci pour votre aide !

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 20 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

  • Configurer Sparkpost

    25 avril – 14 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

  • Utilisez le framework Foundation dans vos squelettes !

    13 août 2013 – 58 commentaires

    Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement ! Ce plugin ajoute le framework Foundation sur l’espace (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 65 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

Ça spipe par là