FrogWebFrogWeb 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
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.
Je le trouve pour ma part très bien 😉
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 ^^
Merci pour ce site, il me permet d’approfondir mes connaissances après le cours de Mateo21 sur l’html5 et le CSS3 !
Bonne continuation !
Merci pour ton commentaire Macska ^^
Très bonne initiative !! Merci
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.
De la merde ton site
Merci pour ton avis éclairé.
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 ^^
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
Salut Zollinger,
il va falloir voir du côté des medias querries.
Quelques liens qui pourront t’aider :
http://goetter.fr/nav/
http://etienner.fr/billet.php?id=17 (avec bootstrap)
http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
Froggy, très, clair, très bien fait. Bravo et merci.
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.
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 ! 🙂
Salut,
Merci de ton commentaire. ^^
Slt frogWEB merci pour les tutos
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.
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.
Salut,
je ne donnes pas de cours, en tout cas pas sur le site.
Je te conseilles ça :
Openclassrooms
et ça :
Codeacademy
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 !
Explications excellentes, véritable talent de pédagogue. J’ai réussi à créer un magnifique menu grâce à vous.
Bonne continuation
salut,
merci à toi pour ton message, c’est très agréable, ça me touche vraiment.
Ma récompense ce sont des messages comme le tien ^^
wow quel site de merde!
Et quand je pense que tu OSES donner des conseils au autres dans des forums
Ah tiens, un gars qui a dû nous mettre un code tout pourri sur le forum et à qui j’ai dû tirer les oreilles…
Et évidemment plutôt que de se remettre en question ça préfère les insultes. L’ego démesuré du débutant qui se prend pour un caïd.
En tous cas merci de ton commentaire éclairé et constructif.
J’aurais pu mettre ton message dans les indésirables mais tout le monde peut donner son avis sur mon site.
Même le tien, qui sort plus de ton trou du cul que de ton cerveau.
Ne l’écoute pas Frog, cela ne sert à rien !
Pour ma pars je t’ai laissé un commentaire plus bas 😉
Salut Frog web,
déjà merci pour ton mini-tutoriel,
j’ai une petite question en CSS : Comment faire en sorte que l’on puisse descendre avec la souris dans une page à l’intérieur d’une page ? Par exemple, dans les « tchats » (je l’écris en phonétique pour que ce soit plus compréhensible) tu peux descendre avec la molette pour voir les messages précédents, idem avec les commentaires sur fb etc …
En attendant, encore merci,
Bonne continuation !
Salut,
c’est assez simple, tu défini un height à l’élément qui doit être « scrollable » et tu lui mets :
overflow-x: hidden;
overflow-y: scroll;
Merci beaucoup !!
Tout marche grâce à toi !
Je suis en train de faire un mini réseau social mais je ne savais pas comment on pouvait faire défiler les commentaires ^^
Merci encore,
MoiMeYo
PS : n’écoute pas les rageux et les toxics 😉
Salut Frog !
Désolé de te déranger encore, ton explication m’a beaucoup servie mais il y a un petit problème (quand je dis petit c’est parce que ce n’est pas grave mais c’est mieux sans ^^) : quand je charge la page (avec le chat) il va par défaut sur les premiers messages et pas en bas où se trouve le formulaire pour envoyer son message (input de type text et un autre input de type submit).
Voilà, en attendant ta réponse je retourne coder 😉
MoiMeYo
Salut Froggy,
Un bonjour amical car j’viens de voir que mon p’tit portfolio a fêté ses 3 ans, et tu es en partie responsable de son existence ! Continue à faciliter la vie des noob et prête pas attention aux rageux 😉 A ciao !
Je suis sûr que c’est grâce à mon beau logo que mon site marche ^^
bonne continuation à toi !
Bonjour,
Je trouve ce toto très sympa. J’ai besoin de mettre en forme très simplement mon site (qui présente mon CV de manière épurée. Je vous laisse le lien en bas de ce message. Je vous fais le topo : je suis ergonome, et je souhaite montrer à des recruteurs que je saurais interagir avec des développeurs sur des projets multimédia. Je ne sais pas développer, mais c’est pour dire que si on me parle code, ce ne sera pas du chinois (j’ai déjà travaillé sur un projet de serious game). Comme je ne voulais pas m’embêter, j’ai piqué le template d’une vieille page SFR avec un carrousel, et je l’ai adapté (soyez indulgent si vous trouvez que mon code vous donne la nausée… :-)) Sauf que depuis quelques mois, le carrousel fonctionne toujours, mais c’est du « brut de pomme » comme vous dites. J’ai perdu le design très sympa qui ressemblait à ça (mais en vertical) : textyserver.appspot.com
Ce qui me gène également c’est que que les liens ne sont plus réactifs (le pointeur ne devient pas un doigt quand on les survole et ça c’est pas bon pour le business…)
Pourriez-vous m’aider à rendre mon CV plus présentable ? (et à épurer mon template si le coeur vous en dit). Merci.