Fork me on GitHub






olico
Menu CSS ciblage des onglets
#1
Aspirant
Inscrit: 29/11/2004 16:13
Messages: 79
Bonjour,
je suis actuellement en train de faire une adaptation personnalisée de morphogenesis et je cherche pour peaufiner le tout à faire un menu à onglet comme celui de frxoops.org.

j'ai déjà utilisé le système des "portes coulissantes" en css pour les onglets.
ultra-fluide
Mais je n'arrive pas à trouver la solution (qui doit pourtant être assez simple) pour obtenir le ciblage des onglets comme c'est le cas dans le nouveau thème de frxoops.org.

Comment faire en sorte que l'onglet soit en position "hover" lorsque la rubrique qui lui correspond est chargée dans la page principale?

Pourriez-vous me donner la piste à suivre pour que je puisse réaliser cela?

Merci à toute l'équipe pour votre attention et de vôtre dynamisme.
--
olico

Posté le : 30/08/2009 11:17

--
olico
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Menu CSS ciblage des onglets
#2
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
Bonjour,

Fais une recherche sur le site avec les mots clés : onglets courants
Je pense que tu devrais trouver une de mes réponses sur ce sujet

@++

Posté le : 30/08/2009 11:34

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
olico
Re: Menu CSS ciblage des onglets
#3
Aspirant
Inscrit: 29/11/2004 16:13
Messages: 79
Désolé il n'y a aucune réponse à ce sujet.
--
olico

Posté le : 30/08/2009 11:38

--
olico
Partager Twitter Partagez cette article sur GG+
Rapport Haut
MusS
Re: Menu CSS ciblage des onglets
#4
Semi pro
Inscrit: 13/12/2004 11:28
De Lyon
Messages: 1364
Salut,

Tu peux utiliser ce code qui est d'ailleurs celui de ce thème :

<ul class="nav">
    <li> <{php}> if ( '/index.php' == $_SERVER["PHP_SELF"] ) { echo 
    '<a href="'.XOOPS_URL.'" class="hover" accesskey="a" title="Accueil">Accueil</a>'; 
    } else { echo '<a href="'.XOOPS_URL.'" accesskey="a" title="Accueil">Accueil</a>'; 
    } <{/php}> </li>
  
    <li> <{php}> if (eregi ('/modules/news/',$_SERVER['REQUEST_URI'])) { echo 
    '<a href="'.XOOPS_URL.'/modules/news/" class="hover" accesskey="n" title="Articles">Articles</a>'; 
    } else { echo '<a href="'.XOOPS_URL.'/modules/news/" accesskey="n" title="Articles">Articles</a>'; 
    } <{/php}> </li>
  
    <li> <{php}> if (eregi ('/modules/newbb/',$_SERVER['REQUEST_URI'])) { echo 
    '<a href="'.XOOPS_URL.'/modules/newbb/" class="hover" accesskey="s" title="Forums">Forums</a>'; 
    } else { echo '<a href="'.XOOPS_URL.'/modules/newbb/" accesskey="s" title="Forums">Forums</a>'; 
    } <{/php}> </li>    
    
    <li> <{php}> if (eregi ('/modules/mydownloads/',$_SERVER['REQUEST_URI'])) { echo 
    '<a href="'.XOOPS_URL.'/modules/mydownloads/" class="hover" accesskey="r" title="Modules">Modules</a>'; 
    } else { echo '<a href="'.XOOPS_URL.'/modules/mydownloads/" accesskey="r" title="Modules">Modules</a>'; 
    } <{/php}> </li>
  
    <li> <{php}> if (eregi ('/modules/extgallery/',$_SERVER['REQUEST_URI'])) { echo 
    '<a href="'.XOOPS_URL.'/modules/extgallery/" class="hover" accesskey="t" title="Themes">Themes</a>'; 
    } else { echo '<a href="'.XOOPS_URL.'/modules/extgallery/" accesskey="t" title="Themes">Themes</a>'; 
    } <{/php}> </li>

    <li> <{php}> if (eregi ('/modules/documentations/',$_SERVER['REQUEST_URI'])) { echo 
    '<a href="'.XOOPS_URL.'/modules/documentations/" class="hover" accesskey="t" title="Documentations">Docs.</a>'; 
    } else { echo '<a href="'.XOOPS_URL.'/modules/documentations/" accesskey="t" title="Documentations">Docs.</a>'; 
    } <{/php}> </li>                            
</ul>


@+

Posté le : 30/08/2009 11:43
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Menu CSS ciblage des onglets
#5
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
Si tu utilises un thème récent, tu as dans le fichier theme.html ceci :
<body id="<{$xoops_dirname}>" class="<{$xoops_langcode}>">

donc en css, tu peux faire celà par exemple :
/* Pour le menu horizontal du header */
#menuBar { margin: 0 0px; height: 30px; line-height: 30px; background: url("img/back_navi2.gif") no-repeat center bottom; clear: both; text-align: center; position: relative; width: 630px; voice-family: ""}""; voice-family:inherit; width: 630px; }    
html>body #menuBar { width:630px;}
#menuBar a { background: transparent; border: none; text-indent: -9999px; overflow: hidden; }
/* lien normal */
#menuBar .navi1 a{width: 90px;height: 30px; float: left; left: 0px; }
#menuBar .navi2 a{width: 90px;height: 30px; float: left; left: 90px; }
#menuBar .navi3 a{width: 90px;height: 30px; float: left; left: 180px; }
#menuBar .navi4 a{width: 90px;height: 30px; float: left; left: 270px; }
#menuBar .navi5 a{width: 90px;height: 30px; float: left; left: 360px; }
#menuBar .navi6 a{width: 90px;height: 30px; float: left; left: 450px; }
#menuBar .navi7 a{width: 90px;height: 30px; float: left; left: 540px; }
/* lien hover */
#menuBar .navi1 a:hover {background: url("img/back_navi2.gif") no-repeat 5px 0px;}
#menuBar .navi2 a:hover {background: url("img/back_navi2.gif") no-repeat -85px 0px;}
#menuBar .navi3 a:hover {background: url("img/back_navi2.gif") no-repeat -175px 0px;}
#menuBar .navi4 a:hover {background: url("img/back_navi2.gif") no-repeat -265px 0px;}
#menuBar .navi5 a:hover {background: url("img/back_navi2.gif") no-repeat -355px 0px;}
#menuBar .navi6 a:hover {background: url("img/back_navi2.gif") no-repeat -445px 0px;}
#menuBar .navi7 a:hover {background: url("img/back_navi2.gif") no-repeat -535px 0px;}
/* lien active */
body#xhld0 .navi1 a {background: url("img/back_navi2.gif") no-repeat 5px -30px;}
body#smartmedia .navi2 a {background: url("img/back_navi2.gif") no-repeat -85px -30px;}
body#mylinks .navi3 a {background: url("img/back_navi2.gif") no-repeat -175px -30px;}
body#mydownloads .navi4 a {background: url("img/back_navi2.gif") no-repeat -265px -30px;}
body#rmmf .navi5 a {background: url("img/back_navi2.gif") no-repeat -355px -30px;}
body#smartpartner .navi6 a {background: url("img/back_navi2.gif") no-repeat -445px -30px;}
body#sitemap .navi7 a {background: url("img/back_navi2.gif") no-repeat -535px -30px;}

Plus simple que mettre du php ou javascript dans le fichier theme

@++

Posté le : 30/08/2009 20:32

La connaissance s'accroît quand on la partage ...
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

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