Forum Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum Crea illusion Fantasy


Aides,Codes,Conseils,Forum,Sites web,blogs,Tout supports,Photographie,Graphismes,Dessins,Peintures,Tutoriels,Publicités.

PublicationsAccueilFAQPortailS'enregistrerConnexionÉvènements
Ta bannière à la place d'honneur, Ici !

Partagez|

Un tableau ou menu horizontal, à onglets, tout en CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 6568
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9848
Admin

Ptite_Perle
18 - 16
MessageSujet: Un tableau ou menu horizontal, à onglets, tout en CSS Mar 23 Mai 2017 - 20:52

Coucou

Voici le code pour faire un tableau avec un menu , proposant des images, des annonces, des vidéos si vous le souhaitez.

Code Html:
Code:


<div id="menu-tab"><!----------------tableau-01---------------------------------->
<div id="page-wrap">
<div class="tabs"><!----------------onglet-01-accueil-------------------------->
<div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> <label for="tab-1">Accueil</label>
<div class="content">
<p><a href="#">Retour Acceuil</a></p>
<p><a href="#">Contact</a></p>
<p><a href="#">Newsletter</a></p>
</div>
</div>
<!----------------onglet-02-articles-------------------------->
<div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">Articles</label>
<div class="content">
<p>Exemple, une image, du texte</p>
<br />
<p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p>
</div>
</div>
<!----------------onglet-03-forum-------------------------->
<div class="tab"><input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3">Forum</label>
<div class="content">
<p>Exemple, une image, et une video...</p>
<br />
<p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /> <iframe style="margin-left: 30px; box-shadow: 6px 6px 10px grey;" src="http://player.vimeo.com/video/36778024" frameborder="0" width="500" height="281"></iframe></p>
</div>
</div>
<!----------------onglet-04-libre-------------------------->
<div class="tab"><input id="tab-4" name="tab-group-1" type="radio" /> <label for="tab-4">Video-1</label>
<div class="content">
<p>Une vidéo de Constance..!</p>
<br /> <iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<!----------------onglet-05-libre------------------------->
<div class="tab"><input id="tab-5" name="tab-group-1" type="radio" /> <label for="tab-5">Video-2</label>
<div class="content"><br /> <iframe src="//www.youtube.com/embed/I3W3mRs4ULQ?rel=0" frameborder="0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></div>
</div>
</div>
<!----------------onglet-06-libre--------------------------
<div class="tab"><input id="tab-6" name="tab-group-1" type="radio" /> <label for="tab-6">Codes</label>
<div class="content">
<p>Code CSS</p>
<br /> <iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div>
</div>
</div>---></div>
</div>
<p><br /><br /><br /></p>


Code CSS:
Code:
/*-----------------------------------------*/
* {
    margin: 0;
    padding: 0;
  
    }
#menu-tab {
    /*background: white;*/
    font-family: 'trebuchet ms', geneva;
    font-size: 11pt;
    color:black;
    }
    
#menu-tab a {
color: grey;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
#menu-tab a:hover{
color: green;

}
    
/*--------------Dimensions tableau--------------*/

#page-wrap {
      width: 70%;
      margin: 10px auto;
      
    }
    
/*--------------Onglets--------------*/

.tabs {
      position: relative;  
      min-height: 480px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgba(170, 185, 185, 0.97);
      padding: 10px;
      border: 1px solid #ccc;
      margin-left: -1px;
      position: relative;
      left: 1px;
      border-radius: 10px 10px 0px 0px;
      box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
    }
    .tab [type=radio] {
      display: none;  
    }
    
/*--------------Contenu article onglet--------------*/
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 0px 10px 10px 10px;
      box-shadow:6px 6px 10px rgba(0, 0, 0, 0.41);
      overflow: hidden;
      overflow-y: auto;
      margin-bottom: -20px;
    }
    .content > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
    
/*-------------Onglets actifs--------------*/

    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
/*--------------Images--------------*/

    .content img {
    border:4px solid white;
    box-shadow:6px 6px 10px grey;
    -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
    
    .content img:hover {
    opacity: 0.8;
    -webkit-transform: rotate(7deg);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
      }

Voici le rendu final

[Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Un tableau ou menu horizontal, à onglets, tout en CSS

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Menu Horizontal et Déroulant
» Marcher tout en étant bourré
» ♠ Tout est relatif, seul la Vodka est Absolut
» [Annulée] Une sorte de "tableau" dans un Message
» commande menu "Enregistrer"

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy  :: Sites web-