Création de liens personnalisés dans la barre de navigation

2 participants

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

Résolu Création de liens personnalisés dans la barre de navigation

Message par Stéphane62880 Jeu 28 Avr 2022 - 17:26

Bonjour,

A la place de ces boutons la (première image jointe)

Je souhaite créer des boutons qui serais relié avec un lien vers différente parti du forum

Je souhaiterais les boutons comme ceux la (2e image jointe)

Est-ce possible ? si oui comment procédé ?
Fichiers joints
Création de liens personnalisés dans la barre de navigation Attachment
Boutons.png Vous n'avez pas la permission de télécharger les fichiers joints.(8 Ko) Téléchargé 9 fois
Création de liens personnalisés dans la barre de navigation Attachment
Boutons CIV.png Vous n'avez pas la permission de télécharger les fichiers joints.(26 Ko) Téléchargé 10 fois
Stéphane62880

Stéphane62880
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 28/04/2022

Voir le profil de l'utilisateur https://cis-vendin-le-vieil.forumactif.com/
Stéphane62880 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Création de liens personnalisés dans la barre de navigation

Message par Oka.mi Ven 29 Avr 2022 - 18:08

Bonjour,

.Création de liens personnalisés dans la barre de navigation Rx0Yinp.Afin de faciliter les recherches ultérieures, j'ai modifié le titre de ce sujet qui était "Création de boutons" en "Création de liens personnalisés dans la barre de navigation".

N'oubliez pas que d'autres personnes peuvent profiter de vos questions. Il est donc impératif afin de faciliter l'utilisation de l'outil de recherche d'avoir des titres de sujet explicatifs.

Pour ajouter des liens personnalisés dans la barre de navigation de votre forum, rendez-vous dans votre panneau d'administration, onglet Affichage > Page d'accueil > En-tête & Navigation.

Pour changer l'apparence des boutons, vous pouvez passer par votre feuille de style CSS.
Tuto La feuille de style CSS
Tuto Le CSS - Comment ça marche ?
https://developer.mozilla.org/fr/docs/Web/CSS/border-radius
https://developer.mozilla.org/fr/docs/Web/CSS/padding
https://developer.mozilla.org/fr/docs/Web/CSS/gradient/linear-gradient

Sur votre exemple, le lien actif reste dans un style spécifique (fond blanc). Pour cela, vous devrez passer par du JavaScript. Est-ce bien ce que vous souhaitez ?


Création de liens personnalisés dans la barre de navigation 1213Donnez un titre explicite Création de liens personnalisés dans la barre de navigation VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Création de liens personnalisés dans la barre de navigation 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Création de liens personnalisés dans la barre de navigation FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création de liens personnalisés dans la barre de navigation

Message par Stéphane62880 Ven 29 Avr 2022 - 22:57

Bonsoir,

Oui c'est bien cela.

Respectueusement.
Stéphane62880

Stéphane62880
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 28/04/2022

Voir le profil de l'utilisateur https://cis-vendin-le-vieil.forumactif.com/
Stéphane62880 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Création de liens personnalisés dans la barre de navigation

Message par Oka.mi Sam 30 Avr 2022 - 10:30

Bonjour,

D'accord, alors je vais partir du principe que vous avez pris le temps de parcourir les liens que je vous ai partagés, car c'est nécessaire pour que vous compreniez un minimum les modifications que je vais vous faire faire.

Nous allons commencer par ajouter du CSS personnalisé.
Une partie de ce CSS est destinée à apporter des propriétés nouvelles à un élément qui existe déjà, .navlinks li a.mainmenu, qui est le sélecteur des liens que nous visons (dans la barre de navigation).
Code:
.navlinks li a.mainmenu {
   background: linear-gradient(#bbb, #eee);
   padding: 7px;
   border-radius: 3px;
   border: 1px solid #ccc;
}
J'ai écrit pour vous quelques propriétés qui permettrait de se rapprocher du rendu souhaité, mais vous pouvez bien sûr régler ça par vous-même, changer la couleur, la taille des bordures, etc.
Tuto Nomination et couleurs

L'autre partie du CSS à ajouter consiste à créer une nouvelle classe (on va l'appeler "actif").
Cette classe :
- sera ajoutée et retirée dynamiquement par JavaScript en fonction de la page sur laquelle nous nous trouvons.
- permet donc d'ajouter et de retirer des propriétés CSS à un élément (ici, le lien actif et les liens non actifs).
Cela donne :
Code:
.actif {
   background: linear-gradient(#fff, #ddd) !important;
}

a.actif {
   color: #333;
}
Là aussi, vous pouvez modifier les propriétés comme vous le souhaitez.
a.actif vise plus précisément le lien <a>, ce qui permet d'écraser le css du a.mainmenu, qui donne une couleur bleue au lien alors que vous le voudriez en gris foncé (selon l'exemple).

