background preloader

Menu déroulant en CSS3 avec transition et max-height

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 Related:  CSS3Principes

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Pompage.net - Inline-block est-il un substitut aux floats ? Par Steven Bradley Quand vient le moment de développer la mise en page avec CSS, float fait le plus gros du travail. Nous utilisons les éléments flottants pour les blocs importants comme une zone de contenu principale ou une colonne latérale ; nous y avons aussi recours pour les blocs de moindre taille à l’intérieur de ces blocs principaux. Mais les floats sont-ils toujours le meilleur choix? Si les floats fonctionnent généralement sans problème, il peut parfois être délicat de les manipuler. Les inline-block n’ont rien d’une nouveauté et il est possible que vous les utilisiez déjà. Qu’est ce qu’un inline-block ? Inline-block est l’une des valeurs possibles pouvant être assignées à la propriété display d’un élément. Les éléments de type bloc génèrent des boîtes selon le modèle de boîtes CSS. Lorsqu’on y pense, ce comportement n’est pas si éloigné de celui des éléments flottants. La différence entre float et inline-block Tous les blocs ci-dessus ont une déclaration display: inline-block.

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.

Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 ! Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quelles différences entre la 2D et la 3D sur le web? Pour l’affichage d’un site web à l’écran, nous travaillons en 2D: axe X : positif vers la droite de l’écran,axe Y : positif vers le bas de l’écran. Quels navigateurs sont compatibles? Les rotations Matrice

CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes Sur la version automatique (la seconde) : Poser les fondations

Chez-swan.net : Créer une galerie de photos multipages en HTML - Lightbox2 - Documentation <div class="row2" style="text-align:right;"> &nbsp; <a href=""></a>&bull; <a href="../wiki/history.php?id=153">Historique</a><a href="../wiki/print.php?id=153">Version imprimable</a><a href=".. Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris. Commencer par télécharger : Lightbox2 (3,87 Mo) Cette archive à été repensé car à l'origine le css était inclus dans la page web. j'ai donc créer un fichier css à part, pour alléger la page html. une fois que vous avez téléchargé cette archive dézippez la avec 7zip. Avant de commencer il vous faut savoir les deux formats d'images utilisés.Les miniatures: 200x150 px Les larges: 640x480 px Placez vos images miniatures et larges dans le dossier : lbox. Code HTML : Remplacer MINIATURE.jpg par les votres. 1) Dans la page lightbox2.html en édition, repérez les catégories. 2) Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions etc...

Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3 Attention : Un bug étrange a été détecté sous Chrome/Safari sur Mac. Observez-vous cela ? Dans cet exemple, on utilise les transformations CSS afin de faire subir une rotation aux liens contenus dans les éléments de liste (li). <div class="menu"><ul><li><a href="">Home</a><div><h3>Home</h3><p>Bienvenue sur le site CSS3Create</p></div></li><li><a href="">News</a><div><h3>News</h3><p>Pleins de news sur CSS3 et sur HTML5</p></div></li> ... Réglage de la taille d’un li et application de la transition sur la taille. 0.15s correspond au retardement de la transition, afin d’éviter un déclenchement trop rapide de chaque slide. overflow:hidden permet d’éviter le débordement des éléments masqués. Ensuite au :hover, la taille des li est modifiée en utilisant les transitions CSS. L’effet de transition fonctionne avec le moteur Webkit (Safari-Chrome) , le moteur Gecko 2.0 (Firefox 4) et Opéra11+. Voir aussi : Menu avec slider effet transition

Créer un menu vertical latéral en css II - Copier coller Deuxième petit mémo pour créer un menu latéral dans son wordpress. Dans l’autre tuto, on fait apparaitre les sous menus au survol, en les faisant apparaître sur le coté.Ca peut être plus ou moins joli selon les sites. Une autre façon de procéder et de faire apparaitre les sous menus, sous les menus, donnant ainsi un petit effet sympa, très proche des menus jQuery. On fait appel au menu wordpress: <div id="menu_dynamique"><? On va ensuite dans le backoffice de son site pour créer son menu : on va dans Apparence, Menu, et on place les pages, liens ou catégories que l’on aura crée au préalable. Ici j’entoure mon menu d’un id “menu_dynamique” qui va me servir à le pointer et le styliser en css.Wordpress génère automatiquement des ul li avec des noms de classes génériques.En faisant control Maj I sur son site, on retrouve notre menu, généré par notre fonction wp_nav_menu(). De là, on peut le styliser davantage en enlevant le background color des li :

منتديات ستار تايمز Logiciels-Editeures Nvu 1.0 Nvu (prononcez n-view) est une solution complète de création de site Web capable de rivaliser avec les plus grands noms du secteur tels que Dreamweaver ou FrontPage. L'application regroupe un gestionnaire de fichier Web et un éditeur de page graphique, du type WYSIWYG. Le gestionnaire de sites permet de publier rapidement la dernière version de votre site en quelques clics ! La plupart des fonctionnalités permettant de créer facilement des pages sophistiquées sont présentes comme l'intégration de tableaux, de formulaires, d'images, le formatage du texte, etc. Telecharger WebSite X5 Créez un site Web épatant en 5 étapes sans connaître HTML ! NotePad++ 3.5 Notepad++ est un éditeur de source avec mise en relief de la syntaxe et mise en forme de cette dernière. Edit HTML 2.30 Edit HTML est un éditeur de pages Html en PHP ou ASP. WebExpert 6.50.1 Java Animator 1.7

CSS Zen Garden: The Beauty of CSS Design

Related: