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 : -19%
PC portable MSI Gaming Pulse 16” -Ultra7 155H ...
Voir le deal
1299 €

    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
    milloo
    milloo
    FémininAge : 32Messages : 21

    Mer 19 Déc 2012 - 0:38

    Magnifique ! *^*
    Matryochka
    Matryochka
    FémininAge : 23Messages : 15

    Dim 23 Déc 2012 - 17:54

    Merci! Je suis curieuse de voir!



    Cordialement, Matryochka.
    PA onglets latéraux contenu coulissant en hover (CSS) - Page 2 Images?q=tbn:ANd9GcSH0FRX5sgM-gROwBrEO7NjxEjYTBoKp30i8JZVI3CumQUHuH4g
    Suika
    Suika
    FémininAge : 30Messages : 30

    Lun 24 Déc 2012 - 14:32

    superbe ! merci *O*
    Alenn
    Alenn
    FémininAge : 32Messages : 192

    Mer 26 Déc 2012 - 20:01

    Merci !



    Rien de nouveau.
    Madyson
    Madyson
    FémininAge : 24Messages : 18

    Mer 26 Déc 2012 - 23:06

    J'aime beaucoup :)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 2 405680Madysonbann
    Cky
    Cky
    MasculinAge : 29Messages : 40

    Lun 31 Déc 2012 - 23:04

    Merci du partage Very Happy
    Siprano
    Siprano
    FémininAge : 26Messages : 295

    Sam 12 Jan 2013 - 22:11

    merci encore pour ce tuto parfait
    Ren Hozukijo
    Ren Hozukijo
    MasculinAge : 32Messages : 10

    Jeu 17 Jan 2013 - 7:17

    jolie merci pour ce travaille je tente d apprendre
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    Ven 18 Jan 2013 - 12:58

    merci pour cette pa elle est magnifique
    Cissy
    Cissy
    FémininAge : 32Messages : 64

    Sam 19 Jan 2013 - 20:02

    Merci pour le tuto ! :cow:
    Belosnezhka
    Belosnezhka
    FémininAge : 26Messages : 283

    Lun 21 Jan 2013 - 23:18

    MERCI =)
    Junichi Kudo
    Junichi Kudo
    MasculinAge : 28Messages : 80

    Lun 21 Jan 2013 - 23:20

    Merci ^^
    Kitara-naruto-final
    Kitara-naruto-final
    FémininAge : 30Messages : 11

    Lun 28 Jan 2013 - 17:31

    merci
    Anéa
    Anéa
    FémininAge : 35Messages : 157

    Lun 28 Jan 2013 - 17:42


      Merci ~



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 2 305535lulupsdcopie
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Mar 29 Jan 2013 - 20:27

    Merci bien ^^
    Amera
    Amera
    FémininAge : 32Messages : 67

    Mer 30 Jan 2013 - 21:35

    C'est génial, merci !



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 2 734690sign1
    avatar
    Tony_Wayne
    MasculinAge : 34Messages : 45

    Jeu 31 Jan 2013 - 18:08

    Merci ^^
    Lilly31
    Lilly31
    FémininAge : 33Messages : 97

    Dim 3 Fév 2013 - 13:59

    *0* it's Perfect :)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 2 Rehete10
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 32Messages : 76

    Dim 3 Fév 2013 - 15:09

    merci pour l'astuce =)



    PA onglets latéraux contenu coulissant en hover (CSS) - Page 2 Bannol1xj5
    Crumaga
    Crumaga
    MasculinAge : 29Messages : 14

    Mar 5 Fév 2013 - 12:17

    Merci pour cette PA *-*
    Anonymous
    Invité

    Jeu 7 Fév 2013 - 0:56

    Merci ! ^^
    Billiejean
    Billiejean
    FémininAge : 31Messages : 13

    Jeu 7 Fév 2013 - 11:55

    C'est juste ... fantastique Oo !! Merci beaucoup de partager sérieux =D
    Yooachte
    Yooachte
    FémininAge : 31Messages : 54

    Jeu 14 Fév 2013 - 21:30

    C'était exactement ce que je cherchais !
    Carmina
    Carmina
    FémininAge : 38Messages : 506

    Ven 15 Fév 2013 - 14:46

    merci
    Genichi
    Genichi
    MasculinAge : 30Messages : 29

    Ven 15 Fév 2013 - 18:46

    Merci beaucoup, cest vraiment apprécié! =)
    Contenu sponsorisé


      La date/heure actuelle est Mar 5 Nov 2024 - 18:18