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

HTML Discussion :

[W3C] Menu arborescent fixe simple


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 88
    Par défaut [W3C] Menu arborescent fixe simple
    bonjour, j'aimerais creer un menu arborscent simple et fixe comme ça:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    TEST
    .
    .....Mission
    .
    .....Histoire
    .    .
    .    .....yopla
    .    .
    .    .....qwailà
    .
    .....monqizue
    Je pourrais très bien le faire avec des tableau mais je préfererais essayer avec les css. Mais les dans mes recherches je ne trouve que des choses bien complique qui ne correspondent pas à ce que je cherche.

    D'avance merci ^^

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Regarde du côté de la propriété CSS "display".

  3. #3
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 88
    Par défaut
    ben oui mais ça ne m'aide pas.
    A noter que la mise en page devra ressembler quasimenet à ça (avec des points et tout et tout).
    Mais dans mes essais je butes sur la mise en place des points ainsi que ces saloperies de marges IE vs FF

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div id="id1" onclick="affich()">TEST</div>
    <div id="id2" style="display:none">Mission</div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <script language="javascript">
    function affich(){
       document.getElementById("id2").style.display = "block";
    }
    </script>
    Je te laisse adapter et compléter ce code à ta convenance.

  5. #5
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 88
    Par défaut
    Argh je vois que je me suis fait mal comprendre
    Je n'ai pas besoin de cacher le menu ou de faire apparaitre des morceau quand on clique dessus.
    Moi je veux juste un affichage comme celui-là. En utilisant des ul et des li imbriqués pour obtenir ce résultats.
    Mais je n'y arrive pas notement pour mettre des "."

    La mise en page ressemblera quasi trait pour trait à ça. Je veux juste optimiser la chose en évitant de devoir creer un tableau ou mettre des bêtes points dans le code html

  6. #6
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Oh, ok ! Au temps pour moi alors, j'avais mal compris, en effet.

    Juste une chose : Les listes en CSS sont très chiantes, elles ne sont pas du tout interprétées de la même manière par IE et Firefox, notamment en ce qui concerne les margin et padding.

  7. #7
    Membre chevronné
    Avatar de ilood
    Inscrit en
    Mars 2005
    Messages
    468
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 468
    Par défaut
    Salut

    Avec une petite recherche on trouve ceci aussi.
    Il reste à changer le css pour afficher les bordures en pointillés.

  8. #8
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 88
    Par défaut
    Les listes imbriquée ça marche, mais comme IE et FF interprête ça complétement différement, ya des décalages partout.
    Vivement que le navigateur le plus utilisé du monde soit conforme aux validations w3c ...
    Vu, mais j'avoue que tout ces hack et la longeur du css me laisse perplexe.
    Je crois que je vais passer par ces bon vieux tableaux.
    Merci quand mêm ;-)

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

Discussions similaires

  1. menu arborescent qui se referme
    Par goodvibs dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 23/11/2006, 11h17
  2. Menu arborescent;
    Par cisse18 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 29/03/2006, 09h16
  3. [Site Web]Comment former une table type Menu arborescent?
    Par Zebeber dans le forum Décisions SGBD
    Réponses: 6
    Dernier message: 24/03/2006, 08h55
  4. [Conception] Menu arborescent dynamique
    Par Azanael dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 12/03/2006, 14h41
  5. Menu vertical fixe
    Par batmat86 dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 10/01/2006, 02h54

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