Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Menu avec slider effet transition

Réaliser un effet de bloc dépliable en CSS avec opacité

Création: novembre 2010Modifié:

  • xHTML
    xHTML

    L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom.

    HTML sur Wikipédia

  • CSS
    CSS

    CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML.

    CSS sur Wikipédia

  • PHP
    PHP

    PHP (sigle de PHP: Hypertext Preprocessor) est un langage de scripts libre principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP.

    PHP sur Wikipédia

  • Javascript
    Javascript

    JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.

    Javascript sur Wikipédia

  • AJAX
    AJAX

    Ajax est la combinaison de technologies telles que Javascript, CSS, XML, le DOM et le XMLHttpRequest dans le but de réaliser des applications Web riches (Rich Internet Application : RIA).

    AJAX sur Wikipédia

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Opera
Partagez
Facebook Twitter

Votez

127 votes4.6

Utilisation de la propriété CSS transition pour gérer un effet de slide sur un menu.

Cet article fait suite à Menu Slides avec CSS3 concernant les sliders. Dans cet exemple, on utilise un effet de transition sur un menu, en animant l’opacité, la taille et la position.

Lors du hover "on" sur un lien, on déplace la div sur la gauche (left), on augmente sa visualisation (opacity) et sa taille (width), grace aux transitions :

ul li:hover div{
    left:182px;opacity:1;width:276px;
    transition:1s left,1s width,1s opacity;
}

Lors du hover "out", on ré-utilise la transition mais pour repositionner la div dans son état d’origine :

ul li div{
    left:0px;opacity:0;width:152px;
    transition:1s left,1s width,1s opacity;
}

À l’heure actuelle, l’effet fonctionne parfaitement sous Chrome et Safari. Sur les autres navigateurs, l’effet produit est celui du hover "normal".

Envie d'une nouvelle démo?

Un p'tit mot...

#1par iNes, le 23 novembre 2011

Super menu, par contre une petite question : il est écrit qu’il n’y a pas besoin de js, ce qui est juste car si j’enlève tous les js du code, cela fonctionne toujours. Par contre à quoi servent tous ces fichiers dans ce cas ? on a jquery, on a aussi un css3-1.js ?

Merci de ta réponse,

Bonne continuation !

#2par css3create, le 23 novembre 2011

@iNes : Les fichiers js servent essentiellement à la gestion du site lui-même. Le menu des démos (dans le bandeau bleu) est géré en javascript. Il est possible de cliquer sur les flèches pour effectuer un décalage de ce menu...

#3par iNes, le 23 novembre 2011

Bien évidemment, c’est logique ! :) merci de ta réponse rapide. Le site en lui-même est très bien également !

#4par iNes, le 29 novembre 2011

Bonjour,

Je reviens vers toi car j’aurai besoin d’une petite aide. J’aimerai afficher ce menu quand je passe sur une icone qui serait placée en bas à gauche. Est-ce possible d’adapter ton code et le faire en css3 ou je dois le faire en javascript ? Merci de ta réponse !

#5par Azledev, le 30 novembre 2011

Une très très bonne réalisation. je poste sur ce sujet mais sache que je me suis inspiré de beaucoup de tes créations ! Continue comme sa, tu es dans mes favoris !
Un enorme merci !

#6par Link, le 22 décembre 2011

NO IMG ? Et ça c’est quoi : http://css3create.com/squelettes/im... ^^
Sinon très belle démo surtout le petit effet "fondu" lorsque le menu se repli.

#7par Rucoy, le 29 décembre 2011

Bonjour "iNes" parle de fichiers. Comment télécharger les fichiers sources ?

#8par moioli888, le 29 janvier 2012

@Link : la réalissation en elle-même n’est pas faîte avec des iamages ;) Faut pas chercher non plus.. :P

#9par Whyner, le 1er mars 2012

Salut !
Tout d’abord, félicitation pour ce site, il est génial et très instructif.
J’ai une question, comment faire pour que les slides restent visibles tant qu’on ne survole pas un autre élément ? Merci :p

#10par css3create, le 1er mars 2012

@Whyner : Si tu veux qu’ils restent visibles, il faut par exemple que tu ajoutes une class sur les éléments via javascript, ou tu peux utiliser :target en CSS, mais tu génères un historique de navigation. A toi de voir...

#11par Skyscraper, le 31 mai 2012

Salut !
Déjà : super boulot, ton site est parfait et tes tuto très détaillés !
Je n’arrive pas à passer ton menu en menu horizontal...c’est surement quelque chose de simple mais là je coince. Les transitions, j’ai réussi à adapter à un futur menu en ligne mais pas moyen de transformer le menu...
Merci de ton aide

#12par Zoé, le 7 juin 2012

Bonjour, tout d’abord merci pour ce site merveilleux.

Je me demandais si en passant par le JS c’était possible rendre cela possible sur IE pour que mon site soit le plus agréable possible pour tous =)

En regardant le fichier source j’ai remarqué ceci :

Mais je ne sais pas à quoi correspond CE fichier :

<script src='extensions/msie_compat/javascript/jquery.ifixpng.js'></script>

#13par css3create, le 7 juin 2012

@Zoé : Non, ce JavaScript ne permet pas de faire fonctionner cet exemple sous IE. Il sert au site en général...Par contre, tu peux effectivement réaliser cet effet via JS. Tu devrais trouver de très bons tutos sur le net.

#14par Zoé, le 7 juin 2012

Merci beaucoup =)

Satané IE, il aura ma peau un jour x)

#15par Zoé, le 7 juin 2012

Par contre ce que je ne comprends pas c’est qu’en venant sous IE sur votre site, les transition certes ne marchent pas... Mais je peux au moins avoir la forme x_X

#16par David, le 9 juin 2012

Salut, Génial tes tutos, j’ai cependant un petit souci avec celui ci...
J’ai repris le principe du menu, mais ca ne fonctionnait pas comme je le souhaitais, alors j’ai simplement recopié le menu et les CSS pour voir s’il y aurait un changement, mais toujours le même souci, dans l’encart qui se décale, seuls les titres apparaissent, et les textes et liens non, le titre est meme presque centré dans l’encart... une suggestion ?

#17par David, le 9 juin 2012

Et bien Fausse Alerte c’était le

qui était mal configuré ... encore une fois très bon Style !!

#18par Tsitsi, le 5 septembre 2013

Tout d’abord merci pour tous ces tutos
Concernant celui-ci, j’ai bel et bien copier coller le style fournit sur le code source (ligne 95-168)
puis le code html à partir de la -ligne 1076 - 1110,
le soucis c’est que les text ne s’affiche pas en haut et pire ils sont cachés
Ou est ce ce que je me suis perdu ?

#19par cedcyr, le 22 septembre 2013

merci pour ce site qui est source d’une mine d’informations ! et quand je li dans les post que sous IE sa coince et même pour les autre navigateurs, juste un truc les mis à jours ça existe rien de plus ! je test systématiquement sous IE10 (bien entendu les autres version ne savent pas ce que c’est que CSS3) Firefox à jours et chrome à jours et tous va bien. encore merci et continué car on apprend grâce a vous.


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)