Définir une classe supplémentaire dans votre navigation (menu) - Version imprimable
+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Définir une classe supplémentaire dans votre navigation (menu) (/thread-443.html)
+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Définir une classe supplémentaire dans votre navigation (menu) (/thread-443.html)
Définir une classe supplémentaire dans votre navigation (menu) - Jean le Chauve - 02/06/2010
En réponse à une demande postée sur le forum .org
Ceci pourrait être utile si vous souhaitez appliquer des propriétés css dans la navigation.
Exemple pour un menu avec une couleur différente pour chaque onglet :
![[Image: pre_maquette_1.png]](http://www.menus-cmsms-madesimple.be/uploads/images/externe_forum_cmsms/pre_maquette_1.png)
Allez dans le gabarit de votre menu, ici : cssmenu_ulshadow.tpl
Code :
...
{elseif $node->index > 0}</li>
{/if}
// Ajoutez cette ligne
{if $node->depth==1 and $node->haschildren == false}<li class="menu{$node->hierarchy}"><a
// et modifiez le if suivant par elseif
{elseif $node->parent == true or ($node->current == true and $node->haschildren == true)}
//Ajoutez menu{$node->hierarchy} dans la classe
<li class="menuactive menuparent menu{$node->hierarchy}">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
//idem et c'est fini
<li class="menuparent menu{$node->hierarchy}">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span> {elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />
{else}
<li>
<a {/if}
....menu1 {color:black;}
.menu2 {color:yellow;}
etc.
ATTENTION, n'oubliez pas de laisser une espace après chaque "<a", sinon vos liens seront
interprétés ainsi : <ahref au lieu de <a href.
Have fun
Définir une classe supplémentaire dans votre navigation (menu) - bess - 02/06/2010
très bon, par contre ton image png est sur ton disque dur mon grand
Définir une classe supplémentaire dans votre navigation (menu) - Jean le Chauve - 02/06/2010
Oups, corrigé
Définir une classe supplémentaire dans votre navigation (menu) - St. George B - 09/06/2010
'lut jean le chauve,
J'ai trouvé très intéressant ce post sur les menus colorés, j'ai donc voulu essayé ça mais je n'arrive pas au résulta escompté.
Je pense que je flanche au niveau de la modif dans la feuille de styles, je ne sais pas vraiment comment insérer les nouvelles données :
.menu1 {color:black;}
.menu2 {color:yellow;}
En même temps, j'vous avouerais que j'suis loin d'être un expert en CSS.
Il y aurait il donc une âme charitable pour éclairer ma lanterne ?
Je remercie d'avance la communauté qui contribue au développement de CMSMS et a cette liberté d'indépendance qui nous est cher.
Définir une classe supplémentaire dans votre navigation (menu) - Jean le Chauve - 09/06/2010
Bin, tu places
.menu1 {color:celleQueTuVeux}
.menu2 {color:autreCouleur;}
etc.
dans la feuille de style de ton gabarit.
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html#part_13663
Définir une classe supplémentaire dans votre navigation (menu) - Jean le Chauve - 09/06/2010
Attention, le projet http://www.gabbaresista.fr/CAC/ n'est pas valide xtml (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.gabbaresista.fr%2FCAC%2F), et donc, tu dois d'abord le valider avant de te préoccuper du design, sinon, tu en as pour des années
Regarde ton site sous Google chrome ou IE, tu vas pleurer.
Définir une classe supplémentaire dans votre navigation (menu) - St. George B - 09/06/2010
Merci pour ta réactivité !
J'ai intégré basiquement à ma feuille de style :
.menu1 {color:#ffffff;}
.menu2 {color:#C03000;}
.menu3 {color:#eed740;}
.menu4 {color:#FF358B;}
Mais je suppose que ce n(est pas comme ça qu'il faux s'y prendre.
Peux tu me dire plus précisément ou dois-je mettre ce p'tit bout de code STP ?
Je suis bien conscient que de me mâcher le travail n'est pas la vocation du forum,
Mais là je patine dans semoule.
Merci !!!
Code :
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
.menu1 {color:#ffffff;}
.menu2 {color:#C03000;}
.menu3 {color:#eed740;}
.menu4 {color:#FF358B;}
#menu_vert {
margin-left: 1px;
font-size:1.1em;
background-color:#000;
margin-right: 0px;
border-right:#000 1px solid;
}
/* The wrapper clears the floating elements of the menu */
/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background-color: #000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
width: 99%;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 200px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin-left:0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
display: block;
margin: 0px;
padding: 9px;
text-decoration: none;
color: #ffffff;
}
#primary-nav li a {
border-left: 1px solid #86c0ff;
}
#primary-nav li li a {
border: 1px solid #86c0ff;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #000000;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #ff8c33;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #6198c7;
}
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}@charset "UTF-8";
/* CSS Document */Définir une classe supplémentaire dans votre navigation (menu) - Jean le Chauve - 09/06/2010
Écris plutôt #primary-nav li.menu1 au lieu de .menu1. et place ces propriétés en fin de la css et pas au début. Il y a des priorités dans les css : # est prioritaire par rapport à .
Définir une classe supplémentaire dans votre navigation (menu) - St. George B - 09/06/2010
J'ai mis ma feuille de style dans mon précédent post
Et le projet en cours est à : http://www.gabbaresista.fr/CAC/
En fait, je souhaiterai que mon menu ressemble à celui qui se trouve tout en haut de la bannierede mon site.
Définir une classe supplémentaire dans votre navigation (menu) - Jean le Chauve - 09/06/2010
J'ai modifié le post précédent, les propriétés sont prises en compte, mais il faut que tu écrives plutôt #primary-nav li.menu1 au lieu de .menu1. et que tu places ces propriétés en fin de la css et pas au début. Il y a des priorités dans les css : # est prioritaire par rapport à .
Définir une classe supplémentaire dans votre navigation (menu) - Jean le Chauve - 09/06/2010
Pour ton cas, écris #primary-nav li.menu1 a {color:taCouleur;}
C'est toi qui a fait les affiches ?
Définir une classe supplémentaire dans votre navigation (menu) - Jean le Chauve - 09/06/2010
Ah, ça marche
Définir une classe supplémentaire dans votre navigation (menu) - St. George B - 09/06/2010
Super Merci pour ton aide Jean le Chauve,
Ça fonctionne parfaitement.
J'vais donc maintenant pouvoir aller me coucher serein grâce à ta contribution.
ThanXxXx !!!