Forum CMS Made Simple FR

Version complète : [Résolu]Menu remplacé avec des images
Vous consultez actuellement la version basse qualité d’un document. Voir la version complète avec le bon formatage.
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 Sad . Je ne sais pas où placer
Code :
<li id="i{$node->id}">
dans le template de mon menu
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}
J'ai lu l'aide sur le module MenuManager mais je n'y arrive toujours pas.
Pouvez-vous m'éclairer une fois de plus s'il vous plait?

D'avance merci.
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
Ok merci. Je me penche dessus de suite.
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 ...
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}"><a
en
Code :
[== Indéfini ==]
{if $node->depth==1}<li class="image{$node->hierarchy}"><a

Une 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.
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 //-->
On ne le voit pas.
Vide le cache du navigateur : ctrl+shift+del et choisi vider le cache
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.
Normalement, toutes les pages de premier niveau devraient être du style : <ul><li class="image1.."><a href='http://localhost/procontrol/'>accueil</a>
Bien, teste maintenant ton css en ajoutant cette ligne A LA FIN de ta css : nav.main-navigation ul li.image1 {
background: #FF0000;
}
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 //-->
J'ai mes rectangles de couleur affichés mais plus de texte Confused
Donne-moi ton gabarit menu
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}
Donne-moi plutôt le gabarit avant les modifications, celui de base
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}
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]]
Si tu as besoin de classes supplémentaires sur d'autres niveaux, tu le dis.
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.
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...ion.if.tpl
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 !
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 ?
Si ça marche, c'est ce qui compte Wink
Les finitions, tu pourras toujours les modifier quand tu auras le temps et que tu maîtriseras la bête.
C'est pas faux.
En tout cas encore MERCI Big Grin