Créer un menu coulissant

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

Résolu Créer un menu coulissant

Message 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 !


Dernière édition par Bad Sushi le Dim 12 Sep 2010 - 22:09, édité 1 fois

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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.

Démyx
****

Masculin
Messages : 287
Inscrit(e) le : 04/04/2007

http://khjeuxrpg.fr-bb.com/
Démyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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/

demeter1
+ Hyperactif +

Masculin
Messages : 8224
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

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

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

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

Bonjour,

Où en est votre problème ? Est il résolu 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 merci

A bientôt sur ForumActif
Smile

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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.

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

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

Okay Smile


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

  • http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/
  • http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/
  • http://www.hotajax.org/2010/07/14/slide-box-%E2%80%93-a-jquery-plugin/
  • http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
  • http://web-kreation.com/wordpress/add-a-showhide-login-panel-to-your-wordpress-theme-using-mootools/

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

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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 ?

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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 ?

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

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

Petit up Wink

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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:
<!--Start Lightbox-->
<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>
<!--End Lightbox-->

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:

<!--START DIV Lightbox-->
                <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>
<!--END DIV Lightbox-->

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.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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 résolu 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

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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 !

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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.

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

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

Up \o/

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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 ...

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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 !

Bad Sushi
***

Féminin
Messages : 163
Inscrit(e) le : 04/08/2009

http://lunaocra.bbfr.net/
Bad Sushi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu coulissant

Message 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.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea 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