Créer un menu coulissant

par Bad Sushi le Ven 27 Aoû 2010 - 13:54

Bonjour à tous !

Alors pour faire court voici idéalement le genre de menu que j'aimerai faire pour mon forum : http://www.lotie.com/
Lorsque l'on va sur "quick menu" un petit menu descend avec des liens dedans et se referme aussitôt dès qu'on est plus dessus. Bon, sans aller à du flash ou je ne sais quoi, serait-il possible d'avoir un code basique qui me permette de mettre en place ce genre de menu et que je puisse par la suite customiser comme je veux ?

J'ai beau chercher sur le net des tutos de menu je n'en trouve pas qui puissent reproduire ce genre d'effet.

Il y a un autre genre aussi ici : http://www.dragonceleste.com/

Voilà, merci beaucoup pour votre aide !

par Démyx le Ven 27 Aoû 2010 - 15:36

Bonjour je ne sais pas ci ses posible chez forum actif, ne mélange pas site et forum, car pour les site les webmasteur utilise des logiciel souvent acheter pour réalisé ses genre de chose. et puis tres compliquer à réalisé, pour les plus par des logiciels0.

par demeter1 le Ven 27 Aoû 2010 - 15:47

Un petit lien qui devrait t'orienter vers quelque chose de similaire mais qu'il faut adapter pour qu'il corresponde à ton cas

http://blog.angechierchia.com/ajax-javascript/creer-un-panneau-de-login-coulissant-avec-jquery/

par Bad Sushi le Ven 27 Aoû 2010 - 16:08

Ha oui pas mal je vais jeter un oeil merci pour le lien !
Je reviens si j'ai des soucis, le sujet n'est donc pas résolu merci =)

par Ea le Dim 29 Aoû 2010 - 16:16

Bonjour,

Où en est votre problème ? Est il résolu ?
_____________________

Si vous n'avez pas eu de solutions, relancer régulièrement votre sujet (toutes les 24 heures au minimum).
Et pensez à expliquer votre problème règulièrement, à chercher par vous même et montrez que vous cherchez de votre côté et pas que vous attendez simplement d'une réponse.

_____________________

Lorsqu'un sujet est résolu :

Cliquez sur le bouton de votre premier message du sujet.

Cochez en dessous de la zone de message

Enfin validez avec le bouton

Pour remercier ceux qui vous ont aidés vous pouvez cliquer sur

A bientôt sur ForumActif

par Bad Sushi le Dim 29 Aoû 2010 - 16:18

J'ai bien mis qu'il me faut un peu de temps avant de pouvoir répondre !
Merci de ne PAS FERMER ce sujet !
Je n'ai pas pu encore tester le code j'essaie de le faire d'ici ce soir.

par Ea le Dim 29 Aoû 2010 - 18:05

Okay

Pour ce qui est du premier lien ces pages-ci y correspondent peut-être un peu mieux :

Pour le deuxième lien c'est juste un menu comme il y en a plein.

Cordialement.

par Bad Sushi le Dim 29 Aoû 2010 - 18:47

Bon alors, je comprends à peu près tout sauf le jquery. Je dois mettre ça où exactement ?

par Bad Sushi le Lun 30 Aoû 2010 - 15:26

Le troisième lien donné par Etana c'est vraiment l'idéal mais je ne comprends pas pour le Jquery ce que je dois télécharger ni où le mettre .. une idée ?

par Bad Sushi le Mer 1 Sep 2010 - 9:06

Petit up

par Adam_sfp le Mer 1 Sep 2010 - 15:28

Bonjour

Vous pouvez essayer ceci:

Héberger les fichiers ccs et js par exemple chez archive host ou sur un ftp
Editez votre template overall_header_new

recherchez </head> et collez juste au dessus ceci

Code::  <link rel="stylesheet" href="LIEN VERS LE FICHIER slidebox.css" type="text/css" media="screen" /> <link rel="stylesheet" href="LIEN VERS LE FICHIER-my-own-style.css" type="text/css" media="screen" /> <script src="LIEN VERS LE FICHIER slidebox.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#testZone").slideBox({width: "100%", height: "200px", position: "top"}); }); </script>

recherchez ensuite

Code:: <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

et collez derrière l' exemple de la démo (A vous de modifier comme vous voulez )

