Barre de Navigation Menu "Intelligent"

[soul.eater]

Bonjour,

Je viens en ce jour faire appel auprès de vos compétences et de vos esprits éclairés après de multiples recherches sans solutions.

Mon désir est d'avoir un menu qui est d'une apparence différente lorsque l'on navigue sur la page qui lui est lié.

Pour que ma demande soit un peu plus explicite voici des exemples :

• Lorsque je navigue sur le Forum le menu est en blanc (au lieu de noir quand je ne suis pas dessus) (visuel ci-dessous)



• Lorsque je navigue sur la liste des membres le menu est en blanc (au lieu de noir quand je ne suis pas dessus) (visuel ci-dessous)



Merci beaucoup d'avance pour vos retours éventuels à ce sujet.

Cordialement,

Jonas

[stefou]

Bonjour,
Ton idée m'a inspiré   
Il y a peut-être un autre moyen plus simple de le faire mais j'ai imaginé ceci:

Si c'est pour le forum renseigné dans ton profil, ce code correspond pour tes boutons menu "forum" et "calendrier"
Créer un javascript (coché pour toute les pages)

Code:

$(function() {
/*Condition, vérifie la page en cours*/
if(document.location.pathname=="/")
{
$("a.mainmenu[href='/']").addClass("memomenu");/*si la condition est réunie, ajout d'une class au menu concerné*/
}
/*Condition, vérifie la page en cours*/
    if(document.location.pathname=="/calendar")
{
$("a.mainmenu[href='/calendar']").addClass("memomenu");/*si la condition est réunie, ajout d'une class au menu concerné*/
}
});

il suffit de répéter le code pour les autres boutons de menu en modifiant bien sure les paramètres
Voici par exemple pour appliquer au bouton du menu "chercher"

Code:

/*vérifie la page en cours*/
    if(document.location.pathname=="/search")
{
$("a.mainmenu[href='/search']").addClass("memomenu");/*ajout d'une class au menu concerné*/
}

Par la suite il suffi de demandé dans le css (feuille de style) ce que on veut en faire.
Dans le cas du forum renseigné dans ton profil, puisqu'il s'agit d'une image:

Code:

.memomenu img{height:55px!important;}

Pour le cas de ta demande (image sur fond blanc)

Code:

.memomenu{background-image:url("adresse de ton image") !important;}

Voilà j'espère avoir été clair dans mes explications  

[soul.eater]

Bonjour Stefou,

Tout d'abord je tiens à vous remercier énormément pour votre aide auprès de ma demande farfelu   . J'ai bien appliqué le Javascript mais je n'arrive pas à produire le résultat que je souhaite par le css.   

Petites explications de la partie qui bloque et de ce que je désir par deux approches différentes (j'ai besoin d'un exemple de code réalisé  ) :

• Le menu Forum a pour image un texte avec un fond transparent, attribution d'un fond gris (cadre rempli) par le css lorsque l'on navigue sur une autre page, attribution d'un fond blanc (cadre rempli) par le css lorsque l'on navigue dessus.

• Le menu Forum a pour image un texte avec un fond gris, lorsque je navigue dessus celle-ci est remplacé par une image avec le texte sur fond blanc.

J''espère ne pas abuser de votre gentillesse, c'est déja super cool de votre part de vous être impliqué sur ma demande.

Cordialement,

Jonas

[stefou]

Bonjour Stefou,

....
...

J''espère ne pas abuser de votre gentillesse, c'est déja super cool de votre part de vous être impliqué sur ma demande.

Cordialement,

Jonas

Il n'y a pas de souci, j'apprends tous les jours en voulant aider... donc c'est presque moi qui devrait dire merci   

Il s'agit du forum renseigné dans ton profil ou d'un autre ? Aurais tu un lien du forum en question que je puisse voir

[stefou]

J'ai installé le code sur mon forum, images des différents menu sur fond transparent (dans le css et pas dans la P.A) et via le css je lui attribue une couleur de fond et un effet au survol.
avec le code cité plus haut, le css attribue une couleur de fond différente avec la class ".memomenu" du menu correspondant à la page courante.

Je pense que c'est ce résultat là que tu souhaites ?

[soul.eater]

Oui il s'agit du forum renseigné dans mon profil http://les-sauveurs.forumactif.fr/ (désactivez Adblock pour avoir le bon visuel).

C'est effectivement le résultat que je recherche, j'ai tenté d'appliquer un cadre de couleur par le css sur une image de menu avec du texte sur fond transparent, il n'apparaissait pas derrière l'image mais en dessous et sans conserver sa taille attribuée.  

[stefou]

Tu dois commencer par créer tes images sur fond transparent car celle que tu utilises sont sur un fond noir


Edit: vu que tu souhaites utiliser du texte tu n'est même pas obligé de créer des images mais tout simplement les retirer et faire apparaitre du texte.

[soul.eater]

Tu dois commencer par créer tes images sur fond transparent car celle que tu utilises sont sur un fond noir

Oui je sais, c'est une barre de navigation temporaire que j'ai mis en place en attendant de trouver une solution à mon schmilblick.   

[stefou]

temps qu'elle sera en place, on ne sera pas tester

