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

#Forum d'entraide, une inscription pour nous rejoindre.


RechercherAccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

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

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
Ptite_Perle
Messages : 5079
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81111
Fondatrice
Ptite_Perle
24px
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/
AuteurMessage
Coco-Lapin
Messages : 62
Venue : 14/03/2016 Je suis : Masculin
Né(e) le : 08/07/1968
Age : 50
Je vie à : SAINT QUENTIN
Humeur : bonne
Mes Points : 21767
Membre
Coco-Lapin
24px
MessageSujet: Re: Un tableau ou menu horizontal, à onglets, tout en CSS Lun 22 Jan 2018 - 12:44
Merci pour le partage
Revenir en haut Aller en bas
http://www.lateamdes12salopards.net/forum
AuteurMessage
Ptite_Perle
Messages : 5079
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81111
Fondatrice
Ptite_Perle
24px
MessageSujet: Re: Un tableau ou menu horizontal, à onglets, tout en CSS Lun 22 Jan 2018 - 18:08
Avec plaisir Coco-Lapin Smile
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
Contenu sponsorisé
24px
MessageSujet: Re: Un tableau ou menu horizontal, à onglets, tout en CSS
Revenir en haut Aller en bas

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

-
» Créer un menu horizontal qui défile
» Créer un menu horizontal en accordéon
» Tableau à onglets : onglet permanent.
» Tableau à onglets
» Tableau à onglets verticaux

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