Bloc droit colonne avec menu complémentaire

Création d'une colonne en face du menu vertical de la structure du DizPerso, avec déplacement du module Photos et création d'un nouveau module.

Dans un premier temps il faut diminuer la largeur de la "Partie Contenu" de façon à laisser la place pour la colonne de droite, donc dans le CSS diminuez la largeur(width) dans la règle #contenu de 200px, pour tester, après vous pourrez toujours rectifier. Diminuez également la largeur du titre h3... règle #contenu h3.

Puis dans la bordure gauche/droite rentrer le script javascript, ci-dessous dans l'encadrement, pour créer un bloc comme le menu vertical gauche et le positionner... qui déplacera également le module "Photos".

Code pour la procédure complète

Explications

Création d'une variable qui représentera dans le code, la "Partie Cadre" celle qui contient toutes les parties d'une page.

var blocCadre = document.getElementById("cadre");

Création d'une variable représentant un élément HTML bloc DIV, c'est ce bloc qui recevra tous les objets et constituera une colonne parallèle et semblable au bloc de gauche "Menu"

var nvColonne = document.createElement("div");

Ce nouveau bloc doit-être identifiable et unique dans une page, on lui attribue un ID, pour simplifié je le nomme menu2, mais vous pouvez le nommer blocdroit comme dans mes pécédents tutos.

nvColonne.setAttribute("id","menu2");

Le positionnement absolute fige le bloc à une distance du bord du haut valeur du top et du bord droit de la valeur du right

nvColonne.style.position="absolute";
nvColonne.style.top="230px";
nvColonne.style.right="5px";

La ligne suivante affecte ou accroche la colonne créée à la "Partie Cadre"

blocCadre.appendChild(nvColonne);

Déplacement de module existant

Insertion, pour l'exemple d'un bloc existant dans le menu de gauche... module "Photos"

Création de la variable qui représentera le bloc dans le code

var menuPhotos = document.getElementById("menu_photos");

La ligne suivante affecte ou accroche, le bloc à insérer, à la "Colonne"

nvColonne.appendChild(menuPhotos);

Amélioration de la présentation

Pour que la colonne créée et son contenu soient dans le même style, du menu de gauche, il faut rajouter l'identifiant que vous avez mis en créant la colonne, dans les règles gérant le menu.

nvColonne.setAttribute("id","menu2");

Dans mon exemple menu2, en mettant un diése devant #menu2, j'ai récapitulé pour vous les règles que vous devez trouver dans le DizPerso en "Modification direct du CSS". Rajoutez à chaque règle ce qui est en rouge sans oublier la virgule et l'espace.

#menu, #menu2

#menu ul, #menu2 ul

#menu ul li, #menu2 ul li

#menu ul li a, #menu2 ul li a

#menu ul li a:hover, #menu2 ul li a:hover

#menu h2, #menu2 h2

Ajout d'un module avec liste menu

Maintenant il est possible rajouter un nouveau module "Module Plus" avec une liste menu comme je l'ai fait dans le menu de gauche dans cet article lien, vous trouverez mes explications. Peu de choses à modifier, il faut simplement accrocher ce module à menu2 aulieu de menu, donc de mettre la variable représentant la nouvelle colonne nvColonne à la place de celle du menu de gauche soit menuGauche, voir en rouge, en fin du code ci-dessous.
ATTENTION !!! si vous créez plusieurs modules il faut créer pour chacun d'eux un identifiant ID différent, ce sera le sujet de mon prochain article.

// Affectation des variables
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_perso2");
// 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);

// affectation du module plus dans la colonne
nvColonne.appendChild(nvDiv);

Pour plus de clareté, et faire en même temps un exemple, j'ouvre un autre article lien, où je vais créer plusieurs blocs menus.

...

03/01/2011