Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.2.1
#~ Url du site :
#~ Hébergeur / Soft : perso
#~ Informations Système :
#~ site pas en ligne
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~
Bonjour a tous,
je suis nouveau sur ce forum ainsi que dans l'utilisation du CMS MadeSimple.
J'ai fait mon gabarit template + css, ca marche impec.
Par contre pour le menu, j'aimerai comprendre comment ca marche exactement.
Aujourd'hui en html j'ai mon code qui est comme ca :
Code :
[== HTML ==]
<nav>
<ul class="sf-menu">
<li class="item1 active"><a href="#">Accueil</a></li>
<li class="item5"><a href="#">Activités</a></li>
<li class="item6"><a href="#">Facebook</a></li>
<li class="item7"><a href="#">Contact</a></li>
</ul>
</nav>
Il y a plusieurs class car j'ai différent image bouton. Il s'agit d'un simple menu horizontal.
Concrètement, comment je dois procéder pour faire mon menu avec MadeSimple ?
Merci par avance.
Bonjour Flibouk, bienvenue sur le forum
Prenons le sujet par le bon bout. Tu as une image associée à chaque entrées du menu donc à chaque pages.
Est-ce que l'association est manuelle (telle image pour telle page) ou est elle automatisable (une page nommée "toto" sera toujours associée à une image nommée ./uploads/images/toto.png)
La seconde solution est plus simple a gérer et plus rapide en terme d’exécution car le système n'aura pas à devoir se souvenir de l'url d'image pour telle et telle page.
Prenons comme référence l'alias de la page, c'est un nom unique, donc aucun risque d'avoir 2 pages pointant vers une même image.
Ton menu affiché :
- Accueil
- Prenez Contact
- A propos
Tes alias de page :
- accueil
- contact
- about
Tes images :
- /uploads/images/accueil.png
- /uploads/images/contact.png
- /uploads/images/about.png
Imaginons un template de menu ultra simple : je ne gère que les pages de type contenu et que sur un seul niveau. Il faudra évidement extrapoler avec tes propres utilisations et pas utiliser mon code tel quel !!
Citation :<ul>
{foreach from=$nodelist item=node}
<li>Alias : {$node->alias}, Text du lien : <a href="{$node->url}">{$node->menutext}</a></li>
{/foreach}
</ul>
Ce que je vais faire c'est ajouter une classe à lien qui affichera une image bidon nommée /uploads/image/bidon.png
Citation :<ul>
{foreach from=$nodelist item=node}
<li>Alias : {$node->alias}, Text du lien : <a class='bidon' href="{$node->url}">{$node->menutext}</a></li>
{/foreach}
</ul>
et mon CSS :
Citation :a.bidon{
background: url([[root_url]]/uploads/images/bidon.png) no-repeat top left transparent;
}
Là j'ai tous mes menus avec une image standardisée. Maintenant je vais surcharger lien par lien selon son alias
Citation :<ul>
{foreach from=$nodelist item=node}
<li>Alias : {$node->alias}, Text du lien : <a class='bidon' href="{$node->url}" style="background-image:url({root_url}/uploads/images/{$node->alias}.png)">{$node->menutext}</a></li>
{/foreach}
</ul>
et là toutes les images sont surchargées en CSS directement node par node. Reste qu'il faut gérer là ou je n'ai pas encore d'image...
La suite tout de suite
Tester si l'image existe. En Php c'est
if (file_exists($root_path.'/uplaods/images/'.$node->alias.'png'))
L'équivalent Smarty c'est donc
{if file_exists($root_path.'/uplaods/images/'.$node->alias.'png')}
Allez hop !
Citation :<ul>
{foreach from=$nodelist item=node}
<li>Alias : {$node->alias}, Text du lien : <a class='bidon' href="{$node->url}"
{if file_exists($root_path.'/uplaods/images/'.$node->alias.'png')}style="background-image:url({root_url}/uploads/images/{$node->alias}.png)"{/if}>{$node->menutext}</a></li>
{/foreach}
</ul>
et voilà fin de l'histoire, c'est automatique, ca trouve une image correspondante ou celle par défaut dans tous les cas
Ok j'ai compris le principe.
Merci beaucoup ! enfin surtout a BESS
une fois que t'as testé avec succès oublie pas [Résolu] dans le titre de ce topic
