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.

-60%
Le deal à ne pas rater :
Baskets Nike Air Max 2090
60 € 150 €
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
    Ryoma
    Ryoma
    MasculinAge : 33Messages : 420

    Ven 2 Jan 2015 - 23:31

    Merci beaucoup.
    Romann
    Romann
    FémininAge : 27Messages : 183

    Lun 5 Jan 2015 - 6:56

    Encore merci :)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 11 Unicor11
    Okalem
    Okalem
    FémininAge : 20Messages : 63

    Ven 9 Jan 2015 - 1:57

    merci !
    Miyoko
    Miyoko
    FémininAge : 28Messages : 213

    Mar 27 Jan 2015 - 15:29

    niceu



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 11 641359838739
    Everything.
    Everything.
    FémininAge : 28Messages : 14

    Mar 27 Jan 2015 - 17:02

    Merci beaucoup !
    Arrogant Mischief
    Arrogant Mischief
    MasculinAge : 25Messages : 70

    Ven 30 Jan 2015 - 22:25

    Superbe idée de page d'accueil !



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

    Mar 24 Fév 2015 - 18:04

    J'adore *_*
    Redingdom
    Redingdom
    FémininAge : 20Messages : 50

    Sam 28 Fév 2015 - 19:17

    Elle est superbe, merci du partage
    Argy
    Argy
    FémininAge : 22Messages : 98

    Ven 6 Mar 2015 - 18:43

    Merci cap'taine !
    Argy
    Argy
    FémininAge : 22Messages : 98

    Ven 6 Mar 2015 - 18:44

    Merci cap'taine !
    Argy
    Argy
    FémininAge : 22Messages : 98

    Ven 6 Mar 2015 - 18:44

    Merci cap'taine !
    fancy
    fancy
    MasculinAge : 30Messages : 34

    Mar 12 Mai 2015 - 8:27

    j'adore, je trouve ton code sublime <3
    Youp
    Youp
    FémininAge : 26Messages : 579

    Ven 15 Mai 2015 - 0:04

    Après personnalisation ça va être top, merci encore :love:



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 11 262632clip20160315at092522
    Maxine Evans
    Maxine Evans
    FémininAge : 26Messages : 94

    Ven 15 Mai 2015 - 12:05

    merci
    Keith Sanders
    Keith Sanders
    MasculinAge : 23Messages : 22

    Sam 16 Mai 2015 - 17:30

    C'est très joli!
    Florian Takiya
    Florian Takiya
    MasculinAge : 26Messages : 65

    Sam 13 Juin 2015 - 3:59

    Merci ♪
    Hame
    Hame
    FémininAge : 22Messages : 25

    Dim 14 Juin 2015 - 11:58

    J'aime beaucoup merci pour le partage ^^
    Merlijn
    Merlijn
    FémininAge : 24Messages : 11

    Mer 2 Sep 2015 - 3:35

    Merci ♥
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2433

    Mer 2 Sep 2015 - 13:38

    Merci (>_<)
    Anselm
    Anselm
    MasculinAge : 29Messages : 151

    Dim 4 Oct 2015 - 16:50

    Merci bien !
    sweetheart.
    sweetheart.
    FémininAge : 33Messages : 120

    Sam 5 Déc 2015 - 21:26

    Merci sparrow ! :wesh:



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Foudy
    Foudy
    FémininAge : 17Messages : 14

    Jeu 7 Jan 2016 - 18:50

    C'est magnifique



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 11 Sans-t11
    Kobye
    Kobye
    FémininAge : 24Messages : 38

    Sam 6 Fév 2016 - 18:03

    merci
    Dealhyeur
    Dealhyeur
    MasculinAge : 21Messages : 6

    Lun 15 Fév 2016 - 21:30

    Merci.
    KTMiz
    KTMiz
    MasculinAge : 22Messages : 47

    Dim 21 Fév 2016 - 22:45

    merci



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


      La date/heure actuelle est Ven 16 Avr 2021 - 4:31