Barre de Navigation Menu "Intelligent"

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Barre de Navigation Menu "Intelligent"

Message par soul.eater le Sam 10 Mai 2014 - 9:15

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


Dernière édition par soul.eater le Dim 11 Mai 2014 - 15:25, édité 1 fois

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par stefou le Sam 10 Mai 2014 - 13:36

Bonjour,
Ton idée m'a inspiré  Very Happy 
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  Very Happy

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par soul.eater le Sam 10 Mai 2014 - 20:27

Bonjour Stefou,

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

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é  ::moitimide::) :

• 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

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par stefou le Dim 11 Mai 2014 - 8:07

@soul.eater a écrit: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  Very Happy 

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

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par stefou le Dim 11 Mai 2014 - 8:19

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 ?

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par soul.eater le Dim 11 Mai 2014 - 12:49

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. Mince ::moitimide::

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par stefou le Dim 11 Mai 2014 - 12:54

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.

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par soul.eater le Dim 11 Mai 2014 - 12:58

@stefou a écrit: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.  ::moitimide:: 

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par stefou le Dim 11 Mai 2014 - 12:59

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

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par soul.eater le Dim 11 Mai 2014 - 13:11

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 :


soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par stefou le Dim 11 Mai 2014 - 13:24

J'ai vu, et testé, ca fonctionne...
y juste un peu d'ordre à mettre dans les margins de ton menu  Very Happy 
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;}

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par soul.eater le Dim 11 Mai 2014 - 13:56

reflexion 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).

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par stefou le Dim 11 Mai 2014 - 14:03

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

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

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par stefou le Dim 11 Mai 2014 - 14:38

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;}

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation Menu "Intelligent"

Message par soul.eater le Dim 11 Mai 2014 - 15:18

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

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. ::moitimide::

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

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

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum