Catégories déroulantes

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Catégories déroulantes

Message par Manga D.raw le Dim 20 Mar - 14:43

ç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 =)



Dernière édition par Manga D.raw le Jeu 7 Avr - 18:10, édité 1 fois

Manga D.raw
***

Masculin
Messages : 100
Inscrit(e) le : 18/04/2010

http://mangadraw.forum-pro.org/
Manga D.raw a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par Manga D.raw le Sam 26 Mar - 19:08

Un petit up =)

Manga D.raw
***

Masculin
Messages : 100
Inscrit(e) le : 18/04/2010

http://mangadraw.forum-pro.org/
Manga D.raw a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par Natsoumie le Sam 2 Avr - 21:55

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.

Natsoumie
****

Féminin
Messages : 470
Inscrit(e) le : 14/07/2007

http://www.alderia.biz
Natsoumie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par Manga D.raw le Dim 3 Avr - 11:45

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

Manga D.raw
***

Masculin
Messages : 100
Inscrit(e) le : 18/04/2010

http://mangadraw.forum-pro.org/
Manga D.raw a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par Natsoumie le Dim 3 Avr - 15:47

Quierra est inscrite sur FA.

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


Natsoumie
****

Féminin
Messages : 470
Inscrit(e) le : 14/07/2007

http://www.alderia.biz
Natsoumie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par quierra le Dim 3 Avr - 22:09

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:
ul#mes_menus {
position: fixed; /* On fixe les menus */
margin: 0px; /* marge exterieur */
padding: 0px; /* marge interieur */
bottom: 50px; /* positionné à 50px du bas */
left: 0px; /* positionné à 0px du bord gauche */
list-style: none; /* pas de style pour la liste */
z-index: 999; /* place les menus au dessus de tout le reste */
}

ul#mes_menus li {
width: 90px; /* largeur des menus */
margin-bottom: 4px; /* marge inferieur */
}

ul#mes_menus li a {
display: block; /* defini le menu en blok */
margin-left: -75px; /* margin exterieur negative gauche */
width: 90px; /* largeur */
height: 70px; /* hauteur */
background-color:#c7cac6; /* couleur de fond */
background-repeat:no-repeat; /* repetition du fond */
background-position:center center; /* position du fond */
-moz-border-radius:0px 9px 9px 0px; /* angles arrondis */
-webkit-border-radius:0px 9px 9px 0px; /* angles arrondis */
border-radius:0px 9px 9px 0px; /* angles arrondis */
border:1px solid #323630; /* bordure */
-moz-box-shadow: 0px 0px 5px #000; /* ombre portee */
-webkit-box-shadow: 0px 0px 5px #000; /* ombre portee */
box-shadow: 0px 0px 5px #000; /* ombre portee */
opacity: 0.7; /* opacite */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* opacite pour ie */
}

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

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

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

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

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

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.

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par Manga D.raw le Lun 4 Avr - 0:05

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

Manga D.raw
***

Masculin
Messages : 100
Inscrit(e) le : 18/04/2010

http://mangadraw.forum-pro.org/
Manga D.raw a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par Manga D.raw le Mar 5 Avr - 22:16

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 Very Happy

Manga D.raw
***

Masculin
Messages : 100
Inscrit(e) le : 18/04/2010

http://mangadraw.forum-pro.org/
Manga D.raw a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par quierra le Jeu 7 Avr - 14:47

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 "http://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.





quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories déroulantes

Message par Manga D.raw le Jeu 7 Avr - 18:10

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

Manga D.raw
***

Masculin
Messages : 100
Inscrit(e) le : 18/04/2010

http://mangadraw.forum-pro.org/
Manga D.raw a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum