Gestion dynamique des modules du menu vertical
Dans le cadre de mes labs, suite logique, de mes articles sur le menu "Barre" lien, pour dynamiser vos blogs je vous présente ici quelques codes intéressants. Vous trouverez un plus pour organiser votre menu en changeant, selon le contenu de votre blog, le titre des modules, en modifiant l'ordre d'affichage de ces modules et également en insérant des modules dynamiques à la position que vous souhaitez.
Je précise que ces codes sont à mettre :
- soit dans un article en mode HTML avec le nouveau composeur (actif sur l'article uniquement)
- soit dans la bordure gauche/droite (actif sur tout le blog)
- ou dans un fichier pour ceux qui connaissent le système de fichier externe lié
Analyse du menu vertical
Pour pouvoir expliquer les procédures et les codes qui vont suivre, j'ai fait un petit outil qui me permet de connaître le nombre de modules composant le menu vertical Partie "Menu" du DizPerso. Mais également leur numéro d'ordre et le texte du titre, selon la structure d'origine, si vous avez fait des modofications personnelles, des erreurs peuvent se présenter. Actuellement il y a 7 modules et la numérotation commence toujours par 0.
Résultat de mon petit outil
Code de mon petit outil
// Affectation des variables
var menuGauche = document.getElementById("menu");
var nbModules = menuGauche.getElementsByTagName("h2").length;
// Affichage du nombre de modules
document.write("Nombre de modules : " + nbModules + "<br><br>");
// Affichage de tous les modules du menu
for( var m = 0; m < nbModules; m++ ) {
document.write("Module N°" + m + ": <b>" + menuGauche.getElementsByTagName("h2")[m].firstChild.data + "</b><br>");
}
// ]]></script>
Changer les titres des modules
Il est possible que le terme "Article", ne convienne pas au contenu de votre blog, qu'il serait préférable de mettre, par exemple "Mes écrits".
En exemple mes modifications de 2 titres que vous pouvez voir sur cet article sont réalisées avec le code suivant.
<script type="text/javascript">// <![CDATA[
// Affectation des variables
var menuGauche = document.getElementById("menu");
var moduleMenu = menuGauche.getElementsByTagName("h2");
// Modification du titre des modules
moduleMenu[0].firstChild.data = "Mes articles";
moduleMenu[1].firstChild.data = "Mes albums";
// ]]></script>
Il suffit de changer ce qui est en rouge, le numéro d'ordre et mettre le nouveau texte du titre, si vous avez plus de 2 titres à changer, rajoutez une ligne de code.
Déplacer les modules dans le menu
En utilisant les identifiants (ID) des modules, il est possible d'insérer un module avant un autre, sur cette page vous pouvez remarquer que le module de l'album photos est positionné avant celui des articles
Dans le code suivant il suffit de modifier ce qui est en rouge
// Affectation des variables
var moduleDeplace = document.getElementById("menu_articles");
var moduleInsere = document.getElementById("menu_photos");
// Déplacement de l'affichage des 2 modules
menuGauche.insertBefore(moduleInsere, moduleDeplace);
// ]]></script>
Pour utiliser ce code il faut connaître les identifiants des modules composants le menu, voir mon article lien, pour affecter les variables. Ce code est pour un déplacement si vous en avez plusieurs, il faudra faire le même code pour chacun en modifiant les IDs des modules.
Créer un nouveau module et l'insérer
Un peu plus compliqué, car il faut créer la liste avec les liens. Pour expliquer la procédure, mon exemple contient 3 liens, si vous avez plus de liens, il faut créer un élément de liste pour chaque lien ajouté. Puis créer pour chacun le texte, l'adresse et le message au survol.
Code commenté
En vert les commentaires, en rouge ce qui est à modifier pour personnaliser votre module ajouté et en bleu au bout des lignes qui gérent mon premier lien, ces lignes seront à rajouter pour chacun des liens créés. Comme je l'ai fait pour mes 2 autres liens.
// Affectation des variables
var menuGauche = document.getElementById("menu");
var nvDiv = document.createElement("div");
// Variables de création du titre du module
var nvTitre = document.createElement("h2");
var texteNvTitre = document.createTextNode("Module Plus");
var nvUl = document.createElement("ul");
// Variables des éléments de la liste
var nvLi0 = document.createElement("li"); // premier lien
var nvLi1 = document.createElement("li");
var nvLi2 = document.createElement("li");
// Variables des liens
var nvLien0 = document.createElement("a"); // premier lien
var nvLien1 = document.createElement("a");
var nvLien2 = document.createElement("a");
// création du texte de chaque lien
var texteNvLien0 = document.createTextNode("Lien 1"); // premier lien
// création des attributs des liens
nvLien0.href = "https://diztest.blog4ever.com/blog/lire-article-205392-2050386-ajout_de_liens_sur_la_barre_menu.html"; // premier lien
nvLien0.title = "Texte 1 au survol"; // premier lien
// affectation du texte au lien
nvLien0.appendChild(texteNvLien0); // premier lien
// création du texte de chaque lien
var texteNvLien1 = document.createTextNode("Lien 2");
// création des attributs des liens
nvLien1.href = "https://diztest.blog4ever.com/blog/lire-article-205392-2050382-gestion_dynamique_des_liens_du_menu_barre.html";
nvLien1.title = "Texte 2 au survol";
// affectation du texte au lien
nvLien1.appendChild(texteNvLien1);
// création du texte de chaque lien
var texteNvLien2 = document.createTextNode("Lien 3");
// création des attributs des liens
nvLien2.href = "https://diztest.blog4ever.com/blog/lire-article-205392-2050388-image_differente_pour_chaque_module_de_la_barre.html";
nvLien2.title = "Texte 3 au survol";
// affectation du texte au lien
nvLien2.appendChild(texteNvLien2);
// mise en place des liens aux nouveaux éléments de la liste LI
nvLi0.appendChild(nvLien0); // premier lien
nvLi1.appendChild(nvLien1);
nvLi2.appendChild(nvLien2);
// affectation des éléments au bloc liste UL
nvUl.appendChild(nvLi0); // premier lien
nvUl.appendChild(nvLi1);
nvUl.appendChild(nvLi2);
// affectation du titre du module
nvTitre.appendChild(texteNvTitre);
nvDiv.appendChild(nvTitre);
// création de ID et CLASS comme pour les autres modules
nvDiv.setAttribute("id","menu_perso1");
// code pour faire accepter la CLASS aux navigateurs différents
if(document.all) nvDiv.className="menu_bloc";
else nvDiv.setAttribute("class","menu_bloc");
// affectation de la liste au bloc DIV
nvDiv.appendChild(nvUl);
// création variable indiquant le module qui sera déplacé pour insérer le nouveau
var moduleDeplace = document.getElementById("menu_forum");
// affectation du module au menu avec son positionnement
menuGauche.insertBefore(nvDiv, moduleDeplace);
// ]]></script>
Vous avez certainement remarqué, que le "Module Plus", est bien positionné avant le module "Forum" et il est dans le même style que les autres modules, donc bien incorporé dans le menu
Des explications complémentaires viendront sûrement suite à vos réactions en testant ces codes. Nous en discuterons sur le forum de B4E pour que tout le monde en profite, dans la catégorie "Le labo de PapyClic", pour cet article dans le sujet lien.
Dans mon exemple j'ai créé qu'un seul bloc DIV, nvDiv, si vous en créez plusieurs, il faut pour chacun une variable, c'est à dire,
par exemple nvDiv1, nvDiv2, nvDiv3, etc... Puis je vous conseille de créer pour chacun un identifiant ID,
par exemple blocDiv1, blocDiv2, blocDiv3, etc...
Ce principe permet par la suite de créer des variables pour bien cibler chaque bloc et ainsi pouvoir insérer les nouveaux blocs à la position souhaitée.
Je ferai un exemple dans mon prochain article, qui est en cours de rédaction avec la création de la colonne de droite et donc plusieurs DIVs avec chacun des liens différents ce qui fera bien comprendre le processus.
Au passagge je rappelle, qu'il ne peut y avoir q'un seul ID du même nom par page, c'est un identifiant unique qui permet bien de le détecter. Par contre il peut y avoir plusieurs CLASSes dans une page. En CSS les règles pour les IDs sont précédées par un dièse # et les CLASSes par un point .
A suivre lien
...
