⇐ ACCUEIL ⇐ Menu vertical gauche

Cet article fait suite à la création,de façon dynamique, d'un bloc droit colonne, où je vais insérer des modules, hors structure du DizPerso.

Ce qui permet de personnaliser vos blogs, c'est à partir de codes Javascript, insérés dans vos pages et gérés par vous. Vous avez la totale maîtrise de ces rajouts, mes codes vous aideront, je pense, à contruire la charpente et vous y introduirez, les liens, les menus, les images, les objets et les codes trouvés sur Internet.

Selon vos capacités en informatique, vous pourrez simplement modifier le positionnement des divers modules existants, en les déplaçant dans cette colonne, comme dans mon article précédent le module "Photos". Mais vous pourrez également créer des menus supplémentaires avec des liens sur tout ce que vous souhaitez et surtout vous en gérerez totalement l'organisation.

Ces procédures sont indépendantes de Blog4ever, Kl et moi_même ne pouvons être tenus comme responsables en cas de problème. Je vous conseille de faire une copie de vos bordures de page avant d'insérer le code ou une copie du HTML de la page où vous introduisez du Javascript. C'est simple vous sélectionné tout et vous le collez dans le blocnotes, enregistrez dans un fichier texte.

Je reprends dans cet article le même code que dans le précédent. La différence sera la création de plusieurs modules avec menus, je vous indiquerez les modifications à faire dans ce cas et après vous pourrez en suivant le même processus créer le nombre de modules que vous avez besoin.

La première partie du code ne change pas, création de la colonne, déplacement du module "Photos".
Je reprends le code du module ajouté pour y faire les modifications qui me donneront la possibilité de créer d'autres modules.

Pour les modules, contenant une liste de liens composant ainsi un menu, il faut être très méthodique pour nommer les variables.

Une variable représentera toujours le même éléments dans un script, mais vous pourrez l'utiliser plusieurs fois pour déplacer ce qu'elle représente, lui donner une valeur ou lui appliquer un style.

Pour faciler mes explications je nomme les variables représentant le même type d'élément par le même nom mais avec un chiffre différent, la numérotation commençant par 0, exemple :

Mod0, Mod1, Mod2, etc... pour les modules 1, 2 et 3

Pour les listes également

Liste0, Liste1, Liste2, etc... pour les listes 1, 2 et 3

Pour les liens je ferai pareil exemple :

Lien0, Lien1, Lien3, etc... pour les liens 1, 2 et 3

En composant un nom de variable à l'aide des noms ci-dessus, ça sera plus facile de connaître se qu'elle représente, exemples :

mod0Liste0 ... sera la première liste du premier module
mod0Liste1 ... sera la deuxième liste du premier module

liste0Lien0 ... sera le premier lien de la première liste
liste0Lien1 ... sera le deuxième lien de la première liste
liste0Lien2 ... sera le troisième lien de la première liste

Ainsi on peut modifier les attributs d'un lien bien précis avec sa variable, exemple :

Adresse du deuxième lien de la première liste
liste0Lien1.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2050382-gestion_dynamique_des_liens_du_menu_barre.html";

Message au survol du premier lien d de la première liste
liste0Lien0.title = "Texte 2 au survol";

Je crois que ces explications, un peu longues, seront utiles pour comprendre la suite.

Le code ci-dessous, peut servir de modèle, je vais m'en servir pour vous montrer en détail et progressivement la création de plusieurs modules.

Code modèle d'un module contenant un menu

Création des 3 modules, des 3 blocs divs des éléments titre h2 et le texte de chaque titre
code commenté :

// Affectation des variables des modules

var divMod0 = document.createElement("div");
var divMod1 = document.createElement("div");
var divMod2 = document.createElement("div");

// Variables de création du titre du module

var titreMod0 = document.createElement("h2");
var titreMod1 = document.createElement("h2");
var titreMod2 = document.createElement("h2");

