⇐ ACCUEIL ⇐ Menu vertical gauche

Si vous avez bien lu l'article précédent,où j'explique mon système de nom de variable, il devrait vous paraître simple de rajouter un élément à votre liste menu.
C'est bien sûr un exemple ces noms de variables peuvent être changer pour être plus causant pour vous.
Mais ces codes peuvent vous servir de maquette pour créer vos menus personnels car le nom des variables ne s'affichent pas, à vous de voir ce qui vous convient le mieux.

Pour rajouter cet élément, il faut  quelques lignes de code :

// --------------------------------------------------
// Création rajout  élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li3 = document.createElement("li");  // Variable élément liste
var liste0Lien3 = document.createElement("a"); // Variable du lien

var texteListe0Lien3 = document.createTextNode("Lien 4"); // création texte de lien
liste0Lien3.appendChild(texteListe0Lien3);      // affectation du texte au lien

// création des attributs du lien, son adresse, le message au survol
liste0Lien3.href = "https://diztest.blog4ever.com/blog/lire-article-205392-2059992-gestion_dynamique_des_modules__du_menu_vertical.html";
liste0Lien3.title = "Texte 4 au survol";

En bleu les nouvelles variables  et en rouge les valeurs de ces variables, c'est ce que les internautes verront sur votre blog et l'adresse URL du lien, dont vos modifications personnelles.

A ces lignes de code, il manque tout simplement l'affectation de ce lien à la liste du menu de votre  module. Je vais donc insérer ce code dans celui de la création du menu.

// --------------------------------------------------
// affectation des liens aux éléments de la liste LI
// --------------------------------------------------
liste0Li3.appendChild(liste0Lien3);

// -----------------------------------------------------
// affectation des éléments au bloc liste UL mod0Liste0
// -----------------------------------------------------
mod0Liste0.appendChild(liste0Li3);

Code complet du menu avec 4 liens.

Le code ajouté placé dans mon code de l'article précédent. Il en sera de même pour rajouter d'autres liens à ce menu dans le premier module.

La colonne étant crée avec les modules voir les articles : Création colonne  Création de modules

Pour créer un autre menu, dans un autre module, j'utilise le même code mais pour facilité la compréhension et rendre la gestion plus aisée par la suite, je ne mélange pas les modules et leur contenu. Je copie le code et je change uniquement les noms des variables puis bien sûr je change la liste et les liens.

Tout d'abord je crée le bloc liste UL dans le module que je veux en l'occurrence ModulePlus2

// -----------------------------------------
// Création de listes de liens du  ModulePlus2
// -----------------------------------------
// Variables bloc liste (UL)
var mod1Liste0 = document.createElement("ul");

En rouge la variable du bloc liste UL, le seul changement est mod1Liste0, ce petit 1 indique que la liste sera créée dans le module divMod1 voir dans la création des modules, variable qui représente le ModulePlus2.

Pour les éléments de liste LI et les liens a, comme je place ce code entre de nouvelles balises Javascript, je peux conserver le nom des variables, je change que les valeurs, comme exemple j'ai mis 2 liens réels et les textes qui correspondent à ces liens. (voir le code complet ci-dessous)

Par contre ce qui faut absolument modifier c'est l'affectation des éléments à la liste et de la liste au module.

// affectation des éléments au bloc liste UL mod0Liste0
mod1Liste0.appendChild(liste0Li0);
mod1Liste0.appendChild(liste0Li1);

// affectation de la liste au blocs divMod1
divMod1.appendChild(mod1Liste0);

Création d'un menu dans le module "ModulesPlus2"
Code complet

Vous constaterez que cette méthode réduit le code à modifier, en bleu les variables et en rouge les valeurs.

Création d'un bloc "img" dans la colonne droite

<script type="text/javascript">// <![CDATA[
// ----------------------------------
// Création objet élément HTML image
// ----------------------------------
// Affectation variable
var imgPub = document.createElement("img");

// style direct pour centrer l'image

imgPub.style.display = "block";
imgPub.style.marginTop = "20px";
imgPub.style.marginLeft = "auto";
imgPub.style.marginRight = "auto";
imgPub.style.marginBottom = "20px";

// Adresse de l'image

imgPub.setAttribute("src", "https://static.blog4ever.com/2008/05/205392/artimage_205392_2947608_201009235548568.gif");
// Message en cas de non affichage de l'image
imgPub.setAttribute("alt", "Bouton animé pub PapyClic");

// affectation image au blocs divMod2
divMod2.appendChild(imgPub);
// ]]></script>

Rendre l'image précédente cliquable

Il faut créer le lien, puis affecter l'image à ce lien, qui sera lui même affecté au bloc dans la colonne de droite.

Code complet :

<script type="text/javascript">// <![CDATA[
// --------------------------------------------
// Création objet élément HTML image cliquable
// --------------------------------------------
// Affectation variables
var lienPub = document.createElement("a");
var imgPub = document.createElement("img");

// Création des attributs du lien, adresse et message au survol
lienPub.href = "https://diztest.blog4ever.com/blog/index-205392.html";
lienPub.title = "Retour page d'accueil DizTest";

// Création du style de l'image
imgPub.style.display = "block";
imgPub.style.marginTop = "20px";
imgPub.style.marginLeft = "auto";
imgPub.style.marginRight = "auto";
imgPub.style.marginBottom = "20px";

// Création des attributs de l'image
imgPub.setAttribute("src", "https://static.blog4ever.com/2008/05/205392/artimage_205392_2947608_201009235548568.gif");
imgPub.setAttribute("alt", "Bouton animé pub PapyClic");

// affectation de l'image au lien
lienPub.appendChild(imgPub);

// affectation du lien au blocs divMod2
divMod2.appendChild(lienPub);
// ]]></script>

Déplacement du module sondage dans la colonne droite

<script type="text/javascript">// <![CDATA[
// -------------------------------
// ----  Module Sondage déplacé
// -------------------------------
// Positionnement de bloc interne existant
// Affectation variable
var menuSondage = document.getElementById("menu_sondage");
 
// Affectation module Sondage dans la nouvelle colonne
nvColonne.appendChild(menuSondage);
// ]]></script>

Dans les menus créés de cette façon, vous pouvez rajouter aux liens une petite image puce ou news. Quelques lignes de code suffisent :

// ----------------------------------------------------------
// Création de puces et son insertion avant le texte du lien
// ----------------------------------------------------------
var imgPuce0 = document.createElement("img");

// Adresse de l'image
imgPuce0.setAttribute("src", "https://static.blog4ever.com/2008/05/205392/artimage_205392_1212789_201004220912334.gif");
imgPuce0.setAttribute("border", "0"); // Attribut bordure
liste0Lien0.appendChild(imgPuce0); // Affectation au lien

Ce code est à placer en-dessous de la création du lien, vous avez à mettre l'adresse de l'image, la même ou une autre (attention à la taille), et à modifier les variables.

Code modifié pour réaliser le ModulePlus2 sur cet article

...