Catégories déroulantes
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Catégories déroulantes
ça fait un moment que je cherche comment faire...
J'aimerais afficher quelque chose dans ce style sur mon forum =)
Merci pour vos réponses =)
J'aimerais afficher quelque chose dans ce style sur mon forum =)
- Spoiler:
Merci pour vos réponses =)
Dernière édition par Manga D.raw le Jeu 7 Avr 2011 - 18:10, édité 1 fois
Re: Catégories déroulantes
Un petit up =)
Re: Catégories déroulantes
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.
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.
Re: Catégories déroulantes
Ben à force de m'inscrire sur des forums...
Ma boite de messagerie est surchargé avec 300 messages par jours x')
Ma boite de messagerie est surchargé avec 300 messages par jours x')
Re: Catégories déroulantes
Quierra est inscrite sur FA.
Tu peux la contacter par mp ici-même.
Tu peux la contacter par mp ici-même.
Re: Catégories déroulantes
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.
Re: Catégories déroulantes
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 !!
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 !!
Re: Catégories déroulantes
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
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
Re: Catégories déroulantes
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.
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.
Re: Catégories déroulantes
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 !!
C'est bon ! tout marche correctement !!
Je te remercies beaucoup pour ton aide !!
Sujets similaires
» Des catégories déroulantes ?
» Informations "déroulantes"
» Problème d'affichage des Annonces déroulantes
» Impossibilité d'ouvrir les barres déroulantes.
» changement police listes déroulantes
» Informations "déroulantes"
» Problème d'affichage des Annonces déroulantes
» Impossibilité d'ouvrir les barres déroulantes.
» changement police listes déroulantes
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum