Menu déroulant – FrogWeb. Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source.
Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée. Pour des raisons d’accessibilité et de reférencement j’utilise une autre technique : left: -999em (cacher) et left: auto (montrer) Utilisation de left Tout d’abord une précision quant à l’utilisation de left, top, right et bottom : ça ne fonctionne que sur des éléments positionnés (absolute, fixed, relative). Cela tombe bien puisque pour faire un sous menu déroulant celui-ci doit-être en position: absolute. Voici le code totalement épuré de toute CSS décorative pour une meilleure compréhension : Code HTML Code CSS ce qui nous donnes (ah oui, c’est du brut…) : D’autres techniques existent mais je trouve celle-ci plus « propre ».
Rien ne vous empêche également de les laisser. Menu déroulant en CSS3 avec transition et max-height. Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années.
Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 52 989 fois. Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Démonstration Le sujet du menu déroulant est très sensible. Un bout de HTML Le code HTML est assez classique, il s’agit d’imbriquer des listes non-ordonnées. <ul id="menu"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Level 1.1</a></li> <li><a href="#">Level 1.2</a></li> </ul> </li><li><a href="#">Menu 2</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> </ul> </li><li><a href="#">Menu 3</a> <ul> <li><a href="#">Level 3.1</a></li> <li><a href="#">Level 3.2</a></li> <li><a href="#">Level 3.3</a></li> </ul> </li> </ul> Place au CSS.
The CSS3 Test. CSS3.0 Generator. CSS3 Button Generator. Ultimate CSS Gradient Generator - ColorZilla.com. PrefixMyCSS - Prefix your CSS3 code. Instantly! Les nouveaux tutoriels CSS3. Des infobulles en CSS3. Si une icône ou un bouton ne permet pas de mettre suffisamment de texte (ou ne permet pas d'en mettre du tout) ou s'il nécessite des informations supplémentaires, alors vous aurez certainement besoin d'une infobulle pour cela.
Pourquoi ? Tout simplement parce qu'il est prouvé que les infobulles permettent d'améliorer l'ergonomie de votre site. Ceci étant dit, cet article va vous montrer comment créer vos propres infobulles uniquement en CSS3 : sans image et sans JavaScript. Cet article est la traduction de CSS3 tooltips publié sur Red Team Design. 5 commentaires Article lu 8094 fois. Vous pouvez déjà voir un exemple en ligne. L'attribut HTML title est par défaut le moyen d'afficher des informations supplémentaires. La méthode vous est probablement familière, un élément positionné en relative qui englobe un autre élément positionné en absolute. Vous pouvez voir ci-dessous la structure de l'infobulle. Voici les ingrédients utilisés pour réaliser cela : Voir un exemple en ligne. CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3.
C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations.
Démonstration Place à l’explication ! Chrome Experiments. Exemple de site en CSS 3. Dumb Ways To Die. L'art de l'espresso, cafés et machines.