background preloader

Menu déroulant en CSS

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. 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 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 : certaines parties en sont masquées et n'apparaissent que lorsque l'utilisateur survole le menu principal. La ligne : Related:  COURS Menu de Navigation Déroulant Avec HTML CSSCOURS EN HTML

Les 30 sélecteurs CSS à connaître absolument tomsyweb.com Buy this domain The owner of tomsyweb.com is offering it for sale for an asking price of 345 GBP! Related Searches This page provided to the domain owner free by Sedo's Domain Parking. Keyframe Animation Syntax Basic Declaration & Usage For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above Multiple steps If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values: Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate. Calling keyframe animation with separate properties Animation Shorthand Just space-separate all the individual values. animation: test 1s 2s 3 alternate backwards Combine transform and animation Multiple animations You can comma-separate the values to declare multiple animations on a selector. Steps() The steps() function controls exactly how many keyframes will render in the animation timeframe. If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. The math works out nicely there. Browser Support More Resources

Faire un menu déroulant 'très simple' par RAIDEN423 Ce qu'il veut est un dropdown/accordeon à ce que je comprend En CSS pure ça peut donner ça : en css pure ouverture avec hover ou tab (ou touch sur une tablette) . Pour convaincre j'ai repris ton image. un autre montage , pour l'ouvrir/fermer sur le titre : et moins concluant, adaptation de la navigation du menu au clavier (peut de différence avec les autres selon les navigateurs, dixit IE9 ) Le suckerfish dropdownmenu reste une valeur sure, mais pas l'unique référence et la seule bonne pratique, attention , je dis pas que ce que je propose au dessus est le truc a faire, mais creuser un peu, ça fait paradoxalement avancer les choses . ). Les lecteurs/navigateur suivent surement de pas trop loin l’évolution.

[lecture] Tout savoir sur le Pixel Perfect Hello ! Vous connaissez certainement le principe du « pixel perfect » ! Ce terme possède deux définitions, la première est lorsqu’il s’agit de faire ressembler l’intégration d’une maquette image en web, au pixel près, à la « perfection ». (Bon, cet idéalisme du pixel, précis, fin et pointu est à mon sens une cause perdue tant les navigateurs (Chrome, Firefox, Safari, Internet Explorer, etc.) sont différents), la seconde est celle du pixel « propre » dans Photoshop, pas de choses floues, pas de choses qui débordent ou qui ne sont pas réglées au pixel près. Nous travaillons tous les jours avec nos amis les pixels, ce sont les éléments constitutifs de bon nombre de conceptions visuelles numériques. Ce guide fait donc la chasse aux contours flous, aux objets qui sautent de position entre les pages, aux décalages de couleurs, aux mauvaises impressions, etc. télécharger le PDF Merci Olybop! Ces articles peuvent aussi vous intéresser:

CSS Debutant : Boite à outils CSS Aller aux menus #CSS {débutant;} Vous êtes ici > CSS Débutant | Boite à Outils Boite à Outils CSS Générateur de CSS Formulaire permettant d'obtenir le code d'une feuille de style. Outils de développement NotePad++ : éditeur html en code source gratuit ;BlueGriffon : éditeur html et CSS wysiwyg réalisé par Daniel Glazman (co-chairman CSS au W3C et papa du feu Nvu) ;KompoZer : éditeur html wysiwyg successeur de Nvu ;TopStyle : éditeur de CSS. Outils de développement pour Firefox Très pratique pour pourvoir tester, visualiser et modifier des codes (x)html et CSS au sein même du navigateur. Transformations d'unités de tailles L'EM-calculator : application en ligne très pratique pour calculer l'équivalence des pixels en em. Choisir ses couleurs Générateurs Liste de Discussion Si vous désirez faire partager ou approfondir vos connaissances sur les feuilles de style et le (x)html, vous pouvez rejoindre notre liste de discussion. Liens Utiles Haut Contact : pascale at mammouthland.net Premiers pas en CSS

Un pyjama efficace pour Internet Explorer | Border-Labs En termes d’ergonomie, on conseille souvent d’implanter dans ses tables HTML des « pyjamas », c’est-à-dire des couleurs de lignes alternées. Cela permet de faciliter la lecture : l’œil peut plus facilement suivre les lignes. Une table avec pyjama En CSS 3, il existe une solution tout à fait satisfaisante, utiliser la pseudo classe nth-child qui permet de sélectionner le nième fils d’un nœud DOM. Cette pseudo classe accepte une syntaxe du type an+b où n représente le fils sélectionné et accepte deux mots clefs odd (pour les fils dont l’index est impair) et even (pour les fils dont l’index est pair). nth-child(2n) correspond à nth-child(even)nth-child(2n+1) correspond à nth-child(odd) On peut donc directement utiliser cette pseudo classe pour sélectionner les lignes paires et impaires (c’est-à-dire les nœuds de type TR) en fonction de la parité de leur index. Du coup, il existe même des librairies javascript pour résoudre de façon générique ce problème, par exemple :

