Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Un tableau ou menu horizontal, à onglets, tout en CSS | | 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 cette image] |
| |
Coco-LapinMembre Messages : 54 Venue : 14/03/2016 Je suis : Age : 55 Je vie à : SAINT QUENTIN Humeur : bonne Mes Points : 59697 Re: Un tableau ou menu horizontal, à onglets, tout en CSS | | |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Re: Un tableau ou menu horizontal, à onglets, tout en CSS | | Avec plaisir Coco-Lapin |
| |