Code::  <div id="testZone"> <ul id="list-1" class="list"> <li class="header">Lorem lispum.</li> <li class="item"><a href="http://google.fr">google</a></li> <li class="item">Cras a mi at odio.</li> <li class="item">Vivamus egestas urna.</li> <li class="item">Furce gravida lectus.</li> </ul> <ul id="list-2" class="list"> <li class="header">Lorem lispum.</li> <li class="item">In blandit turpis.</li> <li class="item">Cras a mi at odio.</li> <li class="item">Vivamus egestas urna.</li> <li class="item">Furce gravida lectus.</li> </ul> <ul id="list-3" class="list"> <li class="header">Lorem lispum.</li> <li class="item">In blandit turpis.</li> <li class="item">Cras a mi at odio.</li> <li class="item">Vivamus egestas urna.</li> <li class="item">Furce gravida lectus.</li> </ul> <ul id="list-4" class="list"> <li class="header">Lorem lispum.</li> <li class="item">In blandit turpis.</li> <li class="item">Cras a mi at odio.</li> <li class="item">Vivamus egestas urna.</li> <li class="item">Furce gravida lectus.</li> </ul> </div>

Enregistrez et validez votre template.

*Vous pouvez modifier cette partie

Code:: $("#testZone").slideBox({width: "100%", height: "200px", position: "top"});

En changeant la taille et mettre bottom à la place de top.

Cordialement.

par Adam_sfp le Jeu 9 Sep 2010 - 13:40

Bonjour,

Où en-est votre problème ?

Deux solutions :

Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message,
Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté,

A bientôt sur ForumActif Smile

par Bad Sushi le Jeu 9 Sep 2010 - 15:37

J'ai pas encore eu le temps de tester, ne fermez pas le sujet svp merci !

par Bad Sushi le Ven 10 Sep 2010 - 16:36

Bonjour !
Alors j'ai testé tout ça. Bon, la bonne nouvelle c'est que ça m'affiche correctement ce que je devrais voir lorsque j'appuie sur le bouton qui permet de faire descendre le menu. La mauvaise c'est qu'il n'y a aucun bouton, le menu est déjà simplement ouvert :

Par contre j'a pas de overall_header_new mais overall_header tout court.
Et à propos de ça : "And of course, you'll need the jquery library available at jQuery". J'ai téléchargé le fichier mais je sais pas quoi en faire.

par Bad Sushi le Sam 11 Sep 2010 - 16:34

Up \o/

par Adam_sfp le Dim 12 Sep 2010 - 20:29

Bonsoir
Pour le menu c'est le menu inclus dans l'exemple à vous de le personnaliser.
Pour la bibliothèqoe Jquery elle est déjà sur forumactif il me semble.

Cordialement.

par Ea le Dim 12 Sep 2010 - 20:48

Exacte pour jquery me semble même qu'on s'est un peu mis à jour avec la version 1.3.2 et pour overall_header_new il a juste été renommé en overall_header très récemment.

Avec le code de adam il me semble qu'il devrait déjà y avoir des trucs quand on l'ouvre, tu as un lien où tu as essayé pour pouvoir voir si il y a une erreur ou si il manque quelque chose ?

Cordialement.

par Bad Sushi le Dim 12 Sep 2010 - 21:00

Oui voici le lien :
http://forumtestluna.forumactif.org/

Peut-être que vous pourrez m'éclairer sur ce que j'ai pas bien fait ...

par Ea le Dim 12 Sep 2010 - 21:20

Alors ceci ça sert à rien :

Code:: $(document).ready(function(){$("YOUR DIV").slideBox();});

Cela agira sur des balises du type :

Code:: <your><div> contenu </div></your>

Enfin ça n’entraînera pas d'erreur pour autant, par contre le :

Code:: <script src="http://sd-2.archive-host.com/membres/up/149310868642244013/slidebox.jstype="text/javascript"></script>

Il manque un espace et un " qui le rend inopérant :

Code:: <script src="http://sd-2.archive-host.com/membres/up/149310868642244013/slidebox.js" type="text/javascript"></script>

Juste avec cette correction chez moi ça fonctionne parfaitement Wink

( enfin après il y a moyen de changer l'html mis après le body pour changer le contenu et le css pour changer le style )

Cordialement.

par Bad Sushi le Dim 12 Sep 2010 - 22:07

Alors, je peux ouvrir le menu ça y'est mais par contre je peux pas le refermer <_<

EDIT : non j'ai rien dit c'est bon !

Merci beaucoup !

par Ea le Dim 12 Sep 2010 - 22:22

Okay ^^

Sinon chez moi certaines fois le script se charge plus lentement et je vois le truc une fraction de seconde, j'imagine qu'on peut résoudre ça en ajoutant dans le css ( PA > Affichage > Couleurs > Feuille de style CSS ) :

Code:: #testZone { display: none; }

Cordialement.

Créer un menu coulissant

Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant

Re: Créer un menu coulissant