[soul.eater]

J'ai mis en place un menu forum pour le besoin du test, lien de l'image avec le texte blanc sur fond transparent http://www.noelshack.com/2014-19-1399806464-menuforum.png.

L'image a pour dimension 65px de largeur et 25px de hauteur, visuel sur le forum :

[stefou]

J'ai vu, et testé, ca fonctionne...
y juste un peu d'ordre à mettre dans les margins de ton menu   
pour le teste crée le javascrit suivant activé pour toutes les pages.

Code:

$(function() {
if(document.location.pathname=="/")
{
$("a.mainmenu[href='/']").addClass("memomenu");
}});

Et dans le css avec ce code chaque fois que tu sera sur la page index il sera sur fond rouge.

Code:

.memomenu{background-color:red;}

Tu peux également mettre un effet de survol sur les menus

Code:

.mainmenu:hover{background-color:red;}

[soul.eater]

 Voici le résultat lors de la mise en place :



J'ai un problème de décalage comme lors de mes précèdents essais et le fond ne fais pas la bonne dimension.

Pour éviter les problèmes de marge j'ai mis rapidement des images transparentes de la même dimension (65x 25px) pour les autres menus.

J'ai essayé aussi en utilisant directement le texte au lieu des images, c'était bien aligné mais limité à la zone du texte alors que mon désir est d'avoir un cadre plus grand ou le texte est aligné au milieu verticalement et horizontalement (sans résultats malgrès de nombreuses tentatives de l'agrandir par le css).

[stefou]

Doit y avoir du ménage à faire dans ton css   

Avec ceci ca ira

Code:

a.mainmenu {
    padding-top: 9px;
}

Désolé, j'ai editer le code pour qu'il s'applique a toutes tes images du menu

[stefou]

Pour le fond gris tu peux aussi utiliser un code pour tous car je vois que tu le fais un par un.

Code:

.mainmenu{background-color:grey;}

[soul.eater]

Merci énormément ça fonctionne parfaitement   , je n'ai plus qu'à améliorer l'esthétique de mes images et à peaufiner le tout.  

Pour mon CSS il doit y avoir effectivement beaucoup de ménage à faire, j'aime bien bidouiller sur ce forum que j'essaie de réaliser au maximum de mes propres mains (sauf en cas d'extrême besoin quand ça sort de mes capacités) et c'est un beau bordel dedans. 

Pour le coup d'œil d'un regard avisé et pour montrer mon foutoir   :

Code:

/* Avatar du membre dernier post */
.mini_ava {
  float: left;
}
.mini_ava img {
  width: 45px;
  valign: middle;
  height: 45px;
  margin: 3 12px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
/* Editeur de Texte */
#sceditor_smilies {background-color: #222222}
.sceditor-container textarea {
color: white !important;
}
a.sceditor-button.hover {
  background-color: orange !important;
}
.sceditor-button.sceditor-button-date {
  display: none;
}
.sceditor-button.sceditor-button-time {
  display: none;
}
.sceditor-button.sceditor-button-pastetext {
  display: none;
}
.sceditor-button.sceditor-button-more {
  display: none;
}
.sceditor-button.sceditor-button-fahide {
  display: none;
}
/* Titre Catégories */
.cate_titre
{
  height: 25px;
  margin-top: 15px;
  margin-bottom: 10px;
  background-image: url(http://image.noelshack.com/fichiers/2014/19/1399694705-sans-titre-2.png);
  background-repeat: no-repeat;
  margin-left: -15px;
}
.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
height: 25px;
width: 200px;
margin-left: -5px;
  margin-right: auto;
  margin-top: -8px;
  margin-bottom: auto;
padding: 2px;
text-align: center;
}
.catetitre
{
color: white;
font-family: Sans Caption:400;
font-size: 15px;
}
/* Cadre Catégories */
.forumline1 { border: 5px solid #444444; margin-top: 5px; margin-bottom: 5px; border-radius: 8px }
td .row4 { border-bottom : 1px solid #444444; }
/* Bannière */
body {  
background-repeat: no-repeat;
}
#i_logo { margin-top: 300px!important; }
.gensmall { font-size: 14px; }
/* Liens */
a:link { text-decoration: none; }
a:hover { text-decoration: none!important; }
/* Panneau Coulissant */
#widget-arrows {
  height: 13px;
}
.widget-arrow {
  height: 13px;
  width: 16px;
  border-radius: 4px;
  float: left;
  cursor: pointer;
  background: #f5ebf7 url(http://img11.hostingpics.net/pics/4355271374250413zvqms1.png) no-repeat 0 -13px;
}
.widget-arrow.isright {
  float: right;
}
.widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
  background-position: 0 0;
}
/* Barre d entete */
#social { float:left; }
#social { margin-left: -240px; }
#social { margin-top:-360px;}
.memomenu #i_icon_mini_index{background-color:#222222;}
.memomenu2 #i_icon_mini_calendar{background-color:#222222;}
.mainmenu{background-color:#444444;}
a.mainmenu {padding-top: 14px;}

Je place le sujet en résolu, encore milles mercis pour votre aide précieuse.

Cordialement,

Jonas