  |
  |
Descriptif : Ce module est spécialisé dans l'affichage dynamique de menus horizontaux et verticaux. De nombreux paramètres sont accessibles depuis le backend, permettant d'intégrer ce nouveau menu à votre site: taille, fond, bordure, couleurs, police, style, offset ... des boutons. Correctement configuré il remplacera le menu principal.
Exemple de menu horizontal réalisé avec swMenuFree
Exemple de menu vertical configuré pour le template "Beez"
Installation : Il existe 2 déclinaisons pour cette extension, l'une est destinée à Joomla 1.0.x, l'autre à Joomla 1.5.x. Télécharger la seconde version (com_swmenufree4.6J1.5RC3.zip).
Pour installer le composant swMenuFree, cliquez sur "Extensions" puis sur "Installer/Désinstaller" et choisir l'onglet "Installation". En utilisant le bouton "Parcourir", sélectionnez alors le package d'installation téléchargé précédemment. Cliquez ensuite sur "Transfert de fichier & Installation".
Paramétrage (le menu principal d'un site test avec un template "beez" sera remplacé par swMenuFree) :
Dans cet exemple je vais remplacer le menu principal d'un site test par swMenuFree. Le template de ce site étant "beez", il faudra donc se rapprocher au plus près du style des boutons originaux.
Pour accéder à la configuration de l'extension Affichage du menu, cliquez sur "Composants > swMenuFree". Les paramètres suivant se trouvent dans l'onglet "Menu Module Settings" .
-
Nom du module : La première chose à faire est de donner un nom au module (par exemple "Menu Principal"), en renseignant le champ "Module Name".
-
Le menu à remplacer : Il est possible de choisir le menu à remplacer (Menu Source) qui le cas de cet exemple est "mainmenu" car je souhaite remplacer le menu principal.
-
Affichage du nom du module : On peut éventuellement choisir d'afficher le nom du module en mettant "Show Module Name" à "Oui".
-
Position du module : Il sera placé dans la partie "Left" des pages (Module Position).
-
Affichage dynamique : Pour obtenir un affichage dynamique des catégories et des titres des articles, il faut mettre "Hybrid Menu" à "Oui"
-
Pages sur lesquelles le menu sera affiché : Il sera affiché sur toutes les pages ("Show Menu Module on Pages" étant à "All") car il s'agit du menu principal.
-
Affichage du bouton actif: Pour que le bouton actif soit matérialisé (après un clic sur l'un des boutons), mettre "Active Menu" à "Oui".
-
Le cache : Pour des sites à forte fréquentation il faut activer le cache pour limiter les requêtes mysql. Par défaut la durée de vie de ce caches est d'une heure.
-
Publication : Avant de sauvegarder, il faut publier le module en mettant "Published" à "Oui".
On obtiendra alors, en frontend, un menu horizontal avec des sous-menus très décalés de la zone principale (niveau supérieur). Les ajustements se font dans "Composants > swMenuFree", onglet "Position & Offsets".
-
Menu vertical : Choisir pour "Top Menu / Sub Menu - Orientation" un affichage vertical avec les sou-menu à droite (vertical/right).
-
Hauteur et largeur des boutons : Pour le template "Beez" la taille des boutons a été ajustée à sont de 192 x 21 pixels. Assigner 192 à "Top Menu Item Width" et à. Mettre 21 à "Top Menu Item Height", et à "Sub Menu Item Height".
-
Décalage horizintal du menu : Il faut décaler le menu swMenuFree vers la droite pour qu'il soit aligné sur les menus du template (Top Menu Left Offset mis à 7 pixels).
-
Position des sous-menus : Ces ajustements ont été effectués par tâtonnement. Les valeurs recueillies sont les suivantes : -198 pour "Level 1 Sub Menu - Top Offset" et -127 pour "Level 1 Sub Menu - Left Offset". Les valeurs de "Level 2 Sub Menu - Top Offset" et "Level 2 Sub Menu - Left Offset" restant à 0.
L'onglet suivant "Colors & Backgrounds" permettra de modifier les couleurs des fonds, de la police, des bordures. Avant de procéder au paramétrages il faudra créer des images correspondant aux fond utilisés par les boutons du template "Beez". Deux fichiers seront nécessaires : l'un sera affecté à "Top Menu Background", le second à "Top Menu Over Background" et "Sub Menu Over Background".
Fichier affecté à "Top Menu Background". Si besoin le fond fond est répété automatiquement en x et y, donc la largeur peut être ramenée à 1 pixel. Il sera nommé "topmenubackground.png" par exemple.
Fichier affecté à "Top Menu Over Background" et "Sub Menu Over Background". Ce fichier pourrait être ramené à 1 pixel de haut. Il sera nommé "topmenuoverbackground.png".
-
Choix des fonds fichiers : Pour affecter un fond sous forme de fichier à "Top Menu Background", cliquez sur le bouton "get". Sélectionnez alors le fichier "topmenubackground.png" créé précédemment en utilisant le bouton parcourir. Cliquez ensuite sur "Upload" pour transférer le fichier dans le serveur. Ensuite ne pas oublier de le sélectionner dans la liste avant de valider en cliquant sur "OK". Répétez l'opération pour "Top Menu Over Background" et "Sub Menu Over Background" en utilisant cette fois ci le fichier "topmenuoverbackground.png".
-
Affectation des couleurs de fond : "Top Menu Color" aura pour valeurun blanc (#FFFFFF). Mettre pour "Top Menu Over Color" un noir, soit la valeur hexadécimale "#000000" . On assignera le rose du template "Beez" à "Sub Menu Color", soit "#f2e3ed". "Sub Menu Over Color" sera également noir (#000000).
-
Couleur des polices de caractères : Les couleurs utilisées sont : "#000000" pour "Top Menu Font Color" et "Sub Menu Font Color", "#FFFFFF" pour "Top Menu Over Font Color" et "Sub Menu Over Font Color".
-
Couleurs des bordures : Dans cet exemple seul une bordure sera utilisée pour "Top Menu Inside Border". Elle sera blanche, soit "#FFFFFF" et permettra d'espacer les boutons du niveau supérieur, comme ceux du template "Beez".
Dans l'onglet "Fonts & Padding" peu de modifications seront effectuées :
-
Taille des polices : Elle sera ramenée à 10 pixels pour "Top Menu Font Size" et "Sub Menu Font Size" pour correspondre à celles utilisées par défaut dans le template "Beez".
-
Graisse des polices : Elle sera mise à "normal" pour "Sub Menu Font Weight".
Dans l'onglet "Borders & Effects" également peu de changements (certains ajustement effectués dans cette page semblent ne pas fonctionner comme "Sub Menu Inside Border Width") :
-
Taille des bordures : "Top Menu Inside Border Width" sera mis à 4 pixels de façon à espacer les boutons du niveau supérieur de façon ressembler aux boutons utilisés par défaut dans le template "Beez".
-
Type de bordures : Sélectionner "solid" pour "Top Menu Inside Border Style.
Résultat de l'application des paramètres avec dans la partie supérieure, sous "Main Menu" les boutons par défaut du template "Beez" et sous le titre "Menu swMenuFree" le menu dynamique swMenuFree.
Il ne reste plus qu'à masquer le menu par défaut du template et à modifier le position d'affichage du menu swMenuFree (et d'en enlever éventuellement le titre dans "Compsants > swMenuFree", onglet "Menu Module Settings".
-
Masquer le menu par défaut : Dans "Extensions > Gestion des modules", dépublier "Main Menu" (type : mod_mainmenu) en cliquant sur l'icône prévue à cet effet.
-
Modifier la position d'affichagede swMenuFree : Dans "Extensions > Gestion des modules", utilisez le sélecteur de positions pour n'afficher que les modules présents dans "left". Puis faites remonter "Menu swMenuFree" (type : mod_swmenufree) en première ligne en utilisant les petites flèches de la colonne "Ordre".
Auteur : Sean White - Téléchargement : swMenuPro - Licence : GPLv2.0 - Compatibilité : Joomla 1.0 et Joomla 1.5 en natif (versions différentes) - Divers : Joomla.org
Configuration pour le test : Joomla 1.5.x fr, Serveur local avec Apache 2.x.x (Win32) - PHP Version 5.x.x - mySQL 5.x.x, Navigateur Mozilla Firefox 2.x.x.xx. Le détail des versions a été masqué pour des raisons de sécurité.
| Suivant > |
|---|
Commentaires
merci pour votre tutoriel. L'outil semble satisfaisant et facile d'utilisation.
Cependant, j'ai une erreur qui s'affiche sur mon site, à coté du menu
Notice: Undefined index: aol in c:Program fileseasyphp1-8wwwtestsitemod ulesmod_swmenuf reefunctions.php on line 987
Connaissez vous la raison de cette erreur?
Je vous remercie
Cordialement
This will occur on servers set to display PHP notices. I'm not sure how I missed it in testing but it is very easy to fix. Just delete or comment out line 987 of the modules/mod_swmenupro/functions.php file, it's not needed:
$this->AOL = $bd['aol'];
En espérant que cela règle le problème ?
http://www.swmenupro.com/index.php?option=com_remository&Itemid=298&func=fileinfo&id=19
Je viens d'installer swmenufree 5.1 pour joomla 1.5 et j'obtiens de bons résultats dans le preview, malheureusement , lorsque je passe sur le site, mes sous menus ne s'affichent pas. Quelqu'un sait-il si certains templates sont incompatibles (et si oui, pourquoi) et/ou si une animation flash sur la page peut poser problème ? D'avance, merci de votre aide.
J'ai juste un petit souci : je voudrais limiter à 20 les sousmenus, j'ai donc indiqué 10 au Maximum Level mais rien à faire, la liste complète (40 pour l'instant des articles de la catégorie) se déroule... Une astuce?
"Maximum Level" ne sert pas à limiter l'affichage de nombre de liens vers les articles, mais à limiter le nombre de sous-menus. C'est pas très facile à expliquer comme ça, mais si tu comprendra en ouvrant la configuration de swMenuFree, onglet "Size, Position & Offsets" : schéma explicatif avec les niveaux (Level) de sous-menus.
Depuis l'installation de swmenufree, sous Firefox, j'ai le message suivant avec joomla 1.5.3 :
"Fatal error: Allowed memory size of 8388608 bytes exhausted (tried to allocate 67437 bytes) in F:wwwinfo2424pl uginssystemsef.php on line 58"
avec IE 7 j'arrive sur la page d'accueil, mais je déroule un menu et clique sur une entrée de sous menu, j' ai le message suivant :
"Fatal error: Allowed memory size of 8388608 bytes exhausted (tried to allocate 60187 bytes) in F:wwwinfo2424pl uginssystemsef.php on line 64"
Si je désactive le règlage swmenufree "hybrid menu", je n'ai plus d'erreur, mais plus de menu déroulant.
Autres règlages :
- Le plugin SEF est activé
- dans le menu site de Joomla j'ai:URL explicite à oui
- et j'ai le mode rewrite d'Apache à non
Sur un autre site en local avec JOOMLA 1.51 et les mêmes règlages, je n'ai pas ce problème, sauf si je clique sur une entrée de sous-menu qui n'est pas la plus profonde.
Il y a de l'incompatibilité dans l'air !...
D'avance merci pour l'aide.
Je pense que le problème est plutôt lié à une insuffisance de mémoire disponible pour l'exécution des scripts php. J'ai l'impression que ton hébergeur est sur la configuration par défaut de 8Mo (memory_limit dans php.ini), ce qui est très peu. Le plus simple c'est de lui demander une modification du paramétrage. Si ce n'est pas possible tu peux essayer les procédures 3 ou 2 (qui fonctionneront si ton hébergeur les autorisent). La procédure 1 correspond à un site local où tu peux modifier ce que tu veux.
1 fonctionne en local, mais pas chez un hébergeur. Ouvrez le fichier php.ini fichier avec n'importe quel éditeur de texte et modifiez les valeurs de memory_limit. Généralement memory_limit est par défaut à 8M. Essayez de la modifier à 12M et redémarrer Apache. Si cela ne fonctionne pas, porter la valeur à 16 millions ou 24 millions.
2 Méthode à déconseiller car à répéter sur tous les scripts qui posent problème Si n'avez pas accès au fichier php.ini, ouvrir le fichier PHP qui génère l'erreur, et ajouter une ligne ini_set(’memory _limit’, ‘12M’); Si cela ne fonctionne pas, augmenter la valeur
3 Méthode à conseiller, mais pas toujours autorisée par les hébergeurs Rechercher ou créer un fichier .htaccess à la racine du site, et y ajouter une ligne contenant : php_value memory_limit 12M
Deux précisions : mes 2 sites JOOMLA (1.5.1) et (1.5.3), fonctionnent avec la même base de données (original et copie) en local et j'utilise Swmenufree v5.2 pour JOOMLA 1.5.
J'ai augmenté la limite dans php.ini jusqu'à 32Mo, mais rien n'y fait, j'ai toujours le même message dés le chargement de la page d'accueil.
En 1.5.1 ça marche, mais j'ai le même type de message d'erreur si je ne clique pas sur l'entrée de menu la plus profonde.
En 1.5.3 Swmenufree marche si je désactive le plugin SEF, mais les adresses ne sont plus bonnes et là j'ai un message d'erreur.
Je pense qu'il y a un conflit entre la réécriture d'url et les url utilisées par Swmenufree.
Si tu vois autre chose à essayer, d'avance merci.
En 1.5.3, avec les mêmes règlages cela ne marche pas.
Dans quelques jours Swmenufree sera en prod sur le site de ma boite : formation.1g6.biz
Mon soucis concerne simplement l'affichage des différents niveaux dans mon site.
Plusieurs sous catégories (avec des articles derrières) sont rattachés à une catégories:
Saison -> Equipes -> Séniors => nécessaire niveau 3 pour etre correctement affiché
Plusieurs catégories avec Articles uniques:
Vie Du Club -> Dirigeants -> Dirigeants => pour afficher l'article c'est vraiment lourd !!!!
Comment est ce que je peux réglé ça? Lors de la création d'un article il est obligatoire d'utiliser Section + Catégorie. Du coup c'est problématique !!!!
Quelqu'un a t-il une idée?
Merci D'avance
Si tu es sous Joomla 1.5 tu peux tenter les articles "Non catégorisés". Je pense que cela devrait fonctionner avec swMenuFree.
Par contre avec Joomla 1.0, il n'y a pas cette possibilité, donc tu es obligé de créer une section, puis une catégorie pour y placer tes articles. Mais tu peux utiliser un lien vers un article dans ton menu ?
Je débute sur joomla et j'apprécie cet article sur swmenufree, que j'ai installé et configuré "à ma sauce".
Il y a une chose que je n'arrive pas à faire : mettre des puces (personnalisées ) au niveau du menu. J'ai bien essayé de rajouter :
ul
{
list-style-image: url('/joomla15_test/images/li.png');
}
en éditant le fichier css, mais ça ne change rien... En fait je suis un peu perdue je n'ai pas les bases en php donc je ne suis même pas sûre de faire ça dans le bon fichier ! Donc : suis-je dans le bon fichier ? et comment faire ? Merci d'avance !
Ta syntaxe est bonne pour ajouter des images à une liste à puces. Mais je n'ai pas l'impression que swMenuFree utilise ce genre de listes, en tout cas dans la version qui se trouve sur le site démo car j'y trouve plutôt un tableau.
Par contre dans la configuration de swMenu, il est possible de mettre des images en fond des boutons (Background Images : Top Menu Background, Top Menu Over Background...). C'est peut-être avec cela que tu pourra mettre des puces personnalisées dans les menus.
- créer une image de fond suffisamment large avec une puce à gauche
- l'affecter en fond des différents boutons.
- après il faudra peut-être jouer sur les "paddings" ou autre pour que le texte ne soit pas au-dessus de la puce.
Je n'ai pas testé. Tu peux nous tenir au courant.
PS : un outil très efficace pour analyser le contenu d'une page web (html, css, scripts...) : Firebug pour Firefox.
J'ai installé swmenufree sur un site test sous Joomla 1.0 (pour des questions de composents, je migre plus tard vers 1.5)
Il fonctionne à merveille sous Firefox mais sous IE 6, les sous-menus apparaissent en haut à l'extrême gauche de la page, totalement en dehors du menu ...
Je ne vois vraiment pas ce qui coince ...
Site test (www.parcs-attractions.eu/Public1/)
Merci pour votre aide
Je viens d'essayer avec les 2 templates fournis avec Joomla :
- avec "rhuk solarflare ii", même phénomène : sous-menu en haut à l'extrême droite de la page
- avec madeyourweb, presque idem sauf qu'ils sont positionnés en bas et au milieu de la page ...
merci
bien à vous
nicolas
J'utilisais d'autres composants de menu déroulant dans les versions précédentes de Joomla et cette manip n'était pas nécessaire : il suffisait d'indiquer quel menu on rendait déroulant et ça se faisait tout seul. C'est ce qui m'a induit en erreur.
Il ne reste plus qu'à masquer le menu par défaut du template et à modifier le position d'affichage du menu swMenuFree (et d'en enlever éventuellement le titre dans "Compsants > swMenuFree", onglet "Menu Module Settings"...
Mais c'est vrai que le tutoriel est un peu dense et on peut passer à côté. A+, LesH
Tout d'abord merci pour ce tutoriel. Je l'ai suivi pas à pas pour intégrer un menu dynamique sur un template Beez. Tout fonctionne bien pour un menu vertical à gauche. Mais comment faire pour une menu horizontal en haut de l'écran ?
Pour ce faire, il faudrait affecter le menu aux positions User3 ou User4 de Beez ... Mais swMenuFree ne les répertorie pas dans la liste déroulante dite Module Position.
Merci d'avance si vous avez une suggestion ?
Cordialement,
Je viens de refaire une installation de SwMenuFree sur un site de test (Joomla 1.5.9). Le sélecteur \"Module Position\" me propose bien toutes les positions du template Beez.
Il faudrait que tu vérifies si elles se trouvent bien dans le fichier xml du template (\\templates\\b eez\\templateDe tails.xml) :
Code :
<positions><br /><position>left</position> <br /><position>right</position> <br /><position>top</position> <br /><position>breadcrumb</position> <br /><position>user1</position> <br /><position>user2</position> <br /><position>user3</position> <br /><position>user4</position> <br /><position>debug</position> <br /><position>syndicate</position> <br /></positions>Peut-être utilises-tu une version un peu ancienne de Joomla avec un template Beez pas à jour ?
A+, LesH
J'ai vérifié que les 2 positions existaient bel et bien dans le fichier xml du template mais rien n'y fait. Pourtant j'utilise Joomla 1.5.9 et le template Beez préinstallé.
Tant pis, ce n'est pas grave, merci d'avoir cherché.
Super tutoriel.
Etant débutant, je ne sais pas comment gerer plusieurs modules sous SwMenuFree ? Est-il possible d'avoir plusieur menu dynamique ?
A quoi sert exactement la fonction d'exportation css ?
Merci beaucoup
quelques indications svp ! merçi d'avance
Une solution ?
A+
Bernard
Les sous menu se déplace lorsque je redimentionne ma fenêtre!
Cela vient bien tu template mais si qqun pourrait m'aider a résoudre ce problème car j'ai passer pas mal d'heure sur ce template (graphique)!
J'utilise le template Aurora
Merci d'avance
Effectivement le problème venais du template alors il faut juste reprendre le code CSS et modifier les lignes contenant "position : relative;" par "position : static;" et si vous avez comme moi un style css spécial pour ie ajoutez " * {position :static;}"
Voila normalement avec ca ca devrais marché!
si vous avez des question n'ésitez pas!!!
Byos @+
Flayer
Car le code de l'extension est bien programé et il y a rien a retouché!
C'est juste le template qui pose problème!!
Merci!!
S’abonner au flux RSS pour les commentaires de cet article.