Fork me on GitHub






flaggada
Onglet actif en css?
#1
Régulier
Inscrit: 29/03/2007 17:04
Messages: 343
Bonjour

Voila je souhaiterai que l'onglet selectionné dans un menu (le menu dans le header de xoops.org par exemple) soit d'une autre couleur. Par exemple si on selectionne news, l'onglet blanchi se déplace sur news.

Comment faire?

Merci

Posté le : 26/04/2010 16:53

http://www.orthodontie-fr.com et pan dans les dents
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Nikita
Re: Onglet actif en css?
#2
Semi pro
Inscrit: 10/11/2004 13:40
Messages: 1659
Bonjour

je te montre comment j'ai fait dans mon thème mais pas vraiment avec des onglets

les menus dans theme.html
<table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tr align="center"> 
                  <td width="1" bgcolor="#6B6B6B"></td>
                  <td id="headmenu"><a href="<{$xoops_url}>/index.php" class="menuHead<{if $SCRIPT_NAME == "/index.php"}>_active<{/if}>">Accueil</a></td>
                  
                  <td width="1" bgcolor="#d7d7d7"></td>
                  <td id="headmenu"><a href="<{$xoops_url}>/modules/wfdownloads/" title="Téléchargements de logiciels" class="menuHead<{if $xoops_dirname == "wfdownloads"}>_active<{/if}>">Logiciels</a></td>
                  
                  <td width="1" bgcolor="#d7d7d7"></td>
                  <td id="headmenu"><a href="<{$xoops_url}>/modules/video/" title="Vidéos-formations" class="menuHead<{if $xoops_dirname == "video"}>_active<{/if}>">Vidéos-Formations</a></td>
                  
                   <td width="1" bgcolor="#d7d7d7"></td>
                  <td id="headmenu"><a href="<{$xoops_url}>/modules/smartsection/" title="Fiches pratiques" class="menuHead<{if $xoops_dirname == "smartsection"}>_active<{/if}>">Fiches Pratiques</a></td>
                  
                  <td width="1" bgcolor="#d7d7d7"></td>
                  <td id="headmenu"><a href="<{$xoops_url}>/modules/wallpapers/" title="fonds d'écran et cartes virtuelles" class="menuHead<{if $xoops_dirname == "wallpapers"}>_active<{/if}>">Fonds d'écran & Cartes Virtuelles</a></td>
                  
                  <td width="1" bgcolor="#d7d7d7"></td>
                  <td id="headmenu"><a href="<{$xoops_url}>/modules/newbb" title="Forum" class="menuHead<{if $xoops_dirname == "newbb"}>_active<{/if}>">Forum</a></td>    
                        
                  <td width="1" bgcolor="#d7d7d7"></td>
                  <td id="headmenu"><a href="<{$xoops_url}>/comparateurprix.php" title="Trouver le meilleur prix, comparer produits informatiques, Téléphonie, ADSL, Jeux vidéo, Jouets, Livre, Musique, Film, Hifi, Photo, Vidéo, Electroménager, Sport, Loisirs" class="menuHead<{if $SCRIPT_NAME == "/comparateurprix.php"}>_active<{/if}>"><img src="<{$xoops_imageurl}>images/comparateurachat.gif" alt="Trouver le prix le plus bas, comparer avant d'acheter"></a></td>
</tr>
</table>


et pour le css
td#headmenu a
       { color: #ffffff; font-size: 11px; font-weight: bold; background-color: #7d3358; background-repeat: repeat; background-attachment: scroll; text-align: center; display: block; margin-top: 0; padding: 3px }
td#headmenu a:hover
     { color: #7d3358; text-decoration: none; background-color: #f0dce6 }
td#headmenusmall a
       { color: #f5c2bb; font-size: 10px; font-weight: bold; background-color: #7d3358; margin-top: 4px; margin-left: 15px }
td#headmenusmall a:hover
     { color: #ead6d4; font-size: 10px; text-decoration: none; background-color: #7d3358 }
td#headmenu a.menuHead
 { font-size: 11px }
td#headmenu a.menuHead_active { 
        background-color: #ffffff; 
        color: #232223;
        font-weight: bold;
        font-size: 12px;
        border-bottom: 1px dashed #232223;         
    }


je pense qu'avec cet exemple , tu pourras mettre ton menu comme tu le veux sur ton site

Posté le : 26/04/2010 17:24

PS : Toujours faire une sauvegarde des fichiers avant de les modifier !
-------------------------------------------
http://www.aideordi.com
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Onglet actif en css?
#3
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
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

Posté le : 26/04/2010 19:05

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
flaggada
Re: Onglet actif en css?
#4
Régulier
Inscrit: 29/03/2007 17:04
Messages: 343
Merci pour vos réponses, je m'y attèle de ce pas

Posté le : 26/04/2010 19:46

http://www.orthodontie-fr.com et pan dans les dents
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Onglet actif en css?
#5
Guest_
b'soir

C'est intéressant : il y aurait différentes méthodes ?

En fait si on regarde les deux pistes de Nikita et Kris sont très proches car elles reposent sur la même variable smarty $xoops_dirname... Dans le premier cas elle est appelée dans la barre de menu, dans le second elle encapsule le thème (comme c'est le cas pour tous les thèmes basés sur Morphogenesis).

Si quelqu'un connait un code simple pour mettre en évidence l'entrée de la barre de menu sans faire appel à $xoops_dirname, ce serait très intéressant aussi : il arrive parfois qu'un même module (exemple #news) serve à plusieurs rubriques du site.

Et dans ce cas impossible de recourir à la variable $xoops_dirname

Il y a alors cette solution trouvée par Equinox (si j'ai bien compris utiliser une correspondance style / url), mais ce n'est pas la panacée !

Posté le : 26/04/2010 22:43
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Onglet actif en css?
#6
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
Citation :

Burning a écrit:
il arrive parfois qu'un même module (exemple #news) serve à plusieurs rubriques du site.
Et dans ce cas impossible de recourir à la variable $xoops_dirname


Il suffit de créer (à moins qu'elle n'existe) une variable smarty t'indiquant la catégorie, donc quelque part tu ajouterais un "id" ou une "class" dir_name+cat_name avec peut-être un soupçon de "if" et "else"

@++

Posté le : 26/04/2010 23:42

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Onglet actif en css?
#7
Guest_
b'soir Kris,

Arf ! Maintenant que tu le dis, je me souviens avoir déjà fait un truc dans ce genre pour le module myDwonloads.

Par contre j'ai été bloqué pour faire de même pour le module Oledrion : la page produit est identique quelque soit la catégorie d'appartenance, et sans que cette dernière ne puisse être détectée lorsque la page produit est affichée.

Enfin pour quelqu'un qui maîtrise la programmation cela ne doit pas être sorcier.

... c'est pourquoi je suis encore à la recherche d'une formule magique. Mais où est passé le majax® du code

Posté le : 27/04/2010 00:10
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

64 Personne(s) en ligne (57 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 64 | Plus ...