+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu]Menu remplacé avec des images (/thread-2567.html)
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.4
#~ Url du site : local
#~ Hébergeur / Soft : wampserver
#~ Informations Système :
----------------------------------------------
Cms Version: 1.11.4
Installed Modules:
CMSMailer: 5.2.1
CMSPrinting: 1.0.3
FileManager: 1.4.3
MenuManager: 1.8.4
MicroTiny: 1.2.5
ModuleManager: 1.5.5
News: 2.12.10
Search: 1.7.7
ThemeManager: 1.1.7
Config Information:
php_memory_limit:
process_whole_template:
output_compression:
max_upload_size: 2000000
url_rewriting: none
page_extension:
query_var: page
image_manipulation_prog: GD
auto_alias_content: true
locale:
default_encoding: utf-8
admin_encoding: utf-8
set_names: true
Php Information:
phpversion: 5.2.4
md5_function: On (Vrai)
gd_version: 2
tempnam_function: On (Vrai)
magic_quotes_runtime: Off (Faux)
E_STRICT: 0
memory_limit: 128M
max_execution_time: 30
output_buffering: 4096
safe_mode: Off (Faux)
file_uploads: On (Vrai)
post_max_size: 8M
upload_max_filesize: 2M
session_save_path: c:/wamp/tmp (0777)
session_use_cookies: On (Vrai)
xml_function: On (Vrai)
xmlreader_class: On (Vrai)
Server Information:
Server Api: apache2handler
Server Db Type: MySQL (mysqli)
Server Db Version: 5.1.36
Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~
Bonjour,
Voilà plusieurs jours que je suis confronté à un problème avec mon menu. Dans un précédent post on m'avait aidé à mettre le premier niveau de mon menu à la verticale mais ça m'a créé plein de décalages et si je les adapter pour IE ça décalé pour les autres navigateurs et vice-versa.
Donc bon pour régler ce problème une fois pour toute j'aimerais remplacer le premier niveau de mon menu par des images. J'ai donc trouver le tuto suivant:
http://themes.cmsmadesimple.org/Howto/Image_menu.html
Mon problème c'est que je bloque déjà pour la première étape
. Je ne sais pas où placerCode :
<li id="i{$node->id}">Code :
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or $node->current == true}
{assign var='classes' value='menuactive'}
{if $node->parent == true}
{assign var='classes' value='menuactive menuparent'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li id="i{$node->id}" class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span><li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}Pouvez-vous m'éclairer une fois de plus s'il vous plait?
D'avance merci.
[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
Il y a plusieurs moyens pour y arriver.
Ici, ton but est de modifier la présentation du lien de premier niveau.
Tu peux donc travailler sur if $node->depth==1 qui représente toutes les pages de niveau 1.
Il faut d'abord que tu comprennes le fonctionnement de menumager.
J'ai fais un tuto qui pourrais t'aider à comprendre le principe : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=4681.
Et un autre post ici : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2680
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
Ok merci. Je me penche dessus de suite.
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
J'ai bien tout lu mais j'ai énormément de mal à comprendre ce langage.
Néanmoins j'ai essayé avec le tuto mais il n'y as pas de changement.
Comment savoir d'où vient mon erreur? Mon menu s'affiche sans problème mais il n'y a pas de changement.
Pour le gabarit du menu j'ai remplacé comme ceci:
Code :
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->depth==1 and $node->haschildren == false}<li class="menu{$node->hierarchy}"><a
{elseif $node->parent == true or $node->current == true}
{assign var='classes' value='menuactive'}
{if $node->parent == true}
{assign var='classes' value='menuactive menuparent menu{$node->hierarchy}'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span><li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}Pour la feuille de style j'ai placé ces lignes comme test mais pas de changement (j'utilise le template simplex)
Code :
nav.main-navigation > ul > li.menu1 {
background: #FF0000;
}
nav.main-navigation > ul > li.menu2 {
background: #00FF00;
}Je sais que j'en demande beaucoup mais j'ai l'impression d'être devant un mur ...
[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
C'est vrai que ce module n'est pas des plus intuitifs avant de bien le maîtriser.
On va essayer d'être plus clair.
Ton but est d'ajouter une classe spécifique sur tous les liens de premier niveau.
Tu peux le faire en ajoutant une condition :
Si $node->depth==1 alors tu dois écrire class="imageNumeroVariable"
Et dans la css, tu pourras ainsi personnaliser l'image grâce à :
nav.main-navigation ul li.image1 {tes attributs}
nav.main-navigation ul li.image2 {tes attributs}
Donc, tu modifies le code de cette ligne :
Code :
[== Indéfini ==]
{if $node->depth==1 and $node->haschildren == false}<li class="menu{$node->hierarchy}"><aCode :
[== Indéfini ==]
{if $node->depth==1}<li class="image{$node->hierarchy}"><aUne fois cette modification effectuée, vérifie le code source généré (clic droit sur la page) et colle-le ici (uniquement l'html de la navigation) afin de voir si la classe "imageN°" s'est bien écrite.
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
Tout d'abord merci de votre aide!
J'ai fait ce que vous m'avez dit et j'obtiens ceci:
Code :
<!-- .main-navigation (main navigation on the right side) -->
<nav class='main-navigation grid_8 noprint' id='nav' role='navigation'>
<ul class='cf'><li><a href='http://localhost/procontrol/'>accueil</a></li><li><a href='http://localhost/procontrol/index.php?page=presentation' class='current'>Présentation</a></li><li class='parent'><a href='http://localhost/procontrol/index.php?page=notre-equipe'>Notre équipe</a><ul><li><a href='http://localhost/procontrol/index.php?page=responsable-d-affaires'>Responsable d'affaires</a></li><li><a href='http://localhost/procontrol/index.php?page=bureau-d-etudes'>Bureau d'études</a></li><li><a href='http://localhost/procontrol/index.php?page=automaticiens'>Automaticiens</a></li><li><a href='http://localhost/procontrol/index.php?page=cableur-tableautier'>Câbleur/Tableautier</a></li><li><a href='http://localhost/procontrol/index.php?page=electromecanique'>Electromécanique</a></li><li><a href='http://localhost/procontrol/index.php?page=electricien-monteur'>Electricien monteur</a></li><li><a href='http://localhost/procontrol/index.php?page=secretariat-comptabilite'>Secrétariat/Comptabilité</a></li></ul></li><li class='parent'><a href='http://localhost/procontrol/index.php?page=savoir-faire'>Savoir faire</a><ul><li class='sectionheader'><span class='sectionheader '>Activités</span><ul><li><a href='http://localhost/procontrol/index.php?page=installations'>Installations</a></li><li><a href='http://localhost/procontrol/index.php?page=installations-atex'>Installations ATEX</a></li><li><a href='http://localhost/procontrol/index.php?page=mise-en-conformite'>Mise en conformité</a></li><li><a href='http://localhost/procontrol/index.php?page=cablage-atelier'>Câblage atelier</a></li><li><a href='http://localhost/procontrol/index.php?page=moteurs-pompes'>Moteurs</a></li><li><a href='http://localhost/procontrol/index.php?page=air-comprime'>Air comprimé</a></li><li><a href='http://localhost/procontrol/index.php?page=bureau-etudes-electrotechnique-automatisme'>Bureau d'études</a></li><li><a href='http://localhost/procontrol/index.php?page=vision-industrielle'>Vision industrielle</a></li><li><a href='http://localhost/procontrol/index.php?page=lecture-codes'>Lecture codes</a></li><li><a href='http://localhost/procontrol/index.php?page=marquage'>Marquage</a></li><li><a href='http://localhost/procontrol/index.php?page=mesure'>Mesure</a></li><li><a href='http://localhost/procontrol/index.php?page=conformite-machine'>Conformité machine</a></li></ul></li><li><a href='http://localhost/procontrol/index.php?page=domaine-d-activites'>Domaine d'activités</a></li></ul></li><li><a href='http://localhost/procontrol/index.php?page=nos-services'>Nos services</a></li><li class='parent'><a href='http://localhost/procontrol/index.php?page=nos-moyens'>Nos moyens</a><ul><li><a href='http://localhost/procontrol/index.php?page=moyens-securite'>Moyens/Sécurité</a></li><li><a href='http://localhost/procontrol/index.php?page=formation-du-personnel'>Formation du personnel</a></li></ul></li><li><a href='http://localhost/procontrol/index.php?page=contact'>Contact</a></li></ul>
</nav>
<!-- .main-navigation //-->[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
On ne le voit pas.
Vide le cache du navigateur : ctrl+shift+del et choisi vider le cache
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
J'ai trouvé mon erreur !
Dans mon gabarit j'ai mis {menu template='test.tpl'} alors qu'il n'y a pas de "tpl" (je me disais aussi pourquoi quoi que je fasse rien ne change)
Bon j'ai des trucs bizarres pour le moment mais je m'y replonge et je vous retiens au courant ^^
ps: j'ai bien la classe image qui apparait dans le code source de la page.
[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
Normalement, toutes les pages de premier niveau devraient être du style : <ul><li class="image1.."><a href='http://localhost/procontrol/'>accueil</a>
[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
Bien, teste maintenant ton css en ajoutant cette ligne A LA FIN de ta css : nav.main-navigation ul li.image1 {
background: #FF0000;
}
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
Euh ça ne se présentre pas comme il faudrait car le code source ressemble à ça:
Code :
<!-- .main-navigation (main navigation on the right side) -->
<nav class='main-navigation grid_8 noprint' id='nav' role='navigation'>
<ul>
<li class="image1"><a
</li>
<li class="image2"><a
</li>
<li class="image3"><a
<ul>
</li>
</li>
</li>
</li>
</li>
</li>
</li></ul>
</li>
<li class="image4"><a
<ul>
<li class="sectionheader"><span>Activités</span><li><a href="#"><span>Activités</span></a>
<ul>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li></ul>
</li>
</li></ul>
</li>
<li class="image5"><a
</li>
<li class="image6"><a
<ul>
</li>
</li></ul>
</li>
<li class="image7"><a
</li>
</ul>
</nav>
<!-- .main-navigation //-->
[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
Donne-moi ton gabarit menu
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
Le voici :
Code :
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->depth==1}<li class="image{$node->hierarchy}"><a
{elseif $node->parent == true or $node->current == true}
{assign var='classes' value='menuactive'}
{if $node->parent == true}
{assign var='classes' value='menuactive menuparent menu{$node->hierarchy}'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span><li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
Donne-moi plutôt le gabarit avant les modifications, celui de base
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
Je suis parti de "simple_navigation.tpl"
Code :
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or $node->current == true}
{assign var='classes' value='menuactive'}
{if $node->parent == true}
{assign var='classes' value='menuactive menuparent'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
Essaye ceci :
Code :
[[strip]]
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->depth ==1}<li class="image{$node->hierarchy}"><a href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->parent == true or $node->current == true}
{assign var='classes' value='menuactive'}
{if $node->parent == true}
{assign var='classes' value='menuactive menuparent'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
[[/strip]][Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
C'est vraiment sympa de m'avoir consacré tout ce temps Merci !
Ça à l'air de marcher comme il faut, maintenant je vais travailler sur le css.
Je laisse le post ouvert encore un peu au cas où.
Je vous tiens au courant.
[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
Tu as vu que je n'ai ajouté qu'une ligne : {if $node->depth ==1}<li class="image{$node->hierarchy}"><a href="{$node->url}"><span>{$node->menutext}</span></a>
et modifié le début de la suivante : {if.. est devenu {elseif
C'est une des choses que tu dois maîtriser : http://www.smarty.net/docsv2/fr/language.function.if.tpl
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
Oui j'ai regardé ce qui avait changé.
Je vais bien regarder tout ça car j'aimerais vraiment comprendre et pouvoir modifier ce que je veux comme je le souhaite mais bon c'est sûr que ça ne va pas être facile tout ça !
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
Alléluia !!
J'ai réussi à modifier le css de telle manière à obtenir l'effet voulu.
J'aurai juste une dernière question (par curiosité): pour cacher le texte du menu j'ai rajouté la ligne suivante text-indent:-9000px;
J'ai cru voir que c'était pas génial, non ?
[Résolu]Menu remplacé avec des images - Jean le Chauve - 05/02/2013
Si ça marche, c'est ce qui compte
Les finitions, tu pourras toujours les modifier quand tu auras le temps et que tu maîtriseras la bête.
[Résolu]Menu remplacé avec des images - Laure_21 - 05/02/2013
C'est pas faux.
En tout cas encore MERCI
