Comment réaliser un menu déroulant en CSS3 ? 3 janvier 2014 Affichages : 12353 Dans ce tutoriel, nous allons voir comment créer un menu déroulant en pure CSS3. Il existe déjà de nombreux tutoriels sur le sujet mais la plupart d'entre eux utilisent la technologie JQuery pour obtenir l'effet déroulant. Il est donc possible de s'en passer et nous allons voir comment et constater que c'est même bien plus simple. Nous allons tout d'abord commencer par créer la structure HTML, puis nous ajouterons le css pour styliser notre menu et obtenir l'effet déroulant. La structure HTML La première étape consiste à créer d'abord une liste < ul > avec quelques < li >< /li > à l'intérieur. <nav><ul><li><a href="#">Accueil</a></li><li><a href="#">Contact</a></li><li><a href="#">Menu1</a></li><li><a href="#">Menu2</a></li></ul></nav> Ensuite, nous sélectionnons une des balises < li >< / li > à laquelle nous ajoutons une nouvelle balise < ul >< /ul > avec quelques éléments à l'intérieur pour créer notre menu déroulant. Le CSS En conclusion
Création d'un menu responsive déroulant en HTML et en CSS Présentation de l’exercice Dans cet exercice, nous allons réaliser un menu responsive déroulant seulement en HTML et en CSS, sans l’aide d’aucun autre langage comme le JavaScript par exemple. Afin de retirer le maximum de cet exercice, il est fortement conseillé de posséder de bonnes bases en HTML et particulièrement en CSS. Dans son état « normal », notre menu va ressembler à cela : Ensuite, on va vouloir que notre menu s’adapte en fonction de la taille de l’écran de vos visiteurs, afin d’offrir une meilleure expérience de navigation. Voilà donc le type d’affichage qu’on va chercher à avoir sur Smartphones notamment : Cet exercice va se découper en différentes phases : La phase de réflexion ; La création du menu en HTML ; La création du menu en CSS ; L’ajout des fonctionnalités responsives. Etape n°1 : La réflexion On commencera toujours nos développements par une phase de réflexion. Dans notre cas, nous voulons créer un menu déroulant et responsive. On est prêt pour commencer !
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
Créer des menus simples en CSS Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire Le code HTML Comme toujours, le choix des balises html doit être guidé par la nature du contenu qu'on souhaite y placer. Dans le cas d'un menu, la question est un peu délicate, dans la mesure où il n'existe pas de balise spécifique pour désigner un ensemble de liens. Un point de vue largement répandu consiste à considérer le menu de navigation comme une liste de liens, et donc à utiliser la balise correspondant aux listes non ordonnées, <ul>. Par exemple, pour un menu comportant 5 items: <ul id="navigation"><li><a href="#" title="aller à la section 1">item1</a></li><li><a href="#" title="aller à la section 2">item2</a></li><li><a href="#" title="aller à la section 3">item3</a></li><li><a href="#" title="aller à la section 4">item4</a></li><li><a href="#" title="aller à la section 5">item5</a></li></ul> Voir le résultat
Tutoriel : Créer un menu horizontal déroulant en CSS Salut les zéros. ;) Je vais aujourd'hui essayer de vous aider à créer un menu déroulant pour votre site ! :) Ce menu déroulant est réalisé en xHTML/CSS, et utilise un brin de Javascript pour permettre une compatibilité avec les anciennes versions d'Internet Explorer. Pour pouvoir réaliser ce menu déroulant, vous devez avoir lu le tutoriel de M@teo21 : Site Web ! Une fois ce tutoriel terminé, vous serez capables de réaliser un menu comme celui-ci, ou un beaucoup plus beau. Bonne chance à vous Voilà, nous sommes partis ! Pour commencer ce tutoriel, nous allons étudier la structure xHTML à mettre en place. Pour réaliser le menu déroulant, nous allons utiliser les balises de listes et non les tableaux. Rappel Voici comment se compose une liste en xHTML : <ul></ul> liste à puces non numérotée ;<ol></ol> liste à puces numérotée ;<li></li> élément de liste. <ul><li>Un premier élément de la liste</li><li>Un deuxième élément de la liste</li></ul> accueil ;membres ;images ;téléchargements ;plus. Hop ! <!
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License
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 :
Circle Hover Effects with CSS Transitions From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it! Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Example 1 And now, the interesting hover action!
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 . ).
How to Create (Animated) Text Fills A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG. View demo Download source I like to think that the future is already here. We have already so many exciting possibilities in CSS and SVG that some time ago we could only dream about. For example, we now have many possible ways to create text with an animated fill! About a year ago the article Techniques for creating textured text by Sara Soueidan was published here on Codrops. I’m very interested in this topic but from a different perspective. In this article I’m going to share my experiments and five ways to create patterned filled text. For each of the techniques I’ll show the browser support, the ability to select text and, most importantly, the possibility to animate the fill (highly experimental). I will not include all the code here, only the most important parts, but you can find everything inside the download files and play with it. Let’s begin. Yes