[Résolu] bouton "actif" pour menu

Image Les demandes de personnalisation ne concernent que :
les headers , les boutons (fr) , icones de forum .

  • Publicité

[Résolu] bouton "actif" pour menu

Messagepar Mazeltof » Mar 6 Mar 2012 15:58

'jour a tous

je suis sur prosilver en local et je voudrai que les boutons d'un menu restent actifs lors de l'affichage d'une page.
par exemple, je suis sur la page FAQ du forum et j'aimerai que le bouton correspondant a la page affichee soit en surbrillance ,
Image
(idealement la meme que la surbrillance du rollhover, ici le bleu)

si c'est possible en CSS, quelqu'un peut m'expliquer svp ? merci
Avatar de l’utilisateur
Mazeltof

[-V.I.P-]
 
Messages: 71
Âge: 48 ans
Inscription: Mar 17 Jan 2012 16:54
Localisation: Arras

Re: bouton "actif" pour menu

Messagepar zach » Mar 6 Mar 2012 17:05

Salut

pour cela il faut faut forcement connaitre la page visitée, donc par php la fonction serait ceci dans includes/funtions.php :

Code: Tout sélectionner
if ($user->page['page_name'] == 'faq.'.$phpEx)
{
$css_menu_page = 'faqactive';
}
else if  ($user->page['page_name'] == 'ucp.'.$phpEx)
{
$css_menu_page = 'ucpactive';
}


et dans les variables template :

Code: Tout sélectionner
'CSS_MENU PAGE'         => $css_menu_page,


Dans le menu :
Code: Tout sélectionner
<span class="faq_{CSS_MENU PAGE}"></span><span class="ucp_{CSS_MENU PAGE}"></span>


Dans le css créer la class :
.faq_ avec un background normal et hover en sprite css genre :
Code: Tout sélectionner
.faq_ {background-image: url("{T_THEME_PATH}/images/faq.jpg");width: 41px;height: 20px;display:block;background-position:0px 0px;}
.faq_ :hover {background-image: url("{T_THEME_PATH}/images/faq.jpg");width: 41px;height: 20px;display:block;background-position:0px -20px;}

.faq_faqactive avec un background normal identique au hover
Code: Tout sélectionner
.faq_faqactive  {background-image: url("{T_THEME_PATH}/images/faq.jpg");width: 41px;height: 20px;display:block;background-position:0px -20px;}


exemples http://www.alsacreations.com/tuto/lire/ ... ition.html ceci tévitera de doubler les requetes liées aux images et d’accélérer le chargement de la page, et aussi d'éviter un leger tps de retard pour le chargement d'image au moment du hover ...

Mais magrès cette bonne approche, ce ne serait pas la mienne ... car les liens juste faits avec des images sont pas trés parlant pour google, donc il vaut mieux laisser du vrai texte, avec une image en fond plutot qu'un texte intégré ds l'image, donc se méfier de se genre de tuto qui sous pretexte de dire un truc vrai ne te dis pas aussi les inconvénients de l'exemple intégrant le texte, d'autant que quand tu vire le texte tu n'a plus besoin de l'image complete, juste d'une ligne de repeat horizontal pour le dégradé bleu, donc chargement + rapide, et pas besoin d'utiliser une image par lien, mais 1 pour tous les liens ....

par exemple voila un menu qui saurait ou on est, qui économiserait des requêtes, et qui serait google friendly .... et ca ca n'existe "quasiment" sur aucun site
Avatar de l’utilisateur
zach

Support Phpbb Assistance
 
Messages: 1313
Inscription: Lun 27 Déc 2010 03:52

Re: bouton "actif" pour menu

Messagepar Mazeltof » Mar 6 Mar 2012 17:32

Salut Zach

merci, je vais tester ta solution, malgre tout, ce me sera sans doute utile pour comprendre le fonctionnement ...
cela dit, si j'ai bien compris il vaut mieux que je laisse tomber cette idee pour faire un menu avec un fond unique et les textes deja existant.
je vais me pencher sur la creation d'un tel menu et je reviendrai par ici quand je serai ok pour la mise en forme des boutons actifs :clin:

merci pour cette mise au point
Avatar de l’utilisateur
Mazeltof

[-V.I.P-]
 
Messages: 71
Âge: 48 ans
Inscription: Mar 17 Jan 2012 16:54
Localisation: Arras

Re: bouton "actif" pour menu

Messagepar zach » Mar 6 Mar 2012 20:42

Mazeltof a écrit:cela dit, si j'ai bien compris il vaut mieux que je laisse tomber cette idee pour faire un menu avec un fond unique et les textes deja existant.