Une fois ceci paramétré, rendez-vous dans Modules > HTML & JavaScript > Gestion des codes JavaScript, vérifiez que la gestion du JavaScript est bien activée :
Création de liens personnalisés dans la barre de navigation U1135310
Tuto Gestion des codes JavaScript
Ensuite, créez un nouveau JavaScript, cochez comme placement "sur toutes les pages", et collez ce code :
Code:
$(function(){
    $('.navlinks li a.mainmenu').each(function(){
        if ($(this).attr('href') == window.location.pathname + window.location.search) {
            $(this).addClass('actif');           
        } else {
            $(this).removeClass('actif');       
        }
    });
});
Explication du code :
$(function(){ indique au Script de s'exécuter après le chargement de la page (s'il s'exécute avant que les éléments ne soient chargés, cela ne fonctionnera pas).
$('.navlinks li a.mainmenu').each(function(){ on cible les liens de la barre de navigation (le ".navlinks li a.mainmenu" qu'on a utilisé dans votre CSS personnalisé) et on annonce que pour chacun de ces liens (parce qu'il y en a plusieurs)...
if ($(this).attr('href') == window.location.pathname + window.location.search) { on vérifie que l'adresse du lien correspond à l'adresse de la fenêtre où on se trouve,
$(this).addClass('actif'); et si la condition précédente est remplie (comprendre "si le lien vérifié = la page où on se trouve"), on ajoute la classe "actif" qui attribue les propriétés CSS spécifiées plus haut.
else {
$(this).removeClass('actif');
pour toute autre situation (si la condition n'est pas remplie), on retire la classe "actif" = les liens prennent leur apparence par défaut là aussi spécifiée plus haut dans le CSS ajouté.


Création de liens personnalisés dans la barre de navigation 1213Donnez un titre explicite Création de liens personnalisés dans la barre de navigation VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Création de liens personnalisés dans la barre de navigation 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Création de liens personnalisés dans la barre de navigation FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création de liens personnalisés dans la barre de navigation

Message par Stéphane62880 Sam 30 Avr 2022 - 17:08

Maintenant que j'ai fais mais boutons, j'aimerais en renommé comme "ACCUEIL" le renommer en "INDEX", désactivé le bouton ou il n'y a rien dedans.
Comment faire ?
je commence à comprend le fonctionnement
le CSS =apparence du forum
JavaScript = fonctionnalités
et le HTML c'est par exemple pour créer des formulaire dans le forum
Je me trompe ?
Stéphane62880

Stéphane62880
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 28/04/2022

Voir le profil de l'utilisateur https://cis-vendin-le-vieil.forumactif.com/
Stéphane62880 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Création de liens personnalisés dans la barre de navigation

Message par Oka.mi Jeu 5 Mai 2022 - 10:34

Bonjour,

Désolée pour le délai de réponse.

Stéphane62880 a écrit:le CSS =apparence du forum
JavaScript = fonctionnalités
et le HTML c'est par exemple pour créer des formulaire dans le forum
HTML : base structurelle d'une page web
Création de liens personnalisés dans la barre de navigation Image47
L'extrait qu'on voit sur cette capture d'écran de l'inspecteur (accessible via la touche F12), c'est le HTML qui définit votre bouton "Accueil", au milieu des autres éléments de la page.
On peut lire en passant qu'il a une class "mainmenu" et une class "actif", ajoutée via votre JavaScript.
C'est donc un lien (<a>) "mainmenu", contenu dans un <li> et un élément avec une class "navlinks", d'où le fait que dans le css, on le sélectionne par .navlinks li a.mainmenu.
CSS : comme vous l'avez compris, ça touche à l'apparence.
JavaScript : c'est un peu plus compliqué que ça, mais dans l'utilité qui vous concerne, il pourrait servir à effectuer des modifications CSS et HTML impossibles à effectuer par des moyens traditionnels, ou à, comme vous en parliez, créer des formulaires, puisqu'il s'agira d'envoyer et de traiter des données localement.

Stéphane62880 a écrit:j'aimerais en renommé comme "ACCUEIL" le renommer en "INDEX"
Donc, ici, nous allons employer du JavaScript. Il ne sera pas nécessaire d'en créer un nouveau, vous pouvez modifier celui déjà créé et ajouter après la première ligne $(function(){, ceci :
Code:
$('.navlinks li a.mainmenu[href="/"]').text("Index");
Ici nous avons modifié le texte de l'élément .navlinks li a.mainmenu ayant pour href (l'attribut qui détermine la destination du lien) "/". Le lien de votre forum + "/" ce qui revient à ce que renvoie le lien de votre forum. Selon le paramétrage par défaut, c'est votre page d'accueil, mais cela peut également être votre portail, ou une page HTML personnalisée (Affichage > Page d'accueil > Généralités).
Pour les autres liens dont vous souhaiterez modifier le texte, il suffira donc de récupérer le href de ces liens (vous pouvez faire l'exercice en inspectant vous-mêmes vos liens avec F12) et d'écrire des nouvelles lignes à la suite en changeant le texte voulu.

Stéphane62880 a écrit:désactivé le bouton ou il n'y a rien dedans.
Si vous parlez du bouton "Portail" et /ou "Calendrier", vous pouvez vous rendre dans votre panneau d'administration, onglet Modules. Vous y trouverez les deux, et le moyen de les désactiver.


Création de liens personnalisés dans la barre de navigation 1213Donnez un titre explicite Création de liens personnalisés dans la barre de navigation VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Création de liens personnalisés dans la barre de navigation 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Création de liens personnalisés dans la barre de navigation FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création de liens personnalisés dans la barre de navigation

Message par Stéphane62880 Jeu 5 Mai 2022 - 16:19

D'accord,

Merci beaucoup Wink
Stéphane62880

Stéphane62880
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 28/04/2022

Voir le profil de l'utilisateur https://cis-vendin-le-vieil.forumactif.com/
Stéphane62880 a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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