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 à ne pas rater :
PC portable MEDION AKOYA E15423 15,6″ FHD ( i3-1115G4 – RAM 8 Go ...
249.99 €
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
    Anonymous
    Invité

    Ven 25 Juil 2014 - 18:36

    Merci
    Seikatsu Tengoku
    Seikatsu Tengoku
    MasculinAge : 28Messages : 11

    Lun 28 Juil 2014 - 10:55

    Merci!
    Youmu
    Youmu
    FémininAge : 28Messages : 5

    Dim 10 Aoû 2014 - 16:10

    Merci beaucoup du partage !
    Arpège
    Arpège
    FémininAge : 25Messages : 112

    Lun 11 Aoû 2014 - 11:25

    Il est classe
    Merci ^^



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 10 170221084427548922
    Writers World commence à ouvrir !
    Saya Akimoto
    Saya Akimoto
    FémininAge : 38Messages : 130

    Dim 24 Aoû 2014 - 11:34

    Merci beaucoup pour ce tutorial. Je sans qu'une amie amie va pouvoir s'en sortir grâce à toi.



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 10 Signat11
    Callisto
    Callisto
    FémininAge : 27Messages : 45

    Mar 26 Aoû 2014 - 14:03

    merci ~
    Lulucifer
    Lulucifer
    FémininAge : 28Messages : 24

    Jeu 28 Aoû 2014 - 19:10

    C'est trop beau! Je meurs! ,w,
    Mais tout est trop beau ici en fait. Et ton forum test est remplit de couleurs, c'est plaisant à voir! ,w, <3

    Merci pour ce magnifique partage!
    Loupiotre
    Loupiotre
    FémininAge : 36Messages : 46

    Jeu 28 Aoû 2014 - 19:52

    Wahou, c'est tellement bien fait :hug2:
    Irissia87
    Irissia87
    FémininAge : 36Messages : 124

    Dim 31 Aoû 2014 - 14:47

    merci!
    Stanislav
    Stanislav
    FémininAge : 26Messages : 8

    Dim 31 Aoû 2014 - 20:12

    merci !
    Bzzzz
    Bzzzz
    FémininAge : 39Messages : 88

    Lun 8 Sep 2014 - 20:35

    Ah super merci
    Glorious
    Glorious
    MasculinAge : 34Messages : 84

    Mar 9 Sep 2014 - 15:40

    merci !
    Moro-PM
    Moro-PM
    FémininAge : 21Messages : 149

    Mar 9 Sep 2014 - 16:19

    Très joulie, merci *^*
    Llariarith
    Llariarith
    FémininAge : 39Messages : 218

    Sam 27 Sep 2014 - 22:58

    Merci, je trouve tous tes codes magnifiques !
    Kahlane
    Kahlane
    FémininAge : 38Messages : 12

    Mer 1 Oct 2014 - 15:42

    Merci pour le partage!
    Snoow
    Snoow
    MasculinAge : 28Messages : 17

    Mer 1 Oct 2014 - 17:53

    Merchi !
    Lilandrile
    Lilandrile
    FémininAge : 37Messages : 60

    Jeu 2 Oct 2014 - 18:55

    Merci pour cette PA juste génial ^^
    Lauriale
    Lauriale
    FémininAge : 27Messages : 113

    Dim 26 Oct 2014 - 18:56

    Merci :)
    Lessien
    Lessien
    FémininAge : 41Messages : 163

    Mer 5 Nov 2014 - 19:41

    Peut-être vais-je enfin réussir à faire une PA qui me plaise avec celle-ci, fort colorée ? Merci pour le L.A !
    Hagel
    Hagel
    FémininAge : 37Messages : 79

    Mar 11 Nov 2014 - 16:34

    Merci ^_^
    tutox
    tutox
    MasculinAge : 42Messages : 22

    Mer 12 Nov 2014 - 10:39

    merci!!!nickel
    XaLis
    XaLis
    FémininAge : 26Messages : 44

    Sam 22 Nov 2014 - 16:58

    Merci du partage *-*
    Yesterday
    Yesterday
    FémininAge : 28Messages : 57

    Sam 29 Nov 2014 - 1:21

    Merci!
    Yser
    Yser
    FémininAge : 25Messages : 46

    Dim 30 Nov 2014 - 15:46

    Merci pour le tuto ! *w*
    BlueBerry ♪
    BlueBerry ♪
    FémininAge : 26Messages : 138

    Ven 2 Jan 2015 - 15:51

    J'aime beaucoup je te l'emprunte :) merci



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


      La date/heure actuelle est Mer 28 Fév 2024 - 19:47