Download for Windows. Un menu déroulant en CSS3. 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. Une dernière chose, mais néanmoins importante, le code HTML est sémantiquement correct. La structure est logique et a une signification propre, même si aucun style n'est appliqué : Dans mon exemple, seule la section « Categories » possède un sous-menu, mais bien entendu, vous pouvez en ajouter sur chacun des éléments.
Le code est assez long, mais c'est tout ce dont on a besoin. Peut-être avez-vous remarqué le triangle qui apparaît au-dessus du sous-menu. Il est écrit en utilisant le pseudoélément :after : Le sous-menu est affiché au survol de la balise <li>. Même si au début de cet article j'ai annoncé « sans code JavaScript additionnel », je vais malgré tout en ajouter, uniquement pour le support d'IE6. Voir un exemple en ligne. CSS3 Menu and Navigation Tutorials. All of the CSS3 navigation tutorials we have for you today are all fully functional and could easily be used on a live site. But we do prefer to think of them all as being more experimental and proof-of-concept rather than being a robust end-product (a sprinkle of jQuery always makes everything better!). What they do offer is an opportunity to roll-up your sleeves and delve into some ground-breaking code. Anyway, here they all are: Creative CSS3 Animated Menus The idea of this tutorial is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using CSS transitions and animations.
Creative CSS3 Animated MenusDemo CSS3 Animated Dropdown Menu With this tutorial you will learn how to build this awesome CSS3 animated dropdown menu with some pretty cool features. Creating a Cool CSS3 Dropdown Menu CSS3 Minimalistic Navigation Menu CSS3 Animated Menu CSS3 LavaLamp Menu Pure CSS3 LavaLamp MenuDemo CSS3 Multi-Level Drop-Down Menu. CSS3 Menu Generator. 15 CSS3 Navigation Tutorials and Techniques. CSS3 is slowly but surely creeping into mainstream web design, more and more designers are using it, albeit in small doses, but it is certainly gathering momentum.
It really is an exciting time for web design. A few weeks back we published an article called 20 CSS3 Tutorials and Techniques for Creating Buttons just to start the CSS3 ball rolling, this time around we focus on some menu and navigation techniques that make use of the wonderful new properties that CSS3 offers. Please bare in mind that for the most part these tutorials have not been written for usage in the wild, they are more experimental, a demonstration of what can be achieved and will be used in the near future.
All of the demos from these tutorials render perfectly well with Chrome and Safari (albeit with minor discrepancies), Firefox struggles with a couple (especially Zurbs OS X Dock, which even look awful with 3.6) and IE, rather surprisingly, rendered most of the demos better than expected. View Tutorial »Demo »