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.

-42%
Le deal à ne pas rater :
-42% Samsung TV QLED 4K 65″ 164 cm – TQ65Q64C 2023
699 € 1199 €
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

    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
    Etax
    Etax
    MasculinAge : 26Messages : 168

    Sam 30 Mar 2013 - 12:56

    Merci.
    athenais
    athenais
    FémininAge : 36Messages : 98

    Sam 30 Mar 2013 - 14:53

    merci ♥
    Coconut Dynamite
    Coconut Dynamite
    FémininAge : 30Messages : 149

    Sam 30 Mar 2013 - 20:55

    Merci pour ce tutoriel !



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 4 13031409202695789
    Okami
    Okami
    FémininAge : 29Messages : 620

    Mar 2 Avr 2013 - 23:03

    Très jolie !



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 4 Tumblr_m0lmf0oYqf1qbghoko1_500
    x°Okami°x
    crée par => Okami
    Libertee
    Libertee
    MasculinAge : 26Messages : 5

    Ven 5 Avr 2013 - 18:53

    Merci !
    Opaline
    Opaline
    FémininAge : 24Messages : 86

    Sam 6 Avr 2013 - 12:40

    Merci ^^



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 4 140502022634448028
    Ivy
    Ivy
    FémininAge : 28Messages : 45

    Lun 8 Avr 2013 - 18:01

    Super,merci
    Anonymous
    Invité

    Mar 9 Avr 2013 - 1:28

    Je ne peux que m'incliner devant ton talent en codage. Un grand merci à toi =3
    Sakura Sumeragi
    Sakura Sumeragi
    FémininAge : 33Messages : 62

    Mar 9 Avr 2013 - 7:32

    merci =)
    sosooo
    sosooo
    FémininAge : 29Messages : 5

    Mar 16 Avr 2013 - 16:46

    merci :)
    Hwan-Leo Flores
    Hwan-Leo Flores
    FémininAge : 30Messages : 275

    Sam 20 Avr 2013 - 16:53

    merci encore



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 4 Jjs4
    avatar
    Angel Tiger
    MasculinAge : 23Messages : 76

    Dim 21 Avr 2013 - 18:41

    Merci !!!
    HeartLessB
    HeartLessB
    FémininAge : 25Messages : 78

    Mar 23 Avr 2013 - 18:55

    merci pour le code ^^
    DaZeli
    DaZeli
    FémininAge : 28Messages : 377

    Dim 28 Avr 2013 - 2:09

    Merci pour le partage!
    Makhroe
    Makhroe
    MasculinAge : 34Messages : 143

    Lun 29 Avr 2013 - 1:04

    Merci pour ce tutoriel.
    Candy †
    Candy †
    FémininAge : 26Messages : 43

    Lun 29 Avr 2013 - 21:16

    Merci !
    Kiryuu02
    Kiryuu02
    FémininAge : 35Messages : 32

    Mar 30 Avr 2013 - 1:57

    merci
    SkullKid
    SkullKid
    FémininAge : 28Messages : 13

    Mer 1 Mai 2013 - 20:28

    merci :love:
    Loras Tyrell
    Loras Tyrell
    FémininAge : 32Messages : 14

    Dim 5 Mai 2013 - 18:42

    Merci :3



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 4 280030020
    Laura2045
    Laura2045
    FémininAge : 25Messages : 25

    Sam 18 Mai 2013 - 20:07

    Mercii ! (:
    Texas-flood
    Texas-flood
    FémininAge : 34Messages : 6

    Dim 19 Mai 2013 - 13:00

    Merci beaucoup du partage ham6
    defenrir
    defenrir
    MasculinAge : 41Messages : 105

    Lun 20 Mai 2013 - 13:25

    merchi d'avance =)
    Luna Arcana
    Luna Arcana
    FémininAge : 32Messages : 4

    Mar 21 Mai 2013 - 16:36

    Merci pour cette PA ! C'est très original :)
    Sosica
    Sosica
    FémininAge : 23Messages : 14

    Mar 21 Mai 2013 - 18:41

    Aie Aie Aie j'adore ! *0*



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 4 352043signature
    TheGost
    TheGost
    MasculinAge : 26Messages : 15

    Mar 21 Mai 2013 - 21:41

    Merci Wink
    Contenu sponsorisé


      La date/heure actuelle est Mer 28 Fév 2024 - 3:13