• Dernière modification:mardi 02 septembre 2014.
Vous êtes iciAccueil>Joomla>Templates BEEZ>Beez 3>Comment créer un menu déroulant avec le module de menu standard Joomla 3?

Demande de service

Bonjour, si vous souhaitez m'aider en m accordant un petit peu de votre temps, j aurais besoin d'avoir des retours sur un site que je montes en plus de celui ci.

Jaimerais que vous y passiez et que vous me fassiez un retour général dessus.

Je suis aussi sur une refonte complete de ce site. Je suis en train de mettre à jour tout le contenu et je met les procedures à jour pour Joomla 3.

Si vous etes intérréssé pour visiter mon autre site et me donner vos impressions, contactez moi directement à cette adresse :contact@informaticien51.fr ou en utilisant le formulaire de contact, en mettant comme sujet :demande d'id.

En effet, ce site n'étant pas accèssible directement, je vous créerait des id spécifique.

Merci par avance à touts ceux qui se manifesteront.

Devenir de ce site

Quelles sont les évolutions révues pour ce site ?

Les évolutions prévues pour ce site sont une complète mise à jour de l ensembl de mes documents, une nouvelle catégorisation de ceux ci ainsi qu'un déplacement sur ce site : http://documentation.informaticien51.fr

Cela auras pour principal effet de redonner à ce site sa vocation de blog, ou je pourrais vous faire part de choses plus générales concernant Joomla et l'informatique en général.

mardi, 02 avril 2013 19:37

Comment créer un menu déroulant avec le module de menu standard Joomla 3? Spécial

Écrit par 
Évaluer cet élément
(1 Vote)

Comment créer un menu déroulant avec le menu standard Joomla3 ?

Ce tutoriel permet de créer un menu déroulant à partir du menu fournis en standard avec Joomla 3.x.

Ce menu as trois niveaux et peut être étendu si vous avez des niveaux supplémentaires.

Il nécessite une surcharge du module de menu et des modifications CSS.

Le template utilisé est Beez 3.

Il peut être adapté pour le template Beez 2.0, mais nécessite pour cela un script Javascript. Ceci n'est pas décrit dans ce tutoriel.

Tutoriel en cours de révision : cause des changements ont été apportés au module de menu depuis la publication. Ce qui rend ce tuoriel incompatible avec les versions 3.1 et 3.2 de Joomla. Une nouvelle version de celui ci serat disponible prochainement.

Comment créer un menu déroulant avec le menu standard Joomla 3.x?

Le paramétrage du module de menu

Pour que le menu déroulant soit actif, il faut que les paramètres suivant du module de menu soit ceux ci dessous :

Les options du module de menu standard Beez 3
  • Elément de menu actif : courant
  • Niveau de départ : 1
  • Dernier niveau : tout
  • Afficher touts les liens : oui

La surcharge du module de menu

Pour effectuer la surcharge du module de menu, il faut faire les deux choses suivantes :

  • En premier lieu, il faut recopier le fichier /modules/mod_menu/tmpl/default.php dans le dossier /templates/beez3/html/mod_menu. Ce qui donnes la structure suivante : /templates/beez3/html/mod_menu/default.php
  • Ensuite, il faut éditer ce fichier et modifier la ligne 65 comme ci dessous :

     
    $class = ' class=" menu dropdown '.trim($class) .'"';
     

    Ceci assures la mise en forme verticale du menu.

    Le code html rendu par la surcharge est celui ci dessous. Je l'ais simplifié en enlevant les liens et le nom de mes éléments de menu.

     
    <div role="menubar" id="menuwrapper">
    <!-- le menu de premier niveau -->
    <ul class="nav menu">
    <li class=" menu dropdown item-417"><a href=""></a></li>
    <li class=" menu dropdown item-114"><a href=""></a></li>
    <li class=" menu dropdown item-379"><a href=""></a></li>
    <li class=" menu dropdown item-380"><a href=""></a></li>
    <li class=" menu dropdown item-413"><a href=""></a></li>
    <li class=" menu dropdown item-439"><a href=""></a></li>
    <li class=" menu dropdown item-440 current active deeper parent"><a href=""></a>
    <!-- le menu de second niveau -->
    <ul class="nav-child unstyled small">
    <li class=" menu dropdown item-432"><a href=""></a></li>
    <li class=" menu dropdown item-442 deeper parent"><a href=""></a>
    <!-- le menu de troisième niveau -->
    <ul class="nav-child unstyled small">
    <li class=" menu dropdown item-416"><a href=""></a></li>
    </ul></li>
    <li class=" menu dropdown item-441"><a href=""></a></li>
    </ul></li>
    </ul></div>
     

