| Re: Onglet actif en css? |
Titre du sujet : Re: Onglet actif en css?
par Kris sur 26/04/2010 19:05:48
Bonjour,
sur http://labs.xoofoo.org
le html :
<ul id="xo-globalnav" class="x2-nl x2-navigation">
<!-- menu en mode anonyme -->
<li class="x2-label">Navigation :</li>
<li id="module0"><a href="<{xoAppUrl /}>" accesskey="a" title="Accueil">Accueil</a></li>
<{if !$xoops_isuser}>
<li id="module1"><a href="<{xoAppUrl modules/news/}>" class="linkthumb" accesskey="" title="Articles">Articles</a></li>
<li id="module3"><a href="<{xoAppUrl modules/wiwimod/}>" class="linkthumb" accesskey="w" title="Le Wiki">Wiki</a></li>
<li id="module2"><a href="<{xoAppUrl modules/smartfaq/}>" class="linkthumb" accesskey="q" title="La Foire aux Questions">FAQ</a></li>
<li id="module5"><a href="<{xoAppUrl modules/newbb/}>" class="linkthumb" accesskey="f" title="Forum XooFoo">Forum</a></li>
<li id="module4"><a href="<{xoAppUrl modules/mylinks/}>" class="linkthumb" accesskey="r" title="Les Ressources à parcourir">Ressources</a></li>
<{else}>
<!-- menu en mode enregistré -->
<li id="module1"><a href="<{xoAppUrl modules/news/}>" class="linkthumb" accesskey="n" title="Les Articles">Articles</a></li>
<li id="module3"><a href="<{xoAppUrl modules/wiwimod/}>" class="linkthumb" accesskey="w" title="Le Wiki">Wiki</a></li>
<li id="module2"><a href="<{xoAppUrl modules/smartfaq/}>" class="linkthumb" accesskey="q" title="La Foire aux Questions">FAQ</a></li>
<li id="module5"><a href="<{xoAppUrl modules/newbb/}>" class="linkthumb" accesskey="f" title="Forum XooFoo">Forum</a></li>
<li id="module4"><a href="<{xoAppUrl modules/mylinks/}>" class="linkthumb" accesskey="r" title="Les Ressources à parcourir">Ressources</a></li>
<li id="module6"><a href="<{xoAppUrl modules/wfdownloads/}>" class="linkthumb" accesskey="o" title="Les Outils à télécharger">Outils</a></li>
<{if $xoops_isadmin}>
<!-- lien supplémentaire si je suis administrateur -->
<li id="module7"><a href="<{xoAppUrl modules/xoopscare/}>" class="linkthumb" accesskey="x" title="Xoops Care">Xoops Care</a></li>
<{/if}>
<{/if}>
<li id="module9"><a href="<{xoAppUrl modules/planet/}>" class="linkthumb" accesskey="x" title="Lire la LabsSphère">LabsSphère</a></li>
<li id="module8"><a href="<{xoAppUrl modules/contact/}>" class="linkthumb" accesskey="c" title="Contact">Contact</a></li>
</ul>
le css :
/*============= Style pour l'include globalnav.html ================*/
#xo-globalnav {
margin: 0 0 20px 0;
color: #ccc;
height: 20px;
background-color: inherit;
}
* html #xo-globalnav { height: 20px; }
#xo-globalnav .x2-label {
color: #696969;
background-color: inherit;
}
#xo-globalnav li {
margin: 0 5px;
display: inline;
list-style: none;
}
#xo-globalnav a {
color: #fff;
padding: 3px;
background-color: inherit;
}
#xo-globalnav #module0 a:hover, body#system #module0 a{
background-color: #696969;
padding: 3px;
color: #fff;
}
#xo-globalnav #module1 a:hover, body#news #module1 a{
background-color: #CE0D22;
padding: 3px;
color: #fff;
}
#xo-globalnav #module2 a:hover, body#smartfaq #module2 a{
background-color: #1ABC55;
padding: 3px;
color: #fff;
}
#xo-globalnav #module3 a:hover, body#wiwimod #module3 a {
background-color: #850BA5;
padding: 3px;
color: #fff;
}
#xo-globalnav #module4 a:hover, body#mylinks #module4 a {
background-color: #5373DC;
padding: 3px;
color: #fff;
}
#xo-globalnav #module5 a:hover, body#newbb #module5 a {
background-color: #C7CC0A;
padding: 3px;
color: #fff;
}
#xo-globalnav #module6 a:hover, body#news #protector a {
background-color: #E600A6;
padding: 3px;
color: #fff;
}
#xo-globalnav #module7 a:hover, body#xoopscare #module7 a {
background-color: #06CED5;
padding: 3px;
color: #fff;
}
#xo-globalnav #module8 a:hover, body#contact #module8 a{
background-color: #E6CF00;
padding: 3px;
color: #fff;
}
#xo-globalnav #module9 a:hover, body#contact #module8 a{
background-color: #ffa500;
padding: 3px;
color: #fff;
}
#xo-globalnav a:hover {}
dans mes thèmes récents j'ai du employer une autre méthode je crois, sinon j'en ai posté plusieurs sur ce forum ou/et celui de xoops.org
@+
ps : tu peux également regarder le code source et style css sur http://tutos.xoofoo.org
|
|
