Ce tutoriel contient plusieurs démos de présentation de menus différents, ceci pour d'une part plus de clarté et de l'autre les démos étant des pages HTML séparées, il vous sera plus facile de vous servir de ces pages comme outil pour tester vos liens hors de votre blog à partir de votre disque dur, puisqu'elles sont simplifiées et autonomes, avec leur feuille de style et les scripts.

Comme exemple, pour faire simple, la première démo contient un seul menu, une liste de 4 éléments, les modules de la barre de menu en principe en haut de chaque blog, voir le code HTML.

Pour le CSS des nouveaux menus bis, vous avez 2 solutions, soit modifier votre feuille de style, comme je l'ai indiqué, en ajoutant aux règles #menu, la class .menubis, voir les règles modifiées pour être communes le CSS commun.
Mais si vous avez comme modèle Diz Perso, vous ne pourrez plus vous servir de l'assistant car il ne reconnaitra pas ce code ajouté et il le supprimera. La solution est de faire les mêmes règles, uniquement pour la Class .menubis, voir l'exemple le CSS séparé et mettre ce code dans la bordure gauche/droite, pour les versions payantes.
En version gratuite, la seule possibilité, actuellement est de sauvegarder votre code ajouté, hors du Diz Perso, dans un fichier texte, par exemple, puis si vous vous servez de l'assistant, après la validation dans l'asssistant, retourner dans "Modification directe du CSS" et coller votre code supplémentaire, en bas du fichier, valider la modification.
Ainsi Diz Perso fonctionne comme tous les modèles, une procédure qui n'est pas simple mais réalisable par tous. Je suis persuadé, que beaucoup d'entre vous, après avoir appris les rudiments du CSS avec l'assistant du Diz Perso, modifient leur CSS en direct, en fin de compte ce n'est pas compliqué, mais il fallait, un outil pour franchir le pas et se lancer sans appréhension.

Avec ces démos proposées, en principe vous pouvez faire des essais et vous en servir d'outils pour créer vos menus.
Vous téléchargez cette page Web qui est intépendante, vous l'enregistrez sur votre disque dur. Par la suite vous l'ouvrez avec un editeur de texte ou même le Bloc-notes, vous changez les liens des menus, vous en rajoutez, vous pouvez même modifier le CSS. Après vous enregistrez cette page avec un nouveau nom en format .HTML. En cliquant sur son nom, cette nouvelle page WEB, s'ouvrira dans votre Navigateur Internet et vous pourrez vérifier le fonctionnement des liens

Quand votre menu sera au point, vous pourrez copier son code HTML pour le coller dans la bordure gauche/droite, dans les balises du "Blocdroit" que vous devez en principe avoir installé avant.

La deuxième démo, propose un deuxième menu dans la colonne "blocdroit" Dans le cas d'un menu identique comme sur cette démo, la seule chose à faire, composer une liste avec comme éléments les liens composants le menu.
Dans vos menus si vous avez des catégories avec des sous-catégories, il y a une précaution à prendre, les "numéros" des "DIVs" doivent être tous différents sur la même page, donc sur tout votre blog, puisque les menus sont présents sur toutes vos pages. Par hasard si une erreur se produisait(2 fois le même nombre), les sous-catégories ne s'afficheraient pas, il vous suffira de changer le nombre.
La fonction show() du javascript contient entre des parenthèses un nombre, dans le menu automatique, le numéro d'ordre de la catégorie est employé, vous n'avez pas à vous en occuper.
Mais pour les menus que vous créez, une méthode simple, le premier Menu bis sera le N°1 et le chifrage des DIVs sera de 100 à 199, le deuxième N°2, de 200 à 299, et ainsi de suite...
Ce qui permet une marge de 9 menus bis et à chacun la possibilité de 100 catégories, avec des sous-catégories, ce qui me semble énorme. En restant dans ce même système si vous créez des menus dans la description de vos catégories ou dans vos articles, en employant la fonction show(), passez à 1100, 1200, 1300... etc
Pour plus de détails sur le système cacher/afficher voir mon article dans DizTest

<li><a href="javascript:show(200)"><b> + Blog4ever</b></a></li>

 <div id="200" style="display: none;">

Dans cette démo, installation de plusieurs "Menubis" et une nouvelle façon de mettre le code CSS pour ces menus.

Pour vous servir de cette "démo", affichez le code source de la page, copiez le et collez le dans votre bloc-notes ou un autre éditeur de texte tout simple.

Dans chaque élément "LI" des listes composant les menus :

<a href="http:// *** adresse du lien ** "

title=" ** message au survol ** "

> ** texte du lien ** </a>

<li><a href=" adresse lien " title=" message ">texte lien</a></li>

<li><a href=" adresse lien " target="_blank" title=" message ">texte lien</a></li>

L'avantage de ces liens est, que les navigateurs créeront des mots clés, sur les 3 composants :

1. l'adresse du lien
2. le message au survol
3. le texte du lien

Il faudra en tenir compte dans la rédaction de tous vos liens des menus, à mon avis c'est très important. Dans l'élaboration de vos pages également, toutes les balises HTML titres H1 H2 H3 H4 H5 H6, intéressent les navigateurs, pensez-y !!!

Pour les catégories avec des sous catégories, les liens son composés de la même façon, mais ils sont dans un bloc DIV, qui s'ouvrira(ou se fermera) avec un clic sur la catégorie mère, selon la procédure, commandée en javascript, "Afficher/Cacher", voir pour les détails ici .

Ci-dessous un extrait d'un de mes menus, composé d'une catégorie mère et 4 catégories filles.

     <li><a href="javascript:show(200)"><b> + Blog4ever</b></a></li>
 <div id="200" style="display: none;">
 <ul>
 <li><a href="http://test.blog4ever.com/blog/forum-2.html" target="_blank" title="Blog4ever Forum d'aide"> >> Forum Aide</a></li>
     <li><a href="http://www.blog4ever.com/faq/index.php" target="_blank" title="Blog4ever Aide FAQ"> >> Aide - FAQ</a></li>
     <li><a href="http://www.blog4ever.com/annuaire.php" target="_blank" title="Blog4ever Annuaire des blogs"> >> Annuaire</a></li>
     <li><a href="http://rapidechange.com/" target="_blank" title="Rapidechange Echange et Hébergement de divers fichiers"> >> Rapidechange</a></li>
     </ul>
 </div>