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

Publications (X)HTML et CSS Discussion :

Un menu déroulant en CSS3


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut Un menu déroulant en CSS3


    Je vous propose une traduction de l'article anglophone CSS3 dropdown menu publié par Catalin Rosu sur son blog Red Team Design.

    Vous pouvez bien entendu faire part de vos remarques, commentaires ou suggestions.

    Un menu déroulant en CSS3

    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Rédacteur
    Avatar de thierryler
    Homme Profil pro
    Inscrit en
    Octobre 2007
    Messages
    4 078
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 078
    Points : 12 815
    Points
    12 815
    Par défaut
    Très sympa.

    Un zip en cadeau ?
    Thierry Leriche-Dessirier
    Consultant Java JEE Web Agile freelance
    Rédacteur pour Developpez
    Professeur de Génie Logiciel à l'ESIEA

    Site : http://www.icauda.com / Linked'in : http://www.linkedin.com/in/thierryler / Twitter : @ThierryLeriche

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    J'ai considéré qu'il n'y avait pas forcément besoin d'une archive pour cet exemple vu que l'ensemble est disponible sur la démo.
    Il suffit d'afficher ou de sauvegarder le code source pour avoir tout à disposition.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Membre émérite

    Homme Profil pro
    Software Developer
    Inscrit en
    Mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 470
    Points : 2 368
    Points
    2 368
    Par défaut
    Merci, en effet article sympa.

    Je me permet de critiquer ton article pour que tu puisse l'améliorer. Tu ne détaille pas assez ton code et tes propos.
    Par exemple pour IE ce serait bien de dire en une phrase en quoi "zoom:1" améliore les choses.

    Points positifs:
    - Qualité.
    - Références aux articles connexes.

    Par ailleurs je n'avais encore jamais rencontré le sélecteur ":after", ca me sera tres utile.

    Merci beaucoup

  5. #5
    Membre actif Avatar de tim974
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    175
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 175
    Points : 222
    Points
    222
    Par défaut
    L'article est intéressant.

    Néanmoins, je regrette les liens / définitions en anglais. ça aurait été bien d'aller jusqu'au bout des choses et proposer du wiki en français.

    En tout cas, merci beaucoup pour cet article, il m'est déjà utile.
    C'est en forgeant que l'on devient forgeron et c'est en sciant que Leonard de Vinci ...

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Analyste Programmeur
    Inscrit en
    Mai 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Hérault (Languedoc Roussillon)

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

    Informations forums :
    Inscription : Mai 2012
    Messages : 6
    Points : 9
    Points
    9
    Par défaut Sympa
    Bonjour,

    Je le trouve vraiment sympa ce menu déroulant en css.
    Néanmoins, je regrette qu'il n'y ait pas de navigation dans le menu au clavier, afin de respecter certaines règles d'accessibilité WCAG définies par le W3C...

  7. #7
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2012
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2012
    Messages : 2
    Points : 3
    Points
    3
    Par défaut aide
    Bonjour j'aimerai savoir comment fait-on pour ajouter un autre sous menu :s

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Il suffit de regarder le code de l'exemple...
    http://red-team-design.developpez.co...css3/fichiers/
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2012
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2012
    Messages : 2
    Points : 3
    Points
    3
    Par défaut merci
    merci lol dsl je suis un peu bete sur les bord ^^

  10. #10
    Nouveau Candidat au Club
    Homme Profil pro
    Technicien réseau
    Inscrit en
    Juin 2013
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien réseau
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Juin 2013
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    Bonjour à tous,

    Merci pour votre article vraiment super sympa !

    Toutefois, pourriez-vous m'aider à mettre en place un menu uniquement linéaire (et non en colonne) pour les éléments de niveau 2, car je n'arrive pas ?

    Quels sont les éléments du CSS à modifier ?

    En vous remerciant.

    Cordialement,
    Julien

  11. #11
    Nouveau Candidat au Club Avatar de J2m06
    Homme Profil pro
    SANS activité-Aide sur forums Mozilla
    Inscrit en
    Septembre 2013
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : SANS activité-Aide sur forums Mozilla
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Septembre 2013
    Messages : 1
    Points : 0
    Points
    0
    Par défaut
    bonjour

    bravo pour cet article , j'avais cherché un peu partout et je n'avais rien trouvé qui fonctionne correctement
    Votre code à fonctionné du premier coup avec Firefox ou IE de Win7
    (d'ailleurs j'ai mis un lien de votre site sur ma Faq )
    Par contre ce menu déroulant ne fonctionne pas avec Chrome !!
    (d"habitude c'est plutot IE qui me pose de problèmes )
    [edit] et c'est la même chose avec mon mobile!!!! (sous android))

    Pas de boite horizontale et le menu s'affiche verticalement
    Plutôt gênant

    Que faut il modifier (si c'est possible) ?
    qu'est-ce que j'ai oublié ?
    Merci d'avance

    ps: je n'y connait presque rien en html

    [edit] bon sans que je change rien Chrome affiche bien ma page d'accueil
    mais pas mon mobile (sous android)!

    [edit 2] : y a t il un pilote dans l'avion developpez.com !!!

    Bon en attendant une éventuelle réponse j'ai modifié ma page en mettant la barre (sidebar) à droite .
    Pas grave que le menu vertical de droite s'affiche tout en bas des pages sur un mobile lors d'un zoom.

    Par contre je ne suis pas arrivé à créer plusieurs niveaux de sous-menus
    comme dans ce chapitre
    Depuis l'écriture de l'article, le menu déroulant gère maintenant plusieurs niveaux de sous-menus.

  12. #12
    Futur Membre du Club
    Femme Profil pro
    ???????????????
    Inscrit en
    Janvier 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme

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

    Informations forums :
    Inscription : Janvier 2008
    Messages : 13
    Points : 9
    Points
    9
    Par défaut

  13. #13
    Nouveau Candidat au Club
    Homme Profil pro
    Vendeur Telecom
    Inscrit en
    Avril 2014
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Belgique

    Informations professionnelles :
    Activité : Vendeur Telecom

    Informations forums :
    Inscription : Avril 2014
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    Assez fan de ce menu.

    Il fonctionne parfaitemet, mais il y a un point qui me dérange.

    Comme le mentionne le lien d'exemple, http://red-team-design.developpez.co...css3/fichiers/ , je remarque que les intitulés (work, catégories,...) ne sont pas centré dans leur "parties respectives".

    Comment faire pour que les intitulés en questions soient centrés (et ceci indépendamment des sous-menus) ?

    J'ai déjà tenté bon nombre de possibilités, mais sans succès.

    Quelqu'un pour m'éclairer ?

    D'avance merci.

    Bonne fin de journée.

Discussions similaires

  1. [Article] Un menu déroulant animé en CSS3
    Par Bovino dans le forum Publications (X)HTML et CSS
    Réponses: 4
    Dernier message: 18/05/2013, 10h31
  2. [CSS 3] Menu déroulant en CSS3 - Problème de liens
    Par Angelo45 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 28/12/2012, 10h59
  3. [CSS 3] Un menu déroulant en CSS3
    Par Bovino dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 18/05/2012, 13h19

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