Merci pour ce super tuto. Mais le défi est intéressant, je vais étudier la question et je te ferais part du résultat. Je regardais comment adapter les deux menus. Mais je rencontre quelques soucis ben oui ça serait pas marrant sinon: Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Malheureusement, sur mon blog test ça ne marche pas comme ici… Le 2ème sous-niveau est caché et ne veux jamais apparaître à droite du 1er sous menu comme fait le tient, en gris. Puis-je vous envoyer mon code pour me faire comprendre?

Les mettre ici ça ne serait pas pratique, je te propose de me contacter sur openclassrooms et de me donner ton code. Voici comment obtenir ce résultat avec des CSS:. Quelque chose comme ça? Autrement on peut utiliser: Voici donc ce que donnerait notre exemple si on le structure avec cette balise: Salut, Donc le menu est déjà bien mieux, merci beaucoup.

Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration.

Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger. Des menus déroulants en CSS compatibles avec tous les navigateurs Cet auteur utilise le script csshover.

Nous lui avons préféré le petit script proposé au bas de notre page. Nous préférons limiter l’usage de ce langage au strict nécessaire. Un menu déroulant sans javascript En faisant l’impasse sur le navigateur IE6, il est possible de réaliser un menu déroulant sans une ligne de javascript. Un menu déroulant sans javascript compatible avec IE6 Stu Nicholls a démontré que la chose était possible en exploitant une particularité un peu bizarre d’IE6: Grâce à des commentaires conditionnels, Stu parvient même à faire un code qui passe le contrôle du testeur W3C.

Bel exercice de style, mais le code produit est hélas très volumineux. Menus déroulants contre liens hypertextes: La plupart des reproches qu’il leur adresse peut être corrigée par une bonne conception de ces menus.

Voilà pourquoi il est important de lire cet article et d’en tenir compte pour votre site. Un menu déroulant accessible Trés bel exemple de menu réalisé par FairyTells. Ce code – hélas un peu complexe – gère la navigation au clavier et propose même un petit délai de « latence » pour faciliter l’utilisation du menu par les personnes victimes de tremblements.

La vengeance des menus déroulants Dans sa dernière version, le code proposé par les américains Patrick Griffiths et Dan Webb présente de très fortes similarités avec le notre preuve que les grands esprits se rencontrent? Simple, efficace, compatible avec tous les navigateurs et n’utilisant le javascript que pour IE6 à travers un code économique en taille et en ressources.

Tutoriel : Créer un menu horizontal déroulant en CSS

Un menu semi-transparent Pour donner un look un peu plus « fun » à votre menu, voici comment procéder. Le script qui a servi de base à cette adaptation semble être celui de Patrick Griffiths et Dan Webb voir paragraphe précédent sur « la vengeance des menus déroulants ». Le premier paramètre dont vous devez tenir compte au moment de la conception de votre site est le suivant: Votre design de site doit d’abord est orienté horizontaal satisfaire ce besoin.

jorizontal

La gestion de vos menus est donc capitale car c’est elle qui permettra à l’internaute de saisir en un seul coup d’oeil la liste des contenus que le site lui propose. Déroklant menu fixetoujours accessible et clair dans sa présentation représente un atout considérable pour rendre votre contenu facilement accessible.

Lorsqu’on peut se passer de javascript, il est prudent de le faire. Certains internautes désactivent en effet l’exécution du javascript et pourraient se retrouver dans l’impossibilité de naviguer sur un site utilisant ce langage dans sa gestion déroulqnt menu. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures.

Seul le langage javascript permet de dépasser cette limitation. Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs. En réfléchissant au principe de base d’un menu déroulant, vous constaterez qu’il s’agit essentiellement d’une horziontal de cache-cache: Dans le cas d’un menu hiérarchique cs 3 niveaux, le troisième niveau n’apparaît que lorsque l’utilisateur survole certaines lignes de deuxième niveau.

Ajoutons à cet inventaire le fait qu’un menu est un ensemble de lignes qu’il va falloir structurer dans le code HTML. Le niveau 2 et le niveau 3 doit être invisibles en temps normal et ne devenir visibles que lors du survol des niveaux précédents.

Voici csw obtenir ce résultat avec des CSS:. On a également attribué un fond gris à ces blocs afin de commencer à travailler sur l’esthétique de notre menu. Nous allons donc créer une petite fonction javascript qui ajoute cette fonctionnalité à IE 6 et qui ne sera utilisée que par lui. Cliquer ici pour voir le résultat. Cela peut être ennuyeux si on utilise d’autres horizonyal à d’autres fins que la gestion du menu dans la même page.

Cela permettra de restreindre l’influence de nos styles CSS à ce bloc.

Langage Informatique: créer un menu horizontal déroulant avec CSS et jQuery

Le code complet proposé ci-dessous intègre ces modifications ainsi que quelques derniers ajustements cds. Cliquer ici pour voir le résultat Télécharger le script. Sélection de liens concernant les menus déroulants en CSS Ces liens pointent vers des pages dont les contenus complètent notre article. Le script qui a servi de base à cette adaptation semble être celui de Patrick Griffiths et Dan Webb voir paragraphe précédent sur « la vengeance des menus déroulants » A propos du design de site Internet Le premier paramètre dont vous devez tenir compte au moment de la conception de votre site est le suivant: Avec ou sans javascript?

Créez un menu déroulant ultra-facilement en CSS !

Notre choix a consisté à dérolant au point un menu à 2 vitesses qui fonctionne: Déroupant partie de cache-cache En réfléchissant au principe de base d’un menu déroulant, vous constaterez qu’il s’agit essentiellement d’une partie de cache-cache: Pour obtenir ce résultat, il faut donc maîtriser deux techniques: Comment emnu apparaître et disparaître des éléments On utilisera pour cela la propriété display qui peut recevoir entre autre les valeurs none bloc masqué et block bloc affiché.

Comment déclencher un événement lorsque le curseur de la souris survole une élément. On utilisera pour cela la propriété hover qui permet d’associer un style CSS à un bloc survolé.

Voici donc ce que donnerait notre exemple si on le structure avec cette balise: Le copyright de cette page appartient à css-faciles.

Son contenu peut être recopié sous la condition express de faire figurer la présente mention y compris les 2 liens ci-dessus dans le contenu copié. Pour plus de détail sur ce copyright, consultez notre page consacrée aux droits de copie. Créez votre site Web avec des CSS! Raccourcis Recherche Haut de page Page précédente Page suivante.