Sites web utilisant le jQuery, CSS3 et le HTML5 CSS3, jQuery, JavaScript, HTML5 sont tous des termes qui font parties de la réalité du web d’aujourd’hui. En mixant ces technologies, nous obtenons parfois des résultats époustouflants qui sortent de l’ordinaire et qui nous font dire du même coup : « WOW! ». Avez-vous visité ou développé un site web de ce genre? Cette collection de sites web en javascript a été compilée par Kevin Liew sur Queness.com. Ben the bodyguard Un « must » à voir! Lost Worlds Fairs Excellente utilisation de la propriété CSS « position: fixed » dans cette page web. Pixel Slave Une tonne d’effets de transition et les animations sont très rafraîchissantes. Nike Better World Si vous n’avez pas encore admirez ce site web, il est temps de le faire immédiatement. Toasted Digital Original, animé, il y a du mouvement, une tonne d’effets… et non, ce n’est pas du Flash! Image Mechanics De superbes effets JavaScript qui rendent l’expérience usager très agréable. Duchy Original Cascade Brewery Co

CSS : menu déroulant Voir aussi l'index de tous les conseils. Menu déroulant La page 'Menus fixes' montre comment faire un menu qui reste au même endroit au bord de la fenêtre, même si le reste de la page défile. Nous pouvons rendre ce menu plus intéressant en le faisant se replier lorsqu'il n'est pas utilisé. Le menu à droite de cette page ne s'affiche que sous la forme d'un petit onglet vert, jusqu'à ce que vous déplaciez le pointeur de la souris (ou cliquiez dessus avec un écran tactile), puis il s'ouvre pour afficher le texte qu'il contient. Pour rendre le déroulement plus agréable, une courte transition de seulement 0,2 secondes permet au menu de glisser doucement à partir de la droite. Lorsque l'espace est limité, comme sur le petit écran d'un téléphone portable, il peut être particulièrement utile de masquer partiellement un menu. Détails Notre menu est juste une liste UL et ressemble à ceci : Voici ci-dessous la partie essentielle de la feuille de style. Accessibilité Menus de taille inconnue Et voilà !

Beautiful Landing Page Web Designs Landing page designs are a crucial part of any business-oriented web design. If a company is oriented around digital sales, a landing page is essential to maximize sales by using a clever or catchy hook. If a company is based around social media, it’s important to have a landing page that offers information with a quick and easy signup. Fundamentally, however, the goals of a landing page are the same regardless of industry. The goal is to achieve a desired outcome effectively and to inspire the user to take action. Creating a landing page, from a technical standpoint, isn’t very tricky, as the code tends to be simple enough and there are plenty of options among the best landing page creator tools. Subscribe to our RSS and follow us on twitter for more interesting upcoming posts like this. In this post, I’ve selected some inspiring examples of landing page web designs to show you how it can be done. Designed to Move Elegant Themes Xero Squarespace Gravitate Screenr Tapmates Dribbble Square factor

Un menu déroulant en CSS3 Developpez.com tiens à vous informer que le support du CSS par les navigateurs a évolué. Par conséquent, certaines propriétés proposées dans les codes ont aujourd'hui été adoptées ou rejetées. Nous vous invitons à vous renseigner à ce sujet, par exemple sur ce site : CSS3 Browser Support Voyons d'abord comment se présente ce menu. Si vous êtes pressé, vous pouvez déjà voir un exemple en ligne. Comme vous pouvez le constater ci-dessous, la structure HTML ne contient rien de plus que ce qui est nécessaire, elle est minimale et facile à comprendre. <ul id="menu"><li><a href="#">Home</a></li><li><a href="#">Categories</a><ul><li><a href="#">CSS</a></li><li><a href="#">Graphic design</a></li><li><a href="#">Development tools</a></li><li><a href="#">Web design</a></li></ul></li><li><a href="#">Work</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul> Une dernière chose, mais néanmoins importante, le code HTML est sémantiquement correct. Voir un exemple en ligne.

Menu horizontal déroulant en CSS Un menu horizontal, c'est bien... Un menu horizontal qui déroule, c'est mieux !... Oh enfin, mieux... Ça dépend des goûts et des besoins. Mais ça peut être utile. Comme précédemment, le menu sera fait sous forme d'une liste à puces que l'on va contraindre à devenir horizontale, mais ce sera, en plus, une liste à puces imbriquée qui va donc être démasquée par rollover. Fonctionne avec : Firefox 3 IE 7 SeaMonkey Opéra 9 Safari 3 Camino 1.6 Attributs utilisés : background-color color display float height list-style-type padding position margin text-align, text-decoration width Note importante Comme indiqué ci-dessus, cette technique, basée uniquement sur des propriétés CSS (notamment la pseudo-classe :hover), ne fonctionnera que sur des navigateurs récents. Code (x)html Code CSS Dans un premier temps, on transforme donc cette liste à puces verticale en une liste horizontale. A ce stade, le résultat est le suivant : Et hop, sous-items disparus ! Il faut maintenant réaliser deux choses : Remarque Haut

Related: