Créer un menu catégories déroulant avec sous-catégories

Publié le par Francisek

niveaux:

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!!!

Installation

  1. 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>
    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>
  2. 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).
  3. Pour chaque catégorie principale, ajoutez une ligne:
    var idcategorie = new obbCategorie("idcategorie", "Titre catégorie", "Texte de l'infobulle");
    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.
  4. 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.
  5. 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"
    ));
  6. Une fois toutes les catégories et leur contenu défini, pour chaque catégorie principale, ajoutez la ligne:
    idcategorie.run();
  7. Sauvegardez le fichier mescat.js, placez le dans le répertoire Mes fichiers de votre blog.
  8. 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):

var C2525 = new obbCategorie('C2525', 'Blog à outils', 'Divers outils pour le blog et le oueb');

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();

 

Personnalisations

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

 

Publié dans Pour les experts

Commenter cet article

Jacques 07/02/2007 16:54

Bonjour
Ce menu déroulant peut-il etre horizontal(Pour les catégories principales)?
Merci

Francisek 10/02/2007 00:11

Avec le CSS, ça doit être faisable.
 

mat 29/12/2006 18:36

merci domage que l'on ne puise pas le faire quand l'on est en confiance :s

mat 26/12/2006 18:36

j'ai absolument rien comprit et j'en suis désolé mais je veut juste rajouté un texte libre il faut faire tout cela ?

Francisek 27/12/2006 22:01

 
Non, tout ça, c'est pour avoir une liste des catégories exhaustive avec tous les articles.Pour les nouveaux modules, c'est ici : Créer de nouveaux modules texte libre

- Mag - 09/11/2006 18:40

Francisek, MERCI pour ce code génial (pour nous aussi !!) et si bien expliqué, j'ai réussi du premier coup & all is well :-)

Si je peux abuser de ta bonté ... est-ce que tu pourrais m'indiquer (si c'est par le biais du CSS que tu l'as fait !) comment tu as fait pour que le module ressemble plus à un explorateur de fichiers (clic sans la "petite main", petit "plus" ...) qu'à une liste de liens ?

Merci d'avance si tu as le temps de m'aider !!

Bises & bonne fin de journée :-)
Magali

Francisek 09/11/2006 23:40

 
Mon module d'articles ne fonctionne pas avec ce script. J'interroge une base de données de mes articles selon leur catégorie. Tu ne pourras pas obtenir le même effet que moi par le CSS (en particulier les "petits plus").Par contre pour le curseur, il suffit de redéfinir le curseur dans le CSS, par exemple pour les titres de catégorie:.cat-title:hover{cursor:pointer;}

Jacques Isoard 08/11/2006 07:56

Merci encore