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 = "http://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 = "http://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 = "http://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
...
Commentaires
site/blog
le 02-07-2011 à 15:03:18
Oui, oui je sais je devrais poster sur le forum de B4E mais là j'ai trop honte, on sais déjà que je suis le boulet d'or pour la technique mais là c'est la cata! Je suis sur ce sujet depuis avant le concours et j'en suis toujours au même point point c'est à dire à rien. J'ai tenté encore et encore de mettre 3 nouveaux titres dans mon menu pour l'aérer un peu(Glitters- Photofiltre et Divers) en plus je n'ai pas même pas de lien au survol donc c'est tout simple, j'ai tenté de comprendre ce que tu expliquais à Nöelle pour les les blocs, je l'ai fait, aucun résultat. Je suis vraiment nulle à pleurer. Là, je suis desssus depuis 10 heures ce matin, je voulais y arriver à tout prix et toujours rien, ah si j'ai réussi à effacer toute ma page d'accueil. Tout le monde comprend et semble trouver cela tout simple et moi je cale depuis des jours. Est ce que tu n'as pas un moyen plus simple de me faire comprendre ce que je dois faire exactement. Pense que tu as affaire à une demeurée qui a besoin d'explications simples.
Je sais que tu as beaucoup de travail et que je ne suis poas toute seule sur cette gigantesque plate forme mais je voudrais tant améliorer encore un peu mon blog. Si tu peux faire quelque chose je t'en remercie du fond du coeur par avance, sinon tant pis mon blog restera tel qu'il est(il n'y a pas mort d'homme) c'était juste un petit plus que je voulais y apporter.
Tu m'as déjà beaucoup aidée et soutenue et je ne voudrais pas en demander de trop donc si c'est impossible dis le moi carrèment, je ne t'en voudrai pas du tout, je te respecte bien trop pour cela.
Bon week end mon ami
Bisous-
le 02-07-2011 à 15:58:10
Pour te consoler, ce n'est pas très simple à réaliser, il faut bien étudier ce que tu veux avant. Je te contacte par mail aussitôt que je le peux.
Bises
site/blog
le 05-07-2011 à 19:49:34
j'avais bien tester ton code sur mon test sans soucis ,je viens de le mettre sur mon blog avec "" les moteurs de recherche"" ,je voudrais pouvoir le mettre a droite pour l'équilibre,je cherche depuis un moment dans tes tutos et sur le forum d'aide ,mais je vois rien ,peut être pas possible ?????? je sais pas si tu as la possibilité de me dire si cela est jouable ??? je te remercie par avance
phil
le 05-07-2011 à 21:37:43
Il faut faire un nouveau module que tu rajoutes à la colonne de droite.
Regardes cet article :
h ttp://diztest.blog4ever.com/blog/lire-article-205392-2061533-bloc_droit_colonne_avec_menu_complementaire.html
Si tu n'y arrives pas tu m'envoies un mail.
Bravo pour ton blog.
@++
site/blog
le 06-07-2011 à 07:18:14
encore merci pour ta disponibilité
bonne journée a toi
phil
le 07-07-2011 à 19:21:23
voilà les nouvelles ,nikel impeccable, rien de visible pour l'instant sur mon blog ,j'ai joujouter sur le blog test ,mais tes infos !!!!!! aux petits oignons ,je vais bientôt ajouter ça sur mon blog ,mais pour l'instant vraiment beaucoup de travail ........ juste une petite chose encore si je peux me permettre a la fin de tes explications sur le lien que tu me donnes plus haut ,l'ajout d'un deuxième module sera un des prochains sujets ????? c'est quelque chose que tu as expliqué quelque part ou pas ????? si oui un petit lien !!!!!!!! après je t'embêtes plus
bonne soirée et encore merci ,je te fais signe dés que je mets tous cela en application sur mon bloc pour que tu donnes ton avis
phil
le 07-07-2011 à 21:14:11
Oups!!!
J'ai oublié de mettre le lien sur cet article, tu trouveras les articles suivants dans la catégorie, en principe celui de mon message précédent devrait bien t'aider. Mais si tu as besoin tu m'envoies un mail.
Bonne soirée
site/blog
le 06-10-2011 à 10:25:07
sur mon blog, je voudrais remonter le cadre "photos" tout à droite au même niveau que le cadre article de gauche
comment faire ?
merci de ton aide, je débute dans le langage html depuis seulement une semaine, dur...
site/blog
le 19-10-2011 à 09:17:57
Après bien des essais (non concluants) pour mettre mon module supplémentaire "croque la Vie" au dessus de mes articles (transformé en "recueil"), je dis " heeeeeelp !" Je ne sais plus du tout ce que je peux faire ! J'ai songé à le mettre à droite mais là encore, échec. J'ai dû régressé car avant je n'avais aucun souci pour me dépatouiller en langage CSS ou html.
Merci pour ton aide Papyclic
le 19-10-2011 à 10:19:30
Je t'ai envoyé un code par courriel.
Bonne journée
site/blog
le 21-10-2011 à 08:14:15
Je voudrais changer les nom de mes modules dans le menu
es que je peu le faire en version gratuite et si oui comment doit je faire stp
Encore une petite question ? puis je rajouter des modules toujours en version gratuite...
merci de ton aide
Nathouille
le 21-10-2011 à 09:02:47
Tu as la réponse au début de cet article.
Il faut mieux être en version payante pour mettre le code dans les bordures de page.
Il y a une possibilité avec un fichier complémentaire mais il faut quand même rentrer quelque chose dans chaque article, donc très fastidieux.
Patiente un peu, avant la fin de l'année, en principe nous aurons une autre façon de faire.
Ou tu passes en version Silver.
Bonne journée
site/blog
le 22-10-2011 à 14:10:54
Merci pour ta réponse
Je viens de passer en SILVER pour 6 mois
Peut tu me dire maintenant comment je peu rajouter et changer les modules dans mon menu
J’ai essayer et j’y arrive pas, je suis nul désolée
Merci de ton aide
Nathouille
site/blog
le 26-10-2011 à 10:13:47
J'ai réussi à mettre d'autres catégories dans mon menu de gauche, mais je n'arrive toujours pas a les déplacés
j'aimerais une explication plus claire si possible
je suis nul, je comprends vite, mais il faut m'expliquer longtemps... lol
merci de votre aide
Nathouille