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.

Le Deal du moment : -35%
-34% TV OLED Philips 17” (194cm) Ambilight, ...
Voir le deal
1990 €

    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
    Yuee
    Yuee
    FémininAge : 30Messages : 77

    Jeu 30 Mai 2013 - 13:51

    Merciiii ! :3
    Blend
    Blend
    MasculinAge : 34Messages : 10

    Jeu 6 Juin 2013 - 16:36

    Merci beaucoup :p
    Honey
    Honey
    FémininAge : 33Messages : 57

    Jeu 6 Juin 2013 - 16:51

    Cette PA est juste magnifique *w* Merci beaucoup :love:
    Philia
    Philia
    FémininAge : 31Messages : 16

    Ven 7 Juin 2013 - 20:03

    Merciii Very Happy
    Seishin
    Seishin
    MasculinAge : 34Messages : 7

    Sam 8 Juin 2013 - 1:34

    Merci!
    Brodette
    Brodette
    FémininAge : 27Messages : 119

    Sam 8 Juin 2013 - 15:54

    Thanks a lot Capt'ain Wink



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 5 Ariel10
    Firtan
    Firtan
    MasculinAge : 31Messages : 23

    Jeu 13 Juin 2013 - 17:01

    Merci beaucoup ! :)
    bianca ~♥~
    bianca ~♥~
    FémininAge : 56Messages : 111

    Ven 14 Juin 2013 - 18:27

    Merciiiii ^.^



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 5 Coco_c11
    Ishyyn
    Ishyyn
    FémininAge : 29Messages : 90

    Sam 15 Juin 2013 - 22:51

    Merci, cette PA est juste trop chouette ♥
    Parking
    Parking
    FémininAge : 29Messages : 29

    Dim 16 Juin 2013 - 4:58

    Merci <3
    Nezumi
    Nezumi
    MasculinAge : 34Messages : 16

    Lun 17 Juin 2013 - 17:35

    Merci :)
    Féréole
    Féréole
    FémininAge : 37Messages : 55

    Mar 18 Juin 2013 - 14:46

    merci :)
    effyi
    effyi
    FémininAge : 29Messages : 41

    Mar 18 Juin 2013 - 16:26

    C'est magnifique merci beaucoup ♥
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 33Messages : 131

    Lun 24 Juin 2013 - 11:35

    Merci à toi (L)




    Our ice hearts beat
    Voir le monde dans un grain de sable. Et le paradis dans une fleur sauvage. Tenir l'infini dans le creux de sa main. Et l'éternité dans une heure - SIR WILLIAM BLAKE

    TUC
    TUC
    FémininAge : 36Messages : 103

    Mar 25 Juin 2013 - 10:12

    merci :)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 5 Tumblr_msx9fygOsJ1qlujrso1_250 PA onglets latéraux contenu coulissant en hover (CSS) - Page 5 Tumblr_msx9fygOsJ1qlujrso2_250 PA onglets latéraux contenu coulissant en hover (CSS) - Page 5 Tumblr_msx9fygOsJ1qlujrso3_250 PA onglets latéraux contenu coulissant en hover (CSS) - Page 5 Tumblr_msx9fygOsJ1qlujrso4_250
    Alaplaya1
    Alaplaya1
    FémininAge : 32Messages : 18

    Mer 26 Juin 2013 - 12:05

    Merci beaucoup pour le partage, c'est très généreux (;
    Mika-chan
    Mika-chan
    FémininAge : 32Messages : 76

    Ven 5 Juil 2013 - 15:39

    merci Very Happy
    NathanaelSane
    NathanaelSane
    FémininAge : 31Messages : 73

    Mar 9 Juil 2013 - 3:00

    Merci
    Anonymous
    Invité

    Mer 10 Juil 2013 - 9:48

    mercii
    Plume'
    Plume'
    FémininAge : 26Messages : 166

    Jeu 11 Juil 2013 - 18:16

    Merci =D
    Kureha
    Kureha
    FémininAge : 25Messages : 9

    Sam 13 Juil 2013 - 13:03

    *-* merci!!!
    Venise
    Venise
    FémininAge : 41Messages : 270

    Lun 15 Juil 2013 - 20:00

    bonjour et merci pour le tutoriel. Je vais l'utiliser pour mon forum, il est vraiment magnifique
    Adichou*
    Adichou*
    FémininAge : 32Messages : 71

    Jeu 18 Juil 2013 - 14:37

    Merci Wink
    FeliceFelicis
    FeliceFelicis
    FémininAge : 34Messages : 89

    Jeu 18 Juil 2013 - 21:35

    BEAU!

    Mercitoooos! Very Happy
    Archeos
    Archeos
    FémininAge : 28Messages : 60

    Ven 19 Juil 2013 - 16:41

    Merci ! <3



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 5 120523094846729821
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 8:41