Les modifications css

Les modifications CSS ci dessous sont à mettre à la fin du fichier personal.css. J'y ais inclus des commentaires expliquant le fonctionnement de celles ci.

Les éléments de sous menu doivent être contingus, sinon le survol ne fonctionneras pas.

 
/* menu déroulant css */
/* On remontes le menu pour le coller juste en dessous du menu de premier niveau */
/* s'il y as un éspace, alors on ne pourras pas cliquer sur le sous menu */
ul.nav-child {margin-top:-32px !important;}
/* on donnes la largeur du sous menu.Celle ci est à choisir en fonction de */
/*l'élément de menu le plus long, afin */
/* que le lien s affiches sur une ligne. On supprimes aussi les bords */
 /* arrondis hérités de #header ul.menu */
ul.nav-child li a
 {width:150px;border-radius:0 !important;}
/* on caches les sous menus tant qu'ils ne sont pas affichés */
ul.menu li ul.nav-child, #header ul.menu li ul.nav-child li ul.nav-child
 {display:none;}
/* On affiches les sous menus quand l'élément de menu correspondant */
/* est survolé par le curseur de la souris. */
ul.menu li:hover ul.nav-child,#header ul.menu li ul.nav-child li:hover ul
 {display:block;}
/*on décales le sous menu de troisième niveau. On met un positionnement */
/* absolu, sinon le sous menu s'affiches sous le menu de second niveau.*/
 /* Le décalage peut être à modifier en fonction de la largeur entrée au dessus.*/
#header ul.menu li ul.nav-child li:hover ul
{float:right;position:absolute;left:180px;top:8px;}
 
Lu 11283 fois Dernière modification le mercredi, 26 février 2014 09:05
informaticien51

Je suis un informaticien de 37 ans, qui touche à tout en informatique.

Je désire juste partager mes connaissances via ce blog.

Il y a beaucoup de sujets en préparation.

N'hesitez pas à faire des commentaires constructifs, ou me faire parvenir vos demandes concernant un ou plusieurs sujets.

Ajouter vos commentaires

Post comment as a guest

0

Translation

Me contacter directement

De : 
Sujet 
Votre demande : 
Recopiez les caractères de l'image ci-dessous gafmgdyn (en vous remerciant de nous aider à lutter contre le SPAM !)
  Une copie de ce mail ?
    

En savoir plus sur Beez

commentaires

Invité - chris - Commenté le Decouverte de K2 dans K2
sympa et merci pour les info
Invité - dream5 - Commenté le Les styles CSS de la vue d'un ... dans K2
Bonjour et merci pour ce canal qui nous aide à nous parfaire. Ma question de savoir comment modifier...
informaticien51 - A répondu au commentaire # 149 le Les déclarations Jdoc dans K2
Dans le cas d'un lien de menu de type blog des articles en vedette, le composant utilisé est le comp...
Invité - Kyos - Commenté le Les déclarations Jdoc dans K2
Bonjour informaticien51 Pourrais-tu me donner quelques précisions sur l'attribut type component de ...
informaticien51 - A répondu au commentaire # 150 le Inserer un module dans un arti... dans K2
Le lien ci dessus pointes vers un blog plus généraliste que le mien, ou vous trouverez des informati...

Mes visiteurs

Aujourdhui134
Hier170
Cette semaine134
Ce mois5048
Total106720
22/09/14

Connexion

Notice

Le nom Joomla!® et son logo sont utilisés sous licence limitée d'Open Source Matters, le propriétaire mondial de la marque de commerce. Informaticien51.fr n'est pas affilié ni soutenu par Open Source Matters ou le projet Joomla!®

Visitor counter, Heat Map, Conversion tracking, Search Rank
+