• Mettre un menu déroulant dans un module

    Ce tuto m'a été inspiré par Maximum34 qui souhaitait réaliser un menu de ce type sur son blog.

    Ce menu va être constitué de titre et de sous menus, lesquels seront des liens. Le fonctionnement est le suivant:

    En passant la souris sur un titre, cela déroulera le sous menu correspondant (et fermera les autres sous -menus qui seraient ouverts) comme dans l'exemple à droite.

    Comment procéder ?

    Vous devez créer un module simple (Menu Eklablog: Apparence / Ajouter un module / Module simple).

    Ensuite, copiez le code ci-dessous dans un éditeur de texte (notepad++, bloc-notes etc.) afin de le modifier avant de le placer sur votre blog.

    Quelques explications:

    Ce code comporte une fonction javascript appelée deroule. Elle comporte 1 paramètre qui correspond au sousmenu que l'on veut voir affiché.
    L'appel à cette fonction est déclenché par l'évènnement:  onmouseover="deroule(1);" Comme vous le constatez, cet évènnement est placé aux lignes Titre 1, Titre 2 etc. C'est donc au survol de ces lignes que sera appelée la fonction.

    Cette fonction comporte dans l'exemple 6 lignes (en jaune). Les 3 premières referment tous les sous menus. Et les trois suivantes affichent le sous menu correspondant au survol de la souris. Ainsi, si l'on survole le Titre 2, la fonction va être appelée avec le paramètre 2 (onmouseover="deroule(2);"), ainsi parmi les 3 dernières lignes de la fonction, seule celle commençant par if (valeur == 2) sera exécutée.

     

    Vous devez avoir le double de lignes dans votre fonction que vous avez de sous menus. 

     

    Le menu est placé sous la balise <div id="mondivmenu">. Vous pouvez bien entendu remplacer mondivmenu par un nom de votre choix. Cette balise vous permettra d'appliquer plus facilement votre style CSS au menu. 

    Titre 1, Titre2 et Titre 3 sont les titres de menu. Ils peuvent aussi agir en tant que lien. Il vous suffit pour cela de remplacer le href=" #" situé juste avant par href="http://url de votre lien..."

    Pour les Lien du Titre, c'est la même chose que pour les titres. Mettez les noms que vous avez choisis et définissez le href.

    Voilà, vous avez fini vos modifications, il ne vous reste plus qu'à enregistrer le code obtenu et à le placer dans votre module. Bien entendu, pour le style graphique, vous allez adapter le style CSS du menu au style de votre blog. Ci-dessous, vous trouverez le code CSS correspondant à l'exemple de ce tuto.

    Pour vos poser vos questions ou faire des commentaires -> C'est sur ce forum