AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-43%
Le deal à ne pas rater :
SanDisk microSDXC Ultra 256 Go + Adaptateur SD – Classe 10, ...
34.99 € 60.99 €
Voir le deal

    PA onglets latéraux contenu coulissant en hover (CSS)

    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Sam 24 Nov 2012 - 17:12

    Rappel du premier message :

    Bonjour,

    Ce tutoriel vous permet la réalisation d'une page d'accueil en onglet latéraux, c'est à dire que vos onglets se situeront sur le côté du contenu, qui lui sera dévoilé par glissement à chaque survol d'un onglet différent.

    Un petit aperçu directement sur mon forum bordélique test :

    lien forum test

    Il s'agit du 4ième bloc d'accueil, avec les boutons dans les teintes orange/rouge.


    Installation HTML

    Puisqu'il s'agit d'une page d'accueil, vous allez tout simplement mettre le code dans "Affichage" > "Page d'accueil" > "Généralités".

    Code:
    <div id="nu31_acceuil">
      <div id="nu31_content">
        <div id="nu31_links">
         
          <div class="nu31_link1">
          <div class="nu31_contenu2">
            <span class="nu31_contenu">
    <!-- début du contenu de l'onglet 1 -->
              Contenu onglet 1.
    <!-- fin du contenu de l'onglet 1 -->
            </span>
          </div>
          </div>
         
          <div class="nu31_link2">
          <div class="nu31_contenu3">
            <span class="nu31_contenu">
    <!-- début du contenu de l'onglet 2 -->
            Contenu onglet 2.
    <!-- fin du contenu de l'onglet 2 -->
            </span>
            </div>
          </div>
         
          <div class="nu31_link3">
          <div class="nu31_contenu4">
                    <span class="nu31_contenu">
    <!-- début du contenu de l'onglet 3 -->
            Contenu onglet 3.
    <!-- fin du contenu de l'onglet 3 -->
            </span>
          </div>
          </div>
         
          <div class="nu31_link4">
          <div class="nu31_contenu5">
          <span class="nu31_contenu">
    <!-- début du contenu de l'onglet 4 -->
            Contenu onglet 4.
    <!-- fin du contenu de l'onglet 4 -->
            </span>
            </div>
          </div>
         
        </div>
        <div class="nu31_contenu1">
          <span class="nu31_contenu">
    <!-- début du contenu par défaut -->
          Contenu par défaut.
    <!-- fin du contenu par défaut -->
          </span>
        </div>
      </div>
    </div>

    N'oubliez pas d'enregistrer !


    Installation CSS

    Allez ensuite dans votre feuille CSS pour y placer ceci :

    Code:
    /* PA ONGLETS LATERAUX HOVER */

    #nu31_accueil
    {
      width: 950px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      margin-bottom: 5px;
      height: 200px;
      padding: 10px;
      background: #d2d6d6;
      border: 1px solid #efefef;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -o-border-radius: 10px;
      -htm-border-radius: 10px;
      -webkit-border-radius: 10px;
      box-shadow: 0px 0px 5px #425e5c;
      -moz-box-shadow: 0px 0px 5px #425e5c;
      -o-box-shadow: 0px 0px 5px #425e5c;
      -htm-box-shadow: 0px 0px 5px #425e5c;
      -webkit-box-shadow: 0px 0px 5px #425e5c;
    }
    #nu31_content
    {
      width: 950px;
      height: 200px;
      overflow: hidden;
    }
    #nu31_links
    {
      float: left;
    }
    .nu31_link1, .nu31_link2, .nu31_link3, .nu31_link4
    {
      width: 150px;
      height: 48px;
      margin-bottom: 2px;
      opacity: 0.6;
      -moz-opacity: 0.6;
      -khtml-opacity: 0.6;
      filter: alpha(opacity=60);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .nu31_link1
    {
      background: url(http://img15.hostingpics.net/pics/272286bouton1.jpg);
    }
    .nu31_link2
    {
      background: url(http://img15.hostingpics.net/pics/437826bouton2.jpg);
    }
    .nu31_link3
    {
      background: url(http://img15.hostingpics.net/pics/474878bouton3.jpg);
    }
    .nu31_link4
    {
      background: url(http://img15.hostingpics.net/pics/563812bouton4.jpg);
    }
    .nu31_link1:hover, .nu31_link2:hover, .nu31_link3:hover, .nu31_link4:hover

      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
     
    }
    .nu31_contenu1
    {
      width: 800px;
      height: 200px;
      margin-left: 150px;
      background: #e8e8e8;
      border: 1px solid #cccaca;
    }
    .nu31_contenu2
    {
      position: absolute;
      width: 0px;
      height: 200px;
      margin-left: 150px;
      overflow: hidden;
      background: #e9c8a4;
      border: 1px solid #cccaca;
      color: #8a6c4c;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .nu31_contenu3
    {
      position: absolute;
      width: 0px;
      height: 200px;
      margin-left: 150px;
      margin-top: -50px;
      overflow: hidden;
      background: #e9c8a4;
      border: 1px solid #cccaca;
      color: #8a6c4c;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .nu31_contenu4
    {
      position: absolute;
      width: 0px;
      height: 200px;
      margin-left: 150px;
      margin-top: -100px;
      overflow: hidden;
      background: #e9c8a4;
      border: 1px solid #cccaca;
      color: #8a6c4c;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .nu31_contenu5
    {
      position: absolute;
      width: 0px;
      height: 200px;
      margin-left: 150px;
      margin-top: -150px;
      overflow: hidden;
      background: #e9c8a4;
      border: 1px solid #cccaca;
      color: #8a6c4c;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .nu31_link1:hover .nu31_contenu2, .nu31_link2:hover .nu31_contenu3, .nu31_link3:hover .nu31_contenu4,
    .nu31_link4:hover .nu31_contenu5
    {
      width: 800px;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .nu31_contenu
    {
      display: block;
      padding: 5px;
      color: #965423;
      font-size: 10px;
      text-align: justify;
    }


    Personnalisation

    Pour personnaliser ce code c'est très simple : changez comme vous le souhaitez les couleurs des fonds, bordures et texte. Vous pouvez y inclure ce que vous souhaitez à l'intérieur : images, liens, etc...
    Concernant les tailles, sachez qu'une modification de taille d'un morceau entraine une adaptation des tailles du reste, ou même des marges.
    Les boutons sont simplement des images à faire à votre convenance, arrangez-vous pour qu'ils soient de la même dimension que les miens (150*48) afin de vous simplifier la vie.
    Vous pouvez ajouter une image au dessus en guise de titre, ou bien une image de fond globale, ou différente selon les contenus. En effet, chaque contenu ayant son propre css, vous pouvez leur mettre des couleurs différentes.

    En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code, la base a été écrite ici. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)

    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 12:50, édité 1 fois



    sign
    Jung Shin Il
    Jung Shin Il
    FémininAge : 22Messages : 12

    Ven 15 Fév 2013 - 19:19

    Merci du partage ~
    Gnuh
    Gnuh
    FémininAge : 23Messages : 87

    Mer 20 Fév 2013 - 16:34

    Merci pour ce partage, belle P.A :)
    Bleufi
    Bleufi
    FémininAge : 25Messages : 311

    Ven 22 Fév 2013 - 18:27

    Merci beaucoup :)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 875686Asuna
    Eerie Ange's
    Eerie Ange's
    FémininAge : 19Messages : 166

    Sam 23 Fév 2013 - 13:58

    merci!
    Iςħĩgø
    Iςħĩgø
    MasculinAge : 24Messages : 23

    Mer 27 Fév 2013 - 21:48

    .thk







    Le mec le + Styléééé
    Oué Je gère héhé


    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 1307201770013918900
    Anonymous
    Invité

    Ven 1 Mar 2013 - 9:46

    Merci beaucoup ! =)
    Jimmy
    Jimmy
    MasculinAge : 25Messages : 166

    Sam 2 Mar 2013 - 12:53

    VOir
    Kamiyu
    Kamiyu
    FémininAge : 28Messages : 9

    Dim 3 Mar 2013 - 18:51

    Merci :hug:
    Dendari
    Dendari
    FémininAge : 44Messages : 7

    Dim 3 Mar 2013 - 19:03

    Merci !
    Winterfell
    Winterfell
    FémininAge : 22Messages : 5

    Lun 4 Mar 2013 - 17:47

    Merci pour le partage et l'aperçu ^^ .



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 Littlegirlsignn
    Esther Amyko
    Esther Amyko
    FémininAge : 21Messages : 42

    Lun 4 Mar 2013 - 18:12

    Merci (;



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 Signa_10
    BiBiche
    BiBiche
    FémininAge : 34Messages : 6

    Lun 4 Mar 2013 - 21:16

    Merci pour ce travail
    Max Rénix
    Max Rénix
    MasculinAge : 26Messages : 56

    Mar 5 Mar 2013 - 13:16

    Merci
    erwand59
    erwand59
    MasculinAge : 31Messages : 88

    Dim 10 Mar 2013 - 18:06

    Merci a toi !
    HeliOs-G
    HeliOs-G
    MasculinAge : 22Messages : 21

    Dim 10 Mar 2013 - 20:33

    Thanks Wink
    Likilou
    Likilou
    MasculinAge : 27Messages : 307

    Dim 10 Mar 2013 - 20:47

    Merci :)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 707828SignArthur2
    servity
    servity
    MasculinAge : 49Messages : 82

    Lun 11 Mar 2013 - 15:18

    merci



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 HadqjCkktw
    Jar Jar Binks
    Jar Jar Binks
    MasculinAge : 24Messages : 6

    Sam 16 Mar 2013 - 0:11

    Merciii!
    Romàne.
    Romàne.
    FémininAge : 24Messages : 13

    Jeu 21 Mar 2013 - 19:42

    Merci ♥♥♥♥♥
    Aile
    Aile
    FémininAge : 33Messages : 134

    Ven 22 Mar 2013 - 8:55

    Sparrow, cette PA est juste magnifique et hyper pratique. Merci beaucoup de partager avec nous.



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 799284Sanstitre1
    Dellou
    Dellou
    FémininAge : 23Messages : 57

    Sam 23 Mar 2013 - 17:25

    Merci :3
    Cersei Lannister
    Cersei Lannister
    FémininAge : 29Messages : 13

    Lun 25 Mar 2013 - 23:44

    Merci c'est exactement ce que je recherchais
    Pocky'Mosh
    Pocky'Mosh
    FémininAge : 30Messages : 69

    Mar 26 Mar 2013 - 23:07

    Merci :3
    Graph
    Graph"X"
    MasculinAge : 35Messages : 268

    Jeu 28 Mar 2013 - 14:58

    just pour voir ^^



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 906554signaturegraphXAnonymous
    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 3150065406_1_2_RyY9oMWP
    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 3150229838_1_2_05FjnHrV
    Mon forum Reptile:
    PA onglets latéraux contenu coulissant en hover (CSS) - Page 3 3150620990_1_2_UZN7D24G

    Kyuusei Ban
    Kyuusei Ban
    FémininAge : 28Messages : 69

    Ven 29 Mar 2013 - 21:50

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Ven 16 Avr 2021 - 3:58