IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

afficher et masquer un sous menu


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Rédacteur

    Avatar de arnolem
    Profil pro
    Inscrit en
    Février 2005
    Messages
    2 852
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2005
    Messages : 2 852
    Par défaut afficher et masquer un sous menu
    Bonjour a tous, j'ai besoin de vos talent de javascripteur pour m'aider à accomplir ma lourde tache ; stop au blabla et voici le problème :

    Je souhaite faire un menu avec 3 éléments par exemple et des sous elements a chaque fois qui peuvent etre ouvert ou fermé.
    A l'image de ce menu issu de windows XP :
    Nom : menu.gif
Affichages : 122
Taille : 2,8 Ko

    Je n'ai pas spécialement besoin de l'apparition progressive du menu mais je voudrais pouvoir faire disparaitre et apparaitre les sous menu à l'aide du meme bouton.
    Pouvez vous me dire comment ça se passe ? merci bien

  2. #2
    Rédacteur

    Avatar de arnolem
    Profil pro
    Inscrit en
    Février 2005
    Messages
    2 852
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2005
    Messages : 2 852
    Par défaut
    bon je pense que je vais utiliser le framework scriptaculous-js-1.6.1
    il me parais bien, si vous avez d'autre piste, n'hésitez pas.
    merci

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    224
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 224
    Par défaut
    Mouarf, j'avais pas vu ton topic, je suis en mesure d'y réponder.

    C'est pas compliqué!

    Pour commencer:

    Tu fais un bouton avec pour id 'boutton'
    et un div avec pour id 'menu' avec ce que tu cacheras après.

    Ensuite, le javasript!

    Pour le début, maintenant la fonction qui va cacher:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function hide_menu()
     {
     document.getElementById('menu').innerHTML = '';
     document.getElementById('boutton').onclick = 'show_menu()';
     }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    function show_menu()
     {
     contenu_menu = '.......';
     document.getElementById('menu').innerHTML = contenu_menu;
     document.getElementById('boutton').onclick = 'hide_menu()';
     }
    Comme tu le vois, ici je n'ai pas utilisé Ajax.

    Personnelement, j'utilise beaucoup Ajax, mais du fait que ca soit une bibliothèque.

    Je me suis créé plusieurs fonctions, en fonction de ce que je voulais dans le genre:

    div(path, ID) => Rempli un div d'id=ID avec le résultat texte du fichier du path.

    div_in_empty(ID) => Vide un div de son contenu (revient à le cacher).

    div_in_body(path) => Sur mon portail, le div body représente LA zone de texte la plus souvent changé. Va donc récupérer le contenu texte de path pour l'afficher dans le div ID='body'.

    check(ID, path, rep_text, rep_icon, change_style, out, file, inID, mode)
    Ce serait long à expliquer!

    En gros: cette fonction est appellée lors d'un déclencheur onkeyup dans un input, en fonction des options, il y aura des sortes de modifications, et la fonction Ajax va faire la vérifiaction immédiate, en temps réel, de la saisie de l'utilisateur.

    check_select(ID, path) => Cette fonction met à jour la BDD, elle est appellée par un déclencheur onchange placée dans un select, ici, on ne vérifie rien vu que c'est le créateur du site qui a placé les valeurs dans le select .

    Et encore plein d'autre!!!

    Ce que je veux te montrer par la, c'est que ca ne vaut pas le coup que je te le fasse en Ajax, et d'ailleur toi non plus ne le fait pas si tu n'as que ce menu à dynamiser. Perso, j'utilise ces fonctions dans toutes mes pages plusieurs fois.

    Je peux tout de même te le faire en Ajax, si tu en as envie.

    Bonne continuation!

    Ps: si tu es intéréssé par Ajax, regarde mon projet: http://dreamylandtrade.free.fr/kalas...?base=register

  4. #4
    Rédacteur

    Avatar de arnolem
    Profil pro
    Inscrit en
    Février 2005
    Messages
    2 852
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2005
    Messages : 2 852
    Par défaut
    et ben j'ai déja fais avec la bibliotheque, ça donne ça :
    http://brayon.fr/v1/menu_toggle/test.htm

    mais j'ai pris que les 3 pages que j'avais besoin,
    je vais regarder ta méthode, sinon c'est long a charger des pages de javascript sur chaque page ?

    Autre chose, tu remarquera que mes menu sont fermé par defaut, si je désactive javascript, il ne peuvent pas s'ouvrir, il y a t'il un moin de savoir si javascript est activé ? en javascript ou sinon en php ?
    merci bien

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    224
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 224
    Par défaut
    Pas mal ton exemple

    Long à charger? non.

    Le javascript activé ou non, c'est pas simple.

    Je sais que c'est possible en PHP, mais c'est embêtant, si je me souviens bien, il faut passer par un formulaire.... Bof.

    Je te conseille de les ouvrir par défaut.

    Sinon, ça serait cool que les gens ouvre le JS par défaut!

  6. #6
    Rédacteur

    Avatar de arnolem
    Profil pro
    Inscrit en
    Février 2005
    Messages
    2 852
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2005
    Messages : 2 852
    Par défaut
    Citation Envoyé par kalash_jako
    Je te conseille de les ouvrir par défaut.
    Sinon, ça serait cool que les gens ouvre le JS par défaut!
    Ouvert par defaut, ok mais la deusieme phrase, j'ai pas bien tout compris, tu veux que je face quoi ?
    Bon je vais voir du coté de la FAQ php si je ne trouve pas

  7. #7
    Expert confirmé

    Avatar de denisC
    Profil pro
    Développeur Java
    Inscrit en
    Février 2005
    Messages
    4 050
    Détails du profil
    Informations personnelles :
    Âge : 45
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Service public

    Informations forums :
    Inscription : Février 2005
    Messages : 4 050
    Par défaut
    Citation Envoyé par arnolem
    Pouvez vous me dire comment ça se passe ? merci bien
    Rien à voir avec Ajax.

    Scriptaculous est une excellente bibliothèque en effet.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CSS 3] Masquer mon sous-menu
    Par clem62173 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 01/09/2009, 16h33
  2. Mon sous-menu n'affiche pas le bon fond au passage de la souris
    Par luna6 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 09/03/2009, 09h33
  3. Sous-menu qui ne s'affiche pas sous Mozilla
    Par philippef dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 08/08/2008, 19h11
  4. Afficher/cacher sous menu
    Par tazmania dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 14/05/2007, 12h42
  5. Afficher/Cacher un sous menu au clic
    Par Toutankharton dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 28/09/2005, 16h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo