+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut Créer un menu avec des boites animées grâce au CSS3



    Je vous propose une traduction de l'article anglophone Create An Animated CSS Box Menu par Paul Underwood : Créer un menu animé en CSS.

    N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

    Créer un menu animé en CSS.

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Membre émérite
    Avatar de christele_r
    Femme Profil pro
    Responsable de service informatique
    Inscrit en
    novembre 2009
    Messages
    1 506
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 69
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2009
    Messages : 1 506
    Points : 2 811
    Points
    2 811
    Billets dans le blog
    2

    Par défaut

    Très intéressant de retrouver ce classique (en tant que menu) sans Javascript bravo pour cette simplicité
    A bientôt
    Jean-Pierre et Evelyne
    Et notre Christèle la blogueuse du site
    et venez lire mes premiers articles Ici. sur developpez.
    Mon guide du débutant pour apprendre à programmer en Java - ET N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Futur Membre du Club
    Femme Profil pro
    ???????????????
    Inscrit en
    janvier 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme

    Informations professionnelles :
    Activité : ???????????????
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : janvier 2008
    Messages : 13
    Points : 9
    Points
    9

    Par défaut


  4. #4
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    mai 2015
    Messages
    152
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : mai 2015
    Messages : 152
    Points : 241
    Points
    241

    Par défaut Le hr est caché derrière le menu..

    Le hr est caché derrière le menu.. comment l'éviter ?
    Faut-il interrompre un héritage ? comment ?
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

  5. #5
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    mai 2015
    Messages
    152
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : mai 2015
    Messages : 152
    Points : 241
    Points
    241

    Par défaut position absolute..

    Citation Envoyé par friendofweb Voir le message
    Le hr est caché derrière le menu.. comment l'éviter ?
    Faut-il interrompre un héritage ? comment ?
    réponse à ma question :

    exemple de contenu :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    		<table width="100%" border="0" align="center" role="presentation" id="test">
    			<tbody>
    				<tr>
    					<td>
    						<hr />
    						blabla blabla
    					</td>
    				</tr>
    			</tbody>
    		</table>

    avec comme css :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    #test { position: absolute ; top: 40%; left: 0px ;}

    Si vous avez mieux, merci de me reprendre
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

  6. #6
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    mai 2015
    Messages
    152
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : mai 2015
    Messages : 152
    Points : 241
    Points
    241

    Par défaut OK j'ai compris

    Pour ceux qui ne comprennent pas non plus, les indispensables :

    Indispensable 1

    Indispensable 2 (plusieurs styles à un élément)

    Explications (classes) :

    Question posée sur le forum css

    Autre exemple intéressant :

    Autre exemple

    Merci pour le tuto !
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

Discussions similaires

  1. [Drupal 7] Créer un menu avec les images des nodes
    Par mastiflux dans le forum Drupal
    Réponses: 4
    Dernier message: 31/12/2014, 17h25
  2. Réponses: 4
    Dernier message: 16/11/2009, 23h39
  3. Créer un menu avec des sous menus
    Par unix27 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/07/2009, 11h32
  4. Réponses: 9
    Dernier message: 24/03/2007, 23h37
  5. créer un noeuds avec des paramétres
    Par Toxine77 dans le forum XMLRAD
    Réponses: 5
    Dernier message: 21/01/2003, 17h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo