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 :
Coffret dresseur d’élite ETB ...
Voir le deal
56.90 €

    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
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Sam 20 Juil 2013 - 21:03

    Merci beaucoup ! Tu te surpasses toujours Sparrow^^
    -Jukai.
    -Jukai.
    MasculinAge : 31Messages : 18

    Dim 21 Juil 2013 - 0:07

    Merci du partage c'est gentil de ta part Wink
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Lun 22 Juil 2013 - 12:10

    Merci pour ce tuto!
    A trés vite!
    Tchii!
    Nardzer
    Nardzer
    FémininAge : 25Messages : 22

    Lun 22 Juil 2013 - 15:42

    Il y a vraiment de quoi faire ici ! Merci beaucoup pour ce partage !
    Bee Chrome
    Bee Chrome
    MasculinAge : 29Messages : 70

    Mer 24 Juil 2013 - 18:54

    Super. :)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 6 223618SignatureLelouch2
    Zee
    Zee
    FémininAge : 33Messages : 37

    Ven 26 Juil 2013 - 21:33

    C'est super beau et cool ! Merci.
    mini-mimi
    mini-mimi
    FémininAge : 27Messages : 75

    Dim 28 Juil 2013 - 12:04

    Merci :)
    Toutankhamon
    Toutankhamon
    MasculinAge : 34Messages : 77

    Mer 31 Juil 2013 - 22:49

    Merci
    younessdu91
    younessdu91
    MasculinAge : 26Messages : 96

    Mer 31 Juil 2013 - 23:11

    Merci pour ce tuto' vous êtes vraiment de bon codeur, merci de partager votre savoir-faire Wink
    thuncrow
    thuncrow
    MasculinAge : 27Messages : 87

    Jeu 8 Aoû 2013 - 20:15

    Merci beaucoup du partage :)
    Summeryoid
    Summeryoid
    FémininAge : 29Messages : 32

    Ven 9 Aoû 2013 - 0:11

    Merci <3



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 6 539853pin
    Noizy.
    Noizy.
    MasculinAge : 25Messages : 43

    Ven 9 Aoû 2013 - 20:51

    Merci.
    Narutokage
    Narutokage
    MasculinAge : 26Messages : 17

    Ven 9 Aoû 2013 - 22:12

    Thank's



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 6 Kakash10
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Mar 13 Aoû 2013 - 0:55

    Merci.



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 6 Oyl7
    Honeey L.
    Honeey L.
    FémininAge : 31Messages : 80

    Dim 18 Aoû 2013 - 17:32

    merci beaucoup
    MyNameIsTanalia
    MyNameIsTanalia
    FémininAge : 27Messages : 25

    Mar 27 Aoû 2013 - 15:46

    Merci bien ! Wink
    Shouro-jidai
    Shouro-jidai
    MasculinAge : 31Messages : 9

    Mar 27 Aoû 2013 - 20:37

    J'aime beaucoup. Merci!
    Lylinee
    Lylinee
    FémininAge : 34Messages : 26

    Sam 31 Aoû 2013 - 17:20

    merci pour ce tutorel =)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 6 Sign113
    Tatia38
    Tatia38
    FémininAge : 34Messages : 316

    Sam 31 Aoû 2013 - 23:58

    Very Happy C'est beau
    Fallaha
    Fallaha
    FémininMessages : 80

    Mar 17 Sep 2013 - 1:43

    merci :)
    Adra
    Adra
    MasculinAge : 34Messages : 10

    Mar 17 Sep 2013 - 13:28

    Merci beaucoup !
    Rhythm Star
    Rhythm Star
    FémininAge : 23Messages : 61

    Dim 22 Sep 2013 - 18:22

    Merci *_*
    Pomme-de-terre
    Pomme-de-terre
    FémininAge : 25Messages : 34

    Ven 4 Oct 2013 - 16:21

    domo arigato kozaimas !
    Sinavlia
    Sinavlia
    FémininAge : 26Messages : 158

    Dim 6 Oct 2013 - 3:52

    Merci !



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 6 Grec10
    Miley Destiny
    Miley Destiny
    FémininAge : 27Messages : 25

    Mar 15 Oct 2013 - 16:42

    merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 15 Avr 2024 - 16:59