// Variables de création texte du titre du module

var texteTitreMod0 = document.createTextNode("ModulePlus1");
var texteTitreMod1 = document.createTextNode("ModulePlus2");
var texteTitreMod2 = document.createTextNode("ModulePlus3");

// affectation du texte à chaque titre

titreMod0.appendChild(texteTitreMod0);
titreMod1.appendChild(texteTitreMod1);
titreMod2.appendChild(texteTitreMod2);

// affectation du titre à chaque module
divMod0.appendChild(titreMod0);
divMod1.appendChild(titreMod1);
divMod2.appendChild(titreMod2);

// création de ID et CLASS comme pour les  modules existants

divMod0.setAttribute("id","menu_perso0");
// code pour faire accepter la CLASS aux navigateurs différents
if(document.all) divMod0.className="menu_bloc";
else divMod0.setAttribute("class","menu_bloc");

// création de ID et CLASS comme pour les  modules existants

divMod1.setAttribute("id","menu_perso1");
// code pour faire accepter la CLASS aux navigateurs différents
if(document.all) divMod1.className="menu_bloc";
else divMod1.setAttribute("class","menu_bloc");

// création de ID et CLASS comme pour les  modules existants

divMod2.setAttribute("id","menu_perso2");
// code pour faire accepter la CLASS aux navigateurs différents
if(document.all) divMod2.className="menu_bloc";
else divMod2.setAttribute("class","menu_bloc");

A ce stade rien ne s'afficherait, il faut maintenant placer chaque module dans la colonne.
Avec le code suivant, ces modules se mettront dans  la colonne après les autres modules.

// affectation de chaque module à la colonne

nvColonne.appendChild(divMod0);
nvColonne.appendChild(divMod1);
nvColonne.appendChild(divMod2);

Voilà les modules sont créés mais vides

Création de la liste composant le menu avec 3 liens.
Code commenté:

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

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

var texteListe0Lien0 = document.createTextNode("Lien 1"); // création texte de lien
liste0Lien0.appendChild(texteListe0Lien0);      // affectation du texte au lien

// création des attributs du lien, son adresse, le message au survol
liste0Lien0.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2050386-ajout_de_liens_sur_la_barre_menu.html";
liste0Lien0.title = "Texte 1 au survol";

Pour chaque lien ajouté le code est le même, il faut modifier les variables et les valeurs

// --------------------------------------------------
// Création deuxième élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li1 = document.createElement("li");
var liste0Lien1 = document.createElement("a");
var texteListe0Lien1 = document.createTextNode("Lien 2");
liste0Lien1.appendChild(texteListe0Lien1);
liste0Lien1.href= "http://diztest.blog4ever.com/blog/lire-article-205392-2050382-gestion_dynamique_des_liens_du_menu_barre.html";
liste0Lien1.title = "Texte 2 au survol";

// --------------------------------------------------
// Création troisième élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li2 = document.createElement("li");
var liste0Lien2 = document.createElement("a");
var texteListe0Lien2 = document.createTextNode("Lien 3");
liste0Lien2.appendChild(texteListe0Lien2);
liste0Lien2.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2050388-image_differente_pour_chaque_module_de_la_barre.html";
liste0Lien2.title = "Texte 3 au survol";

// --------------------------------------------------
// affectation des liens aux éléments de la liste LI
// --------------------------------------------------
liste0Li0.appendChild(liste0Lien0);
liste0Li1.appendChild(liste0Lien1);
liste0Li2.appendChild(liste0Lien2);

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

// -----------------------------------------
// affectation de la liste au blocs divMod0
// -----------------------------------------
divMod0.appendChild(mod0Liste0);

Voilà le module avec son menu est en place, dans mon prochain article , je rajouterai un lien à ce menu comme exemple. Puis je vais créer un deuxième menu pour démontrer que la seule difficulté est de bien faire attention aux noms des variables.

...