Créer un menu catégories déroulant avec sous-catégories
Le module Catégories standard ne me satisfaisait pas. Je trouvais dommage de devoir cliquer sur le nom de la catégorie pour charger une page qui en liste les articles sur laquelle il faut recliquer pour accéder à l'article. Cela faisait au moins deux chargements de page non nécessaires.
Aussi j'ai décider de m'attaquer au problème afin d'accéder directement à l'article voulu.J'ai ensuite voulu organiser mes catégories, pouvoir les hiérarchiser, avoir des sous-catégories.
Après avoir mis en test ce module pendant plusieurs mois, je le propose maintenant à tous les over-blogueurs qui peuvent utiliser le javascript (blogs de niveau Privilège minimum).
L'outil est un peu fastidieux à mettre en place, alors armez-vous de patience!!!
- Préparez un module texte libre afin qu'il reçoive les catégories principales. Editez le texte libre et, en mode Source,saisissez la ligne suivante répétée autant de fois qu'il y a de catégories principales:
<div id="idcategorie"></div>
où idcategorie est un identifiant arbitraire unique que vous définissez (idcategorie doit commencer par une lettre et ne contenir que des caractères alphanumériques)
<div id="cat01"></div>
<div id="cat02"></div> - Créez un fichier mescat.js (nous allons en définir le contenu dans les étapes suivantes) dans votre éditeur de texte préféré (le bloc-notes, bbedit ou vi feront l'affaire).
- Pour chaque catégorie principale, ajoutez une ligne:
var idcategorie = new obbCategorie("idcategorie", "Titre catégorie", "Texte de l'infobulle");
où idcategorie est l'identifiant de catégorie défini au point 1, Titre catégorie est le texte à afficher dans le nouveau module catégorie, Texte de l'infobulle est le texte de la bulle d'information que apparaît au survol du titre de la catégorie. - Pour chacun des articles entrant dans la catégorie, relevez le numéro d'article et le titre. Le numéro d'article est défini dans l'url de l'article et est composé uniquement de chiffres. Un article dont l'url est http://www.francisek.com/article-738866.html aura comme numéro 738866.
Tous ces articles seront ajoutés à leur catégorie par la ligne:
idcategorie.AddTable( Array(
"numéro-article-1|Titre-article-1",
"numéro-article-2|Titre-article-2"
));
où numéro-article-1 est le numéro du premier article et Titre-article-1 et son titre.
Vous pouvez utilisez la liste des articles d'une catégorie pour faciliter cette opération.
- Si vous souhaitez ajouter une sous-catégorie, ajoutez une ligne de la forme :
idcategorie.AddSubCategory("Titre sous catégorie ", "Texte Infobulle ", Array(
"numéro-article-1|Titre-article-1",
"numéro-article-2|Titre-article-2"
));
Pour créer une sous-catégories de sous-catégorie, vous procéderez ainsi:
var souscat1 = idcategorie.AddSubCategory("Titre sous catégorie ", "Texte Infobulle ", Array(
"numéro-article-1|Titre-article-1",
"numéro-article-2|Titre-article-2"
));
souscat1.AddSubCategory("Titre sous-catégorie 2", "Texte Infobulle ", Array(
"numéro-article-sous-cat-1|Titre-article-sous-cat-1",
"numéro-article-sous-cat-2|Titre-article-sous-cat-2"
)); - Une fois toutes les catégories et leur contenu défini, pour chaque catégorie principale, ajoutez la ligne:
idcategorie.run(); - Sauvegardez le fichier mescat.js, placez le dans le répertoire Mes fichiers de votre blog.
- Dans votre pied de page, ajoutez les lignes suivantes :
<script type="text/javascript" </script>
<script type="text/javascript" </script>
Exemple de fichier mescat.js (cet exemple suppose que le code <div id="C2525"></div><div id="C24911"></div> soit présent dans un module texte libre):
C2525.AddSubCategory("Divers", "Outils inclassables", Array(
"746951|Afficher le blog des commentateurs dans une nouvelle fenêtre",
"637267|Créer de nouveaux modules texte libre",
));
C2525.AddSubCategory("Protection", "Pour protéger vos créations et votre anonymat", Array(
"34070|Protection des e-mail et de liens dans vos pages web",
"25135|Protéger la capture des mails sur son site",
));
C2525.run();
var C24911 = new obbCategorie('C24911', 'FireFox / Mozilla', 'Pour les utilisateurs de FireFox');
C24911.AddTable(Array(
"78144|Débloquer le Copier-Coller de FireFox",
"74973|Le dossier de profils de Mozilla",
"73872|Passez à FireFox"
));
C24911.run();
Vous pouvez personnaliser votre menu Catégories par le CSS en utilsant les classes suivantes :
| Identifiant CSS | Description |
|---|---|
| .cat-title | Titre d'une catégorie |
| #idcategorie-title | Titre de la catégorie d'identifiant idcategorie |
| .cat-list | Liste des articles d'une catégorie |
| #idcategorie-list | Liste des articles de la catégorie d'identifiant idcategorie |
| .cat-list li | Elément de la liste des articles d'une catégorie |
| #idcategorie-list li | Elément de la liste des articles de la catégorie d'identifiant idcategorie |