bouton "actif" pour menu

Message par **Mazeltof** » mar. 6 mars 2012 14: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 ,

(idealement la meme que la surbrillance du rollhover, ici le bleu)

si c'est possible en CSS, quelqu'un peut m'expliquer svp ? merci

Message par **zach** » mar. 6 mars 2012 16: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

Message par **Mazeltof** » mar. 6 mars 2012 16: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

merci pour cette mise au point

Message par **zach** » mar. 6 mars 2012 19: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

Message par **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

Forum PhpBB-Assistance