1) Tu garde le script pour savoir sur quelle page tu est :

Dans includes/functions.php

chercher :
Code: Tout sélectionner
   header('Cache-Control: private, no-cache="set-cookie"');
   header('Expires: 0');
   header('Pragma: no-cache');


ajouter après :
Code: Tout sélectionner
//Menu actif
if ($user->page['page_name'] == 'faq.'.$phpEx)
{
$css_menu_page = 'faqactive';
}
else if  ($user->page['page_name'] == 'ucp.'.$phpEx)
{
$css_menu_page = 'ucpactive';
}
//Menu actif


nb : à développer avec toutes tes pages selon cette logique

Chercher :
Code: Tout sélectionner
'S_TOPIC_ID'         => $topic_id,


ajouter après :
Code: Tout sélectionner
'CSS_MENU PAGE'         => $css_menu_page,


2) créer tes boutons de menus :

ça n'a rien de révolutionnaire, tu repart du lien de base :
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

par exemple tu fait :
Code: Tout sélectionner
<a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span class="faq_{CSS_MENU PAGE}">{L_FAQ}</span></a>


.faq_ avec un background normal et hover en sprite css genre :
Code: Tout sélectionner
.faq_ {background-image: url("{T_THEME_PATH}/images/faq.jpg");width: 41px;height: 20px;display:block;background-position:0px 0px;}
.faq_ :hover {background-image: url("{T_THEME_PATH}/images/faq.jpg");width: 41px;height: 20px;display:block;background-position:0px -20px;}


.faq_faqactive avec un background normal identique au hover
Code: Tout sélectionner
.faq_faqactive  {background-image: url("{T_THEME_PATH}/images/faq.jpg");width: 41px;height: 20px;display:block;background-position:0px -20px;}


nb : l'image contient juste le bouton (pas le texte), donc avec {L_FAQ} tu a bien ton texte
Avatar de l’utilisateur
zach

Support Phpbb Assistance
 
Messages: 1313
Inscription: Lun 27 Déc 2010 03:52

Re: bouton "actif" pour menu

Messagepar Mazeltof » Mar 1 Mai 2012 09:08

super, merci Zach

je vais tester ca sur le style que je viens de terminer, avec des boutons images ;)

j'ai ete moins rapide que toi (vu mon niveau c'est pas etonnant lol) mais je me suis fais un menu avec une image, de 5 px de large, en repeat horizontal. comme tu en a parles plus haut.

dans overall_header.html
Code: Tout sélectionner
<ul id="navmenu">
  <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><li><a href="{U_INDEX}" title="{L_INDEX}">{L_INDEX}</a></li>
  <li><a href="{U_PROFILE}" title="{L_PROFILE}">{L_PROFILE}</a></li>
  <!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}" title="{PRIVATE_MESSAGE_INFO}">{PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
  <!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}" title="{L_SEARCH_SELF}">{L_SEARCH_SELF}</a></li><!-- ENDIF -->
  <!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}" title="{L_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF --><!-- ENDIF -->
  <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
  <!-- IF not S_IS_BOT --><!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
  <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li><a href="{U_REGISTER}" title="{L_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
  <li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li><!-- ENDIF -->
</ul>


navmenu.css
Code: Tout sélectionner
#navmenu { 
   width: 100%;
   height: 31px;
   font-family: Arial, Verdana, Helvetica, sans-serif;
   background: url("{T_THEME_PATH}/images/bg_navmenu.png") repeat-x left top;
}

#navmenu li {
   display: inline-block;
   float: left
}
   
#navmenu li a { 
   background: url("{T_THEME_PATH}/images/bg_navmenu.png") repeat-x;
   color: #cccccc;
   font-size: 13px;
   font-weight: bold;
   display: block;
   padding: 7px 12px 7px;
   float: left;
}

#navmenu li a:hover, #navmenu li a:focus, #navmenu li a:active {
   background-image: url("{T_THEME_PATH}/images/bg_navmenu.png") repeat-x;
   background-position: bottom;
   color: #ffffff;
   font-weight: bold;
   text-decoration: none;
}


edit du 06 Avril 2012

finalement je crois que je vais laisser tomber (au moins pour l'instant) cela m'aura aide a comprendre le fonctionnement et plus encore ;)
merci pour l'aide apporter :clin:
Avatar de l’utilisateur
Mazeltof

[-V.I.P-]
 
Messages: 71
Âge: 48 ans
Inscription: Mar 17 Jan 2012 16:54
Localisation: Arras


Retourner vers Demande de personnalisation de style

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Membre(s) actuellement connecté(s)

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité