FrogWeb, une grenouille sur la toile

FrogWeb est un petit site sans prétention pour répondre simplement à une question fréquemment posée sur les forums : « comment fait-on un menu déroulant ? »

Bien sur il existe de nombreux tutos sur le web, mais bien souvent ils ne sont pas mis à jour et utilisent des techniques un peu vieillottes.

Chose que je leurs reproche également, c’est de styler le menu avec quantité de lignes de code CSS ce qui perds facilement le débutant.

Vous trouverez donc un menu totalement épuré sur ce site pour la bonne compréhension du mécanisme.

Si vous voulez me contacter vous pouvez le faire en laissant un commentaire.

Vous pouvez également le faire par l’intermédiaire du openclassrooms.com (ancien site du Zéro), plus pratique si vous avez du code. Mon pseudo est Frogweb.

Bonne visite.
FrogWeb

30 commentaires sur “FrogWeb, une grenouille sur la toile

  1. Salut. Apparemment tu as opter pour du WordPress, tu sais qu’il existe des milliers de thèmes très jolies. Plus jolis que celui là sans vouloir t’offenser. Si tu veux que ton site soit visiter, il doit plaire à l’oeil, conseille de WebDesigner 🙂

    • Je trouve ce commentaire complètement inutile. Apparemment, tu n’as pas lu l’entête. Et moi; je cherche du code dépourvu de fioriture justement pour comprendre le mécanisme… le design, c’est qu’une apparence ajouté une fois le squelette mis en place. Tu es designer, tu dois bien le savoir non? Encore un qui se croit dieu du développement web… pffffff
      Moi je dis bravo pour ce site qui correspond à mes attentes.

  2. Salut Kamel,
    j’ai pris un template un peu au hasard et le plus sobre possible (j’aime bien le « dépouillé »),
    pour avoir le moins de modifications à faire.
    Mais il n’est pas dit que je ne changerai pas pour un autre plus coloré.
    La partie webdesign d’un site n’étant pas mon fort…
    Merci de tes conseils ^^

    • N’écoute pas ce que raconte Kamel, il est sûrement aussi bon en web-design qu’en orthographe.
      Plus sérieusement, pour ce genre de site, qui présente de outils visant à faciliter le développement d’un site web, un design épuré comme celui ci est tout indiqué.

      Quand on arrive ici, on comprend directement l’essentiel, car l’œil n’est pas attiré par des éléments de graphisme bariolés.

      Un site doit avant tout être cohérent et accessible, car ce qui est design ou non relève surtout du gout personnel, et de ce fait ne peu pas plaire à tout le monde.

      Kamel à dit:
      « Si tu veux que ton site soit visiter, il doit plaire à l’oeil, conseille de WebDesigner »
      Ce qui est pour moi une erreur de débutant en design web.

      Je te dirai plutôt ceci;
      Si tu veux que tes outils soient utulisés, présente les d’une manière aussi efficace que possible.

      Bonne continuation !

      • Salut,
        je ne ferais pas de commentaire, chacun est libre de penser et dire ce qu’il veut à propos du site.
        Juste dire que côté référencement ça se passe bien pour lui, il suffit de taper « menu deroulant » dans un moteur de recherche pour s’en apercevoir.
        Et c’est justement ça qui fait des visites, pas un « beau » design ^^

  3. Bonjour Ami du Zéro,

    Mon nom ne doit plus t’évoquer grand chose dorénavant, mais je souhaitais tout de même te souhaiter bonne chance pour cette refonte !
    Je continue de prendre ton site pour référence lorsque je dois exposer comment créer un menu déroulant.
    Je suis moi même en reconstruction de mon site pour parvenir à quelque chose qui soit vraiment comme je le souhaite.

    En te souhaitant une bonne semaine,

    Ivelfan

  4. Salut Ivelfan,
    j’ai une bonne mémoire et J’ai encore un échange de messages avec toi dans mes MP sur le site du Zéro ^^
    Merci beaucoup pour ton commentaire, c’est très encourageant !
    Bon courage à toi pour ton site , et si tu as besoin tu sais où me trouver ^^

  5. J’avais beaucoup apprécié vos commentaires sur le MOOC Html5-Css3 et c’est là que j’ai trouvé votre site.
    Merci beaucoup pour votre code sur le menu vertical en accordéon que je viens de mettre en application sur un site sur lequel je travaille actuellement et cela marche très bien.

    J’ai une question : vous avez mis dans le code « #menu-accordeon ul li a, #menu-accordeon li:hover li a { font-size: 0.95em} » (le 0.95em est de moi !) alors que j’ai gardé seulement « #menu-accordeon li:hover li a { font-size: 0.95em} » et cela marche tout aussi bien : pouvez-vous me commenter « #menu-accordeon ul li a » sur lequel je m’interroge ?

    Si vous avez besoin de tout le dossier de mon site (toujours en local et pas encore sur le web), puis-je vous l’envoyer par DROPBOX car je maîtrise encore mal l’email du site du zéro ?

    En tout cas, merci beaucoup car vous m’avez bougrement bien aidé !!!

    stol2dive

    • Salut,
      merci pour ton commentaire.
      Tu as bien fait de me le faire remarquer ^^.
      Effectivement il est inutile de le préciser pour #menu-accordeon li:hover li a puisque c’est la même chose que #menu-accordeon ul li a
      Tu as également raison de mettre en em, c’est toujours mieux pour une taille de font (je n’ai pas encore pris le pli…)
      Je vais modifier mon code.
      Merci à toi.

  6. Salut Frogweb,

    Je tiens à vous remercier pour votre menu horizontal ! 😉
    Je l’ai modifié à ma sauce et effectivement il est très simple à comprendre !

    Par contre si je peux me permettre, j’ai apporté quelques améliorations comme des « z-index » sur les : #menu li:nth-child(2) et (3) car en responsive web design les sous menu passais sous les ul, donc on n’y a pas accès 😉

    Par contre la taille des ul n’est pas la même sous google chrome que sous firefox, je n’ai pas encore réussi à avoir la même taille partout mais j’y travail ( j’ai essayé de fixer le font-size: 14px; des ul mais sans résultats probant ^^

    Merci à vous encore une fois, très beau travail CSS ! 😉

    • Salut Wordwide,

      merci du retour et de ce commentaire bien agréable ^^
      C’est vrai que le z-index est nécessaire dans certaines circonstances. Je vais en rajouter un.
      Je pense qu’en le mettant tout simplement sur les sous menu ça devrait le faire.
      Pour la taille je vais regarder. C’est vrai que je me suis focalisé sur Firefox. Ce n’est pas bien ^^

  7. Bonjour, Le site est génial et le tout ma bien servis 😀
    Ceci dit dans le cas d’un menu déroulant horizontal je suis dans l’embarras puisque j’ai besoin que ce menu soit accessible sur tablette et/ou smartphone
    Dans l’idée avec une petite flèche sur la droite de chaque menu pour que au click le sous menu caché apparaisse.
    Comment faire est-ce qu’un aiguillage serait possible.
    Merciiiii

  8. Hello !
    Bravo pour ton site, mais, juste une remarque, le titre est « Un menu déroulant, tout simplement… » mais sur ton site, tu y mets bien plus qu’un menu déroulant 😉

    • Salut,

      c’est pas faux ^^
      Mais c’est plus un slogan qu’une description du contenu du site.
      Et puis c’est un « menu déroulant tout simplement », pas « un menu déroulant seulement » ^^
      Merci de ton appréciation.
      je vois que tu te débrouille bien aussi, j’aurais bien voulu commencer aussi jeune que toi…
      PS : tu as une petite erreur dans ton code html. Contactes moi sur OCR.

  9. Salut !
    Tout d’abord merci car sur ce qui était SdZ tu m’as aidé pour mon menu déroulant et peut-être m’aideras-tu encore… et je viens de m’apercevoir que ton site justement était focalisé sur ces fameux menus, donc voilà, ajouté aux favoris ça peut toujours servir…
    Encore merci et à bientôt ! 🙂

  10. Ce que je cherche, c’est d’eviter le desequilibre que provoque un bloc le bloc ul des qu’on reduit la fenetre et qu’un des li passe en dessous. Il faudrait que, des qu’il n’y a pas la place pour tous les li , tous les blocs occupent toute la place. Je precise que je n’ai pas encore essaye ton code, je vais essayer de l’appliquer a mon menu.

    • Salut,

      il va falloir que tu utilises les media-queries.
      L’idée c’est de repasser, à une certaine largeur, les li en display:block au lieu de inline-block.
      T’expliquer serait un peu long et le code dépendra de ce qu’on appelle les points de rupture.
      Je t’invite donc à chercher des tutos.

  11. salut n.je suis un debutant en programmation web.
    jai besoin d’un cour complet sur le HTML5 et Css 3.avec toute les nouveautés.
    merçi d’avance.

  12. Bonjour,
    Excuse moi de te déranger mais je voudrais te montrer mon code a propos d’une carte de pays interactive, est-ce que tu voudrais y jeter un coup d’oeil s’il te plait?
    Merci d’avance quelle que soit ta réponse !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*