AccueilDernières imagesRechercherS'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.

-38%
Le deal à ne pas rater :
Enceinte colonne – Focal Chorus 726 – Noir Laqué (Retrait en ...
245 € 395 €
Voir le deal

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

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

    Sam 24 Nov 2012 - 17:12

    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
    Neko Mimi
    Neko Mimi
    FémininAge : 34Messages : 165

    Sam 24 Nov 2012 - 17:28

    Cette PA est juste parfaite, merci beaucoup pour le partage :love:



    PA onglets latéraux contenu coulissant en hover (CSS) Tumblr_me5uxaCZuJ1qj73e2o1_500
    Sauney
    Sauney
    FémininAge : 29Messages : 435

    Sam 24 Nov 2012 - 20:11

    J'adore le dégradé ! Merci pour le partage Very Happy

    P.S. : La PA Welcome+What's up est extra elle aussi !



    PA onglets latéraux contenu coulissant en hover (CSS) Signne10
    Barbosa
    Barbosa
    MasculinAge : 32Messages : 22

    Dim 25 Nov 2012 - 2:02

    Merci :)



    PA onglets latéraux contenu coulissant en hover (CSS) 1164232998
    Fares
    Fares
    MasculinAge : 31Messages : 51

    Dim 25 Nov 2012 - 11:30

    Yeah
    Poulpy
    Poulpy
    FémininAge : 35Messages : 32

    Dim 25 Nov 2012 - 14:55

    J'adore ♥
    Chucky'
    Chucky'
    MasculinAge : 26Messages : 80

    Dim 25 Nov 2012 - 16:24

    Merci
    Le pirate :DDD



    PA onglets latéraux contenu coulissant en hover (CSS) 1370524847-cooltext1062715975
    totothib
    totothib
    MasculinAge : 22Messages : 54

    Dim 25 Nov 2012 - 18:19

    J'adore :coeur:
    Connor Kenway
    Connor Kenway
    FémininAge : 24Messages : 8

    Mar 27 Nov 2012 - 18:51

    J'aime!
    higgins
    higgins
    MasculinAge : 24Messages : 14

    Mer 28 Nov 2012 - 13:29

    Merci Very Happy
    Anonymous
    Invité

    Mer 28 Nov 2012 - 18:34

    Thanks...
    FightStorm
    FightStorm
    MasculinAge : 24Messages : 54

    Dim 2 Déc 2012 - 13:23

    Merci !!!!



    PA onglets latéraux contenu coulissant en hover (CSS) 1425481378
    NellyFée
    NellyFée
    FémininAge : 28Messages : 62

    Dim 2 Déc 2012 - 15:19

    Merci du partage ;P
    Wanted
    Wanted
    FémininAge : 29Messages : 113

    Lun 3 Déc 2012 - 2:41

    Merci beaucoup ! :3
    Solfia
    Solfia
    FémininAge : 27Messages : 15

    Mer 5 Déc 2012 - 13:29

    merci beaucoup !!!! *o*



    PA onglets latéraux contenu coulissant en hover (CSS) 151241SignaSolfiaDalia1
    Alinoé
    Alinoé
    FémininAge : 32Messages : 35

    Jeu 6 Déc 2012 - 13:23

    Merci ! Very Happy
    Celska
    Celska
    FémininAge : 29Messages : 39

    Jeu 6 Déc 2012 - 19:47

    Merci pour le partage !



    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    Sarah W.
    Sarah W.
    FémininAge : 26Messages : 35

    Sam 8 Déc 2012 - 18:02

    Merci beaucoup ! C'est trop beau 8D .
    reset
    reset
    FémininAge : 33Messages : 8

    Dim 9 Déc 2012 - 0:18

    Punaise c'est bien fait TT
    Katsura
    Katsura
    MasculinAge : 40Messages : 190

    Dim 9 Déc 2012 - 9:22

    Merci beaucoup pour ce tutoriel ^^
    Soul
    Soul
    MasculinAge : 28Messages : 1723

    Dim 9 Déc 2012 - 14:43

    Merci chef Wink
    Stanislava
    Stanislava
    FémininAge : 29Messages : 102

    Mar 11 Déc 2012 - 15:53

    Merci beaucoup c:



    PA onglets latéraux contenu coulissant en hover (CSS) 777748signnu
    Stitch56
    Stitch56
    FémininAge : 31Messages : 209

    Ven 14 Déc 2012 - 17:11

    merci
    Zarwins
    Zarwins
    FémininAge : 28Messages : 155

    Dim 16 Déc 2012 - 8:48

    Mici *o*



    PA onglets latéraux contenu coulissant en hover (CSS) 121217030106243656
    shala
    shala
    FémininAge : 32Messages : 213

    Mar 18 Déc 2012 - 20:40

    merci



    Contenu sponsorisé


      La date/heure actuelle est Ven 8 Nov 2024 - 5:06