Menu déroulant en CSS. 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. Avec ou sans javascript ? 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 de menu. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne : Sans javascript pour Firefox, Opera, Mozilla et IE7Avec javascript pour IE 5.5 et 6 Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs. Une partie de cache-cache Pour obtenir ce résultat, il faut donc maîtriser deux techniques :
Menu déroulant vertical – FrogWeb. Pour un menu vertical, la technique la plus simple à utiliser est celle du left: -999em. Nous reprenons donc le même code html : Code HTML <ul id="menu-vertical"><li><a href="#">Lien menu 1</a><ul><li><a href="#">lien sous menu 1</a></li><li><a href="#">lien sous menu 1</a></li><li><a href="#">lien sous menu 1</a></li><li><a href="#">lien sous menu 1</a></li></ul></li><li><a href="#">Lien menu 2</a><ul><li><a href="#">Lien sous menu 2</a></li><li><a href="#">Lien sous menu 2</a></li><li><a href="#">Lien sous menu 2</a></li><li><a href="#">Lien sous menu 2</a></li></ul></li></ul> Le code CSS quant à lui est pratiquement le même.
Première chose importante, et contrairement à un menu horizontal, il est nécessaire de mettre une largeur au menu (width). Commençons avec le code qui ne change pas : Code CSS Ensuite dans un menu horizontal on utilise display: inline-block pour aligner les liens. On continue avec le code habituel sur les <a> : Ensuite le code pour cacher les sous menus : Explication pour boutons en ligne tel un menu (en bas) Le bouton en image qui change d'aspect au passage de la souris est très utilisé sur les pages web.
Longtemps, la majorité de ces boutons graphiques étaient animés par un javascript ou pire (car plus lourd) par un applet java. Avec les CSS, par effet "rollover", la légèreté et la simplicité est de mise pour créer de beaux boutons. Fonctionne avec : tous les navigateurs graphiques Attributs utilisés : background color display float line-height margin padding text-align ; text-decoration vertical-align width Bouton CSS simple Code (x)html Un bouton étant en général utilisé pour faire un lien vers une autre page, les sélecteurs exploités dans le code CSS seront a et a:hover pour le changement d'aspect au survol du bouton (si changement souhaité bien sûr...). Pour un seul bouton, le code html peut être le suivant : <div class="bouton"><p><a href="#">Bouton</a></p></div> Prenons maintenant deux images dont l'une servira pour le bouton au repos, et l'autre pour le survol.
Code CSS Plusieurs boutons CSS. Faire son bouton css, obtenir le code !! get the code a droite. Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar. Responsive conversion valeur px en em. Perfect Full Page Background Image.
Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site.
Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version.