Catégories déroulantes

[Manga D.raw]

ça fait un moment que je cherche comment faire...
J'aimerais afficher quelque chose dans ce style sur mon forum =)

Spoiler:

(les menu sont déroulants)

Merci pour vos réponses =)

[Manga D.raw]

Un petit up =)

[Natsoumie]

Salut,

Pourquoi ne vas-tu pas directement demander à Quierra sur son Forum?

Il s'agit normalement de Java script qui viennent de Dynamic drive que tu pourra trouver sur google.

[Manga D.raw]

Ben à force de m'inscrire sur des forums...
Ma boite de messagerie est surchargé avec 300 messages par jours x')

[Natsoumie]

Quierra est inscrite sur FA.

Tu peux la contacter par mp ici-même.

[quierra]

Il s'agit normalement de Java script qui viennent de Dynamic drive que tu pourra trouver sur google.

Non il s'agit de la librairie jQuery. Pour plus d'information sur cette librairie et ses plugins : http://jquery.com/ http://docs.jquery.com/Main_Page
Et pour animate, donc la fonction(ou effet) que j'ai utilisé : http://api.jquery.com/animate/

Pour l'instant je ne sais que manier les slides dans tous les sens, onglets et rajouter quelques fonctions, les trucs simples sans plus... Mais tout s'apprend au fur et à mesure.

Bon aller c'est parti ! Tu vas voir que c'est très simple.

Je ne sais pas de quelle façon du veux l'installer ! J'avais pour habitude de travailler directement sur une page HTML du forum, ce qui est pour moi plus rapide et simple vue que ça me permet de prévisualiser à n'importe quel moment.
Mais depuis, je ne me dis que ce n'est pas une bonne chose de tout intégrer sur le forum par iframe ! On dispose de l'accueil, des templates, donc autant faire les choses correctement !

Tu es sans doute en phpBB2, alors on va mettre le html directement dans le template "overall_header", on pourrait aussi le placer dans "overall_footer".

Affichage --> Templates --> Overall_header

Repère (ctlr+f) :

Code:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

Et juste au dessus, colle ce code :

Code:

        <ul id="mes_menus">
 
            <li class="galerie"><a target="_parent" href="ton lien"></a></li>
            <li class="discut"><a target="_parent" href="ton lien"></a></li>
            <li class="codes"><a target="_parent" href="ton lien"></a></li>
            <li class="commande"><a target="_parent" href="ton lien"></a></li>
            <li class="contact"><a target="_parent" href="ton lien"></a></li>
        </ul>



Remplace "ton lien", par tes liens. Attention à ce que les "class", correspondent aux class images que tu mettras dans ton CSS.

Tu peux rajouter ou supprimer cette ligne :

<li class="ton_ class"><a target="_parent" href="ton lien"></a></li>

Autant de fois que tu en as besoin.

Juste en dessous, tu colles ce script de fonction jQuery qui va nous permettre de faire bouger les menus :

Code:

        <script type="text/javascript">
            $(function() {
                $('#mes_menus a').stop().animate({'marginLeft':'-75px'},1000);

                $('#mes_menus > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-75px'},200);
                    }
                );
            });
        </script>

.animate --> Cette fonction nous permet d'animer ce menu, là il est à gauche, on met alors des marges "négative".
Si le menu était à droite, ce serait des marges normales, donc sans le "-".

marginLeft':'-75px' --> A régler selon la largeur que tu veux camoufler.

marginLeft':'-2px' --> Correspond à l'état ouvert, tu peux mettre 0, j'ai mis 2 pour camoufler la bordure.

Le dernier chiffre correspond à la vitesse du mouvement en millième de seconde, plus la valeur est grande, et plus lent sera le mouvement.

En bref le code dit "l'animation stop à -75px de la gauche", si on le survol, l'animation stoppera à -2px de la gauche pour revenir à -75px quand il n'est plus survolé.

On ne spécifie que les fonctions. La librairie jQuery étant déjà intégrée à toutes les pages de nos forums actifs.

Maintenant la partie CSS :

Affichage --> Couleurs --> Feuille de style CSS

Spoiler:

A "#mes_menus ", tu choisis la position. Là je l'ai placé à gauche et à 50px du bas.

La marge négative de "ul#mes_menus li a" , doit correspondre à la marge négative du script.

Là on a mis la fonction .animate sur une liste, tu peux faire exactement la même chose sur des divs, spans ou autres...

Tu trouves sur mon forum bien d'autres façons de l'utiliser, ici par exemple, tu ne peux mettre qu'une image et un seul lien par menu, j'en ai fait d'autres qui permettent le rajout de divs, spans, paragraphe et du coup de mettre plusieurs liens, textes, images par menu, ce qui est plus pratique selon ses besoins.

Aides toi des commentaires pour le personnaliser.

Bonne soirée.

[Manga D.raw]

Merci beaucoup d'avoir tout détaillé ! :O
Je penses que je vais m'en sortir ^^
Je t'informerais si j'ai un problème ou autre demain =)
Bonne soirée et encore merci !!

[Manga D.raw]

Désolé pour le double post (qui me sert de up aussi xD)
Mais voilà j'ai un problème:
Quand je veux ajouter une image (je met donc le l'url de mon image comme indiqué) rien ne se passe...
Les menus déroulants restes de couleur unique....

Voilà ! C'est mon seul problème =)
En tout cas je te remercie infiniment pour ton aide qui m'a été précieuse

[quierra]

Coucou, dur de te réponde sans voir le code ou la page.
Dans le html donc le template, tu mets juste le lien comme "https://forum.forumactif.com/". Ton image ou icône, tu la places dans ton css.
Il faut bien sur que le "class" dans le html, corresponde au class dans ton css.

<li class="commande"><a target="_parent" href="ton lien"></a></li>

=

ul#mes_menus .commande a{ background-image: url(adresse de l'image);}

Quand tu rajoutes un menu, il faut renommer son class, et idem dans le css.

Postes moi ton code si tu as encore des problèmes.

Bonne journée.

[Manga D.raw]

Effectivement, j'avais rajouté une majuscule alors qu'il y en avait pas ^^
C'est bon ! tout marche correctement !!
Je te remercies beaucoup pour